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

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'
      ]
    }
  });
}

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.