https://localhost:5000/connect/token 400 bad request Identity Server Angular 9 OIDC client

Question

I am using the Identity Server 4 Mongo DB with below config

private static string apiScope = "IdentityPortal.API";

 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,
                    ClientSecrets =
                    {
                        new Secret("secret".Sha256())
                    },
                }
            };
        }

private static ICollection<string> AllowedScopes()
        {
            return new List<string>
            {
                IdentityServerConstants.StandardScopes.OpenId,
                IdentityServerConstants.StandardScopes.Profile,
                IdentityServerConstants.StandardScopes.Email,
                apiScope
            };
        }

Angular Client

openID = {
    authority: "https://localhost:5000",
    client_id: "Local",
    redirect_uri: "https://localhost:4200/auth-callback",
    post_logout_redirect_uri: "https://localhost:4200",
    response_type: "code",
    scope : "openid profile email IdentityPortal.API",
    silent_redirect_uri: `https://localhost:4200/assets/silent-callback.html`
  };

I am able to return to the client from the Identity Server, however on the callback component facing the issue

Error: invalid_client
    at XMLHttpRequest.s.onload [as __zone_symbol__ON_PROPERTYload] (oidc-client.min.js:1)
    at XMLHttpRequest.wrapFn (zone-evergreen.js:1218)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41814)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
    at invokeTask (zone-evergreen.js:1621)
    at XMLHttpRequest.globalZoneAwareCallback (zone-evergreen.js:1658)

This error occurs due to

const user = await this.authService.completeAuthentication();

async completeAuthentication(): Promise<Oidc.User> {
    let user = await new Promise<Oidc.User>((resolve, reject) => {
      this.userManager.signinRedirectCallback().then(user => { resolve(user) }).catch(error => { reject(error); });
    });
    this.user = user;
    return this.user;
  }

On the chrome console

https://localhost:5000/connect/token --> 400 BAD request

Here is the form data

I am using angular 9 and asp net core 3.1 and I'm experiencing this. Any idea on how to apply your fix? — Ralph Olazo
same as yours. I already ask question but nothing answers me. maybe you have idea. stackoverflow.com/questions/62496639/… — Ralph Olazo

San Jaisy San Jaisy · Accepted Answer · 2020-05-18T03:14:37

I need to change the config settings to work

PKCE is already the official recommendation for native applications and SPAs - and with the release of ASP.NET Core 3 also by default supported in the OpenID Connect handler as well.

From identity server 4 documentation

var client = new Client
{
    ClientId = "...",

    // set client secret for confidential clients
    ClientSecret = { ... },

    // ...or turn off for public clients
    RequireClientSecret = false,

    AllowedGrantTypes = GrantTypes.Code,
    RequirePkce = true
};

Update the client config

new Client
                {
                    ClientId = "Local",
                    //ClientSecrets = new List<Secret> { secret },
                    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,
                    AccessTokenType = AccessTokenType.Jwt,
                    RequireClientSecret = false,
                    RequirePkce = true
                }

https://localhost:5000/connect/token 400 bad request Identity Server Angular 9 OIDC client

2 Answers