Azure B2C for Angular 8 app with angular-auth-oidc-client - b2clogin endpoint POST CORS error

Question

I used Damien Bod's angular-auth-oidc-client 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");
    }
  }
}

Answer 1

I struggled with Azure AD CORS support for SPAs a couple of years ago - and had to code some workarounds to get the oidc-client working.

Support is better as of 2020 and CORS + PKCE are now both supported. If it is useful, in combination with other resources posted here, see my Azure AD tutorial for getting an SPA and API working together.

Answer 2

UPDATE

This is not true for quite some time now - Damien Bod's angular-auth-oidc-client does work with Azure AD B2C with PKCE. Look for his article in the Internet, it describes every step.

I've been successfully using it for about a year now.

---

ok, so I found out (the hard way) Code Flow with PKCE simply doesn't work with SPA!

But implicit flow 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!