Error getting access-token when using code flow + pkce

Hello,

I’m trying to use the library with the code flow + pkce. I use Azure AD B2C as identity provider. For testing purposes, I have created a new test app (Angular 8), with the following code in the AppComponent:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(readonly oauthService: OAuthService){
    this.oauthService.configure(authCodeFlowConfig);

    this.oauthService.tokenValidationHandler = new JwksValidationHandler();

    this.oauthService.loadDiscoveryDocument("https://<<app-name>>.b2clogin.com/<<tenantId>>/v2.0/.well-known/openid-configuration?p=B2C_1_LocalAccountSignIn").then( resp => {
      return this.oauthService.tryLoginCodeFlow();
    }).then(_ => {
      if (!this.oauthService.hasValidAccessToken()) {
        this.oauthService.initCodeFlow();
      }
    })
    .catch(err => {
      console.log('error: ', err)
    });
  }
}

When browsing to http://localhost:4200, it does redirect to the oauth server login page (login.microsoftonline.com/…) and after having logged in succesfully, it redirects back to localhost:4200, but Chrome console logs shows this error from angular-oauth2-oidc.js:

'Error getting token' with the message: 'Http failure response for https://<<app-name>>.b2clogin.com/<<tenantId>>/oauth2/v2.0/token?p=b2c_1_localaccountsignin: 0 Unknown Error'

The funny thing is that the identity provider does return a 200 OK response including the expected payload, but either Angular or the framework still interpret it as an Http Error Response.

When replaying the exact same POST using Postmen, it returns the expected 200 OK response including an access_token, refresh_token. etc) in the response body.

So it seems like the library isn’t able to pick up the response…

[joscht]

Concerning the CORS error: Azure AD B2C does not currently support CORS on the token endpoints. Therefore it’s not possible to use the code flow in a browser app and you’ll need to use the implicit flow. They seem to be working on it though: https://feedback.azure.com/forums/169401-azure-active-directory/suggestions/37689847-cors-for-token-endpoint

[daanstolp]

I am a colleague of the OP, working on the same project. We have put together a sample application to help debug this issue. The code can be found here: https://github.com/daanstolp/oidc-angular-azure-b2c. This application exhibits the exact problem as described in this issue.

This project is configured to authenticate using our Azure AD B2C identity provider. The issuer URL, client id/secret, etc. are all pre-configured and ready to go.

@jeroenheijmans we have created a test user account for you or any other community member that is willing to help us debug this issue. If anyone wants access, please let us know in a reply here where we can send the credentials.