DEV Community

loading...
Cover image for Quick hits: Azure AD B2C with the MSAL v2 Angular alpha
The 425 Show

Quick hits: Azure AD B2C with the MSAL v2 Angular alpha

John Patrick Dandison
Principal Program Manager on the Microsoft Identity developer advocacy team, helping developers design, build & run secure apps on any platform using Azure AD.
・1 min read

We get a lot of interesting questions over here at 425 HQ. Today I have a friend working with a customer doing angular - they're interested in using the msal-angular v2 alpha to use auth_code with PKCE instead of implicit. There is a sample app here, although that app is for regular Azure AD, not b2c. While the library usage is largely the same between AAD and B2C, the configuration is not.

To use the alpha with the sample app with b2c, make sure to add an authority that includes your b2c policy/user flow ID, in addition to adding that in the knownAuthorities block. For example, in app.module.ts:

function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'your-app-id-guid',
      redirectUri: 'http://localhost:4200',
      authority: 'https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_your_user_flow'
      knownAuthorities: [
        'https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_your_user_flow',
        'https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_another_flow'
      ]
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

You may also need to add a dummy scope to your app registration - earlier versions of msal-browser expected an access_token but one was not provided by default with b2c if there were no scopes outside of openid.

Discussion (1)

Collapse
pinich profile image
Pini Cheyni

There is an official angular 11 example project for B2C, github.com/AzureAD/microsoft-authe...

It should help anyone implementing AzureAD B2C with angular