IdentityServer External auth provider - auth-callback - Redirection - 400 Bad request

Question

I am following https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client and https://www.scottbrady91.com/Angular/Migrating-oidc-c

Answer 1

For some reason Angular do not accept that much data(Cookie) as part of Header. Though this works with JS client, I am not sure why this happens with Angular.

During initial phase of development, for some reason, I have commented out the following lines in Account/ExternalController.cs of IdentityServer

// delete temporary cookie used during external authentication
await HttpContext.SignOutAsync(IdentityServer4.IdentityServerConstants.ExternalCookieAuthenticationScheme);

When this line is commented out, there will be additional Cookie that will be posted to Angular during the call back.

Uncommented the above line will delete the temporary Cookie and there will be less header data during the call back and it invokes the respective Angular call back component and sets the bearer token.

Clarifications Required

1. If someone can share why Angular isn't accepting large header data while it works perfectly with JS client.
2. Though Angular says Bad request, I was not able to find from where(which layer in Angular) this error occur is thrown. I did not even see a single line of error from which I could get some hint on reason for the error(large header data)

If some expert could share their experience on the above couple of points, it will be really helpful to understand how Angular works.

If for any reason, you cannot limit the header size, then increase the node's --max-http-header-size. Kindly refer https://stackoverflow.com/a/57667786/2922388 on how to do it.

Answer 2

Perhaps you mixed something up in routes or redirect_url configuration?

Based on configuration of the client and server you posted, redirect_url should be:

http://localhost:4200/auth-callback`

Yet, in the screenshot path is /call-back, not /auth-callback.

I would check if configurations (client and server) and Angular router all have same path /auth-callback configured.

Answer 3

As you already find out the exact problem is of header limit and solve it by limiting cookie size but limiting cookie size may not be a solution everytime.Main reason behind why angular doesn't accept large header data is bcs angular use node serve webpack-dev-server and there is limit on header size in node js you can find related issue bellow

ng serve fails to serve pages when large cookies are present

400 Bad request due to Node limiting header size to 8kB

Update npm run to fix hpe_header_overflow in recent nodejs versions

Make HTTP_MAX_HEADER_SIZE configurable

So instead of using ng serve using command

node --max-http-header-size=16385 ./node_modules/@angular/cli/bin/ng serve

should be the solution to your problem

Answer 4

Just try with few fixes. First - RedirectUris seems suspicious, since it contains more than one value, - according to the http://docs.identityserver.io/en/latest/topics/clients.html - declaring this as a List<string> could be the source of the issues.

Next, following the example of server side config https://github.com/IdentityServer/IdentityServer4.Demo/blob/master/src/IdentityServer4Demo/Config.cs

    new Client
    {
       ...
        RequireClientSecret = false,
        RequireConsent = false,

        AllowedGrantTypes = GrantTypes.Code,
        AllowedScopes = { "openid", "profile", "email", "api" },

        AllowOfflineAccess = true,
        RefreshTokenUsage = TokenUsage.ReUse

    }

Let's assume that AllowedScopes should include mandatory email scope, then GetIdentityResources() needs last fix:

    public static IEnumerable<IdentityResource> GetIdentityResources()
    {
        return new List<IdentityResource>
        {
            new IdentityResources.OpenId(),
            new IdentityResources.Profile(),
            new IdentityResources.Email(),
        };
    }

Since SPA code is out of scope here, for proper flow implementation please follow the examples:

https://github.com/IdentityServer/IdentityServer4.Demo/,