angular-oauth2-oidc implementation is (falsely) throwing a CORS error

Question

I'm trying to implement angular-oauth2-oidc Authentication in my angular app. On server side everything is configured correctly (also CORS).

My configuration looks like this:

    this.oauthService.configure(authCodeFlowConfig);
    this.oauthService.setStorage(localStorage);
    this.oauthService.setupAutomaticSilentRefresh();
    this.oauthService.tokenValidationHandler = new NullValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
       console.log('Discovery document fetched successfully');
    });

My URL looks like this:

https://some-identity-provider.com/OAuth/Authorize?client_id=xxxxxx&p=my_policy&redirect_uri=' + window.location.origin + '&scope=openid%20profile&response_type=id_token

This URL definitely works. When I open it directly in the browser, it correctly redirects me to the login page.

However, in my application, it tries to redirect me to the login page, but I'm getting a CORS error:

When I look at the parameters, it seems to append /.well-known/openid-configuration to the last parameter.

Somehow it seems to mix up the URL and its query parameters...

Can anybody please help?

Answer 1

Since some of you asked, let me post how I solved this issue:

The problem was in my AuthConfig:

export const authConfig: AuthConfig = {
    // Url of the Identity Provider
    // The problem was here: What I had before (caused the bug):
    issuer: 'https://some-identity-provieder.com/.well-known',

    // What fixed the issue is: Providing only the base url here:
    // The lib takes care of appending all parameters if needed.
    issuer: 'https://some-identity-provieder.com',

    // URL of the SPA to redirect the user to after login
    redirectUri: window.location.origin,

    // The SPA's id. The SPA is registerd with this id at the auth-server
    // clientId: 'server.code',
    clientId: environment.clientId,

    responseType: 'code',

    logoutUrl: 'some-logout-page.com',

    scope: `openid profile offline_access ${environment.clientId}`,

    showDebugInformation: environment.isLocalEnvironment,

    // turn off validation that discovery document endpoints start with the issuer url defined above
    // https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/using-an-id-provider-that-fails-discovery-document-validation.html
    strictDiscoveryDocumentValidation: false,
    skipIssuerCheck: true,
};

Please see the issuer. Also check all other parameters. This is my working config.

It's worth to mention to provide the clientId in the scope, because only then you get an id_token.

Hope this helps :)