4

I am using the OIDC client JS in Identity server 4 with react keep getting the error

Client secret validation failed for client, Invalid client secret

on Authorization code flow,

Oidc setting

private getClientSettings(): any {
    return {
      authority: "https://localhost:5001",
      client_id: "Local",
      redirect_uri: "https://localhost:5001/auth-callback",
      post_logout_redirect_uri: "https://localhost:5001",
      response_type: "code",
      scope: "profile openid email IdentityPortal.API offline_access",
      //filterProtocolClaims: environment.openID.filterProtocolClaims,
      loadUserInfo: true,
      monitorSession: true,
      silent_redirect_uri: "https://localhost:5001/silent-reniew.html",
      accessTokenExpiringNotificationTime: 20, //default 60
      checkSessionInterval: 5000, //default 2000
      silentRequestTimeout: 2000,
    };
  }

Identity Server 4 config

public static IEnumerable<Client> GetClients()
        {
            // client credentials client
            return new List<Client>
            {
                new Client
                {
                    ClientId = "Local",
                    //ClientName = "Local",
                    AllowedCorsOrigins = new List<string> { "http://localhost:4200","https://localhost:4200" },
                    AllowedGrantTypes = GrantTypes.Code,
                    AllowAccessTokensViaBrowser = true,
                    AccessTokenLifetime=86400,
                    RequireConsent = false,
                    UpdateAccessTokenClaimsOnRefresh = true,
                    RedirectUris = LocalRedirectUris(),
                    PostLogoutRedirectUris = LocalRedirectUris(),
                    AllowedScopes = AllowedScopes(),
                    AllowOfflineAccess = true,
                }
            };
        }

Log from Identity Server

info: IdentityServer4.Hosting.IdentityServerMiddleware[0]
      Invoking IdentityServer endpoint: IdentityServer4.Endpoints.DiscoveryEndpoint for /.well-known/openid-configuration
info: IdentityServer4.Hosting.IdentityServerMiddleware[0]
      Invoking IdentityServer endpoint: IdentityServer4.Endpoints.TokenEndpoint for /connect/token
info: IdentityServer4.Events.DefaultEventService[0]
      {
        "Name": "Client Authentication Failure",
        "Category": "Authentication",
        "EventType": "Failure",
        "Id": 1011,
        "ClientId": "Local",
        "Message": "Invalid client secret",
        "ActivityId": "0HLVQDNPJELVT:00000015",
        "TimeStamp": "2020-05-17T14:26:15Z",
        "ProcessId": 11600,
        "LocalIpAddress": "::1:5001",
        "RemoteIpAddress": "::1"
      }
fail: IdentityServer4.Validation.ClientSecretValidator[0]
      Client secret validation failed for client: Local.

Getting 400 bad request on https://localhost:5001/connect/token

Content-Type: application/x-www-form-urlencoded

FORM-DATA

client_id: Local
code: Pu5XVqWcaOavZYWOJqy07gHU7WYJ3aCQ_NBkpzszLnA
redirect_uri: https%3A%2F%2Flocalhost%3A5001%2Fauth-callback
code_verifier: 7985598b08fe49c49c37e3ef9e909295aeacc16b1b904e8990d7438cc60edb377bd31ee6d466489bbde9c75170470048
grant_type: authorization_code
San Jaisy
  • 15,327
  • 34
  • 171
  • 290

1 Answers1

8

You simply don’t use Client Secrets for JavaScript based Single Page Applications(SPA) like React. This is because these browser based applications can’t be trusted to securely keep the secret. The recommended way for SPAs is Authorization Code Flow With PKCE (not Implicit). You should look into implementing that.

Edit: To do that you need to set RequireClientSecret = false and RequirePkce = true in your client settings.

LalitaCode
  • 410
  • 4
  • 10
  • I remove the secrets, but still the same issue. I am using the wrong granttype AllowedGrantTypes = GrantTypes.Code, – San Jaisy May 18 '20 at 01:25
  • 1
    @SanJaisy You also need to set RequireClientSecret as false in your client settings. Anyways you should look to implement PKCE. – LalitaCode May 18 '20 at 01:31
  • thank you if work for me . I had to add RequireClientSecret = false and RequirePkce = true – San Jaisy May 18 '20 at 03:11
  • 1
    @LalitaCode thanks for the answer. I was getting exactly the same issue because I had left out RequireClientSecret. Saw it in your comment and it resolved the issue. Maybe consider moving that bit of info to your answer? – Andy N Aug 28 '20 at 09:28
  • @AndyN Thanks, for the heads up. I have my edited my answer. – LalitaCode Aug 28 '20 at 09:35
  • I'm a bit confused. The *auth code flow* is: call */authorize*, provide stuff, get code send to pre-registered URL, call */token* to exchange it for access and refresh tokens. But when I try to go PKCE flow and make a call to */authorize* with Postman, I get that *challenge_code* is missing. Well, du'h! I need to obtain it first and I assume I do that the same way as with code exchange for tokens. Or how do I get the first challenge code? I'm missing something... – Konrad Viltersten Jul 20 '21 at 14:07