Client secret validation failed for client, Invalid client secret on Authirization code flow

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

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.