Angular-auth-oidc-client: Azure B2C code flow with PKCE - POST returns CORS error

[alvipeo]

Basically, this is a duplicate from SO https://stackoverflow.com/q/57190998/2896495:

I used this lib in my angular 8 app with "new" Azure B2C endpoints:

• https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/authorize
• https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token

And STS Server looks like this:

• https://{tenant}.b2clogin.com/tfp/{tenant}/B2C_1_SuSi_v2/oauth2/v2.0/

But the problem is the oidc lib makes a POST request to https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi_v2

and I get CORS error:

Access to XMLHttpRequest at 'https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi_v2' from origin 'https://192.168.3.2:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What am I doing wrong here? This is Code Flow with PKCE.

here's the core for my _App.module.ts_:

export function loadConfig(oidcConfigService: OidcConfigService, httpClient: HttpClient) {
  if (!environment.production) {
    console.log("APP_INITIALIZER STARTING");
  }

  return () =>
    httpClient
      .get(`${window.location.origin}/api/oidc`)
      .pipe(
        take(1),
        switchMap((config: OidcConfig) => of(config)),
        tap(config => {
          oidcConfig = config;
        }),
        map(
          config =>
            `https://${config.tenant}.b2clogin.com/${
              config.tenant
            }.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SuSi_v2`
        )
      )
      .toPromise()
      .then(wellKnownUri => oidcConfigService.load_using_custom_stsServer(wellKnownUri));
}

export class AppModule {
  constructor(
    private oidcSecurityService: OidcSecurityService,
    private oidcConfigService: OidcConfigService
  ) {
    this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {
      // Use the configResult to set the configurations

      const config: OpenIdConfiguration = {
        stsServer: configResult.customConfig.stsServer,
        redirect_url: oidcConfig.redirect_url,
        client_id: oidcConfig.client_id,
        scope: oidcConfig.scope, // "code",
        response_type: oidcConfig.response_type,
        post_logout_redirect_uri: oidcConfig.post_logout_redirect_uri,
        silent_renew: true,
        silent_renew_url: "/silent-renew.html",
        post_login_route: oidcConfig.post_login_route,
        forbidden_route: oidcConfig.forbidden_route,
        unauthorized_route: oidcConfig.unauthorized_route,
        auto_userinfo: oidcConfig.auto_userinfo,
        log_console_debug_active: !environment.production
        // all other properties you want to set
      };

      this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
    });
    if (!environment.production) {
      console.log("APP STARTING");
    }
  }
}

[alvipeo]

ok, so I found out today with Code flow with PKCE simply doesn't work yet. I changed it to Implicit flow and it DOES work.

I'm pretty sure it's Azure B2C problem because of all those CORS errors.

But I'm not an expert in these things. If anyone has a working sample with Code flow PKCE agains Azure B2C, please share it!

[damienbod]

Azure is always a little behind. I usually avoid used B2C directly and put an IdentityServer4 in between. This way I have total control over the tokens, and can use the best practice without depending on the Azure problems.

[alvipeo]

I've seen Identity Server costs some money (as far as I understood). Besides it needs to be deployed somewhere and that deployment should be secured. This is really I wouldn't like to do. So B2C in this sense is a good solution. But yes, it's always behind.

[damienbod]

@alvipeo IdentityServer4 does not cost unless you need support, or you sponser then which is a good idea. I deploy to Azure and this works great.

Greetings Damien

[alvipeo]

Correct, but you do have to deploy it to Azure and then maintain (security, updates, etc). Yes, I know it's a good product. I tried the prev version. If I have enough with B2C I'll go for it! :)