Execute user flow on Azure B2C with Angular SPA MSAL library

Question

I have setup a Azure B2C for experimenting, and have created a signupandsign as a user flow.

I've followed the github samples on how to use the MSAL library from Angular 2+ and have as a result got this format:

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
];

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: environment.clientId,
      authority: environment.authority,
      validateAuthority: true,
      redirectUri: environment.redirectUrl,
      postLogoutRedirectUri: environment.redirectUrl,
      navigateToLoginRequestUrl: true,
    },
    cache: {
      storeAuthStateInCookie: false, // set to true for IE 11
    },
  };
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return {
    popUp: false,
    protectedResourceMap
  };
}

export const environment = {
  production: false,
  clientId: '22ccxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  authority: 'https://login.microsoftonline.com/bc5xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/',
  redirectUrl: 'http://localhost:4200'
};

But all it does it take to sign in page, doesn't give me any options for sign up. How do i trigger the signupandsign user flow from my Angular SPA?

Here is the main one docs.microsoft.com/en-us/samples/azure-samples/… — Aeseir
The documentation in some cases is horrific to say the least — Aeseir
Please refer to the sample for b2c with policy. The authority URL needs to be like https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi which refers the policy — Raghavendra beldona
Following the tutorial it refers to using Implicit and not PKCE. It also contradicts the microsofts own announcement to use MSAL 2+ which advises to use SPA setting (PKCE). MSAL 2+ link about PKCE docs.microsoft.com/en-us/azure/active-directory/develop/… — Aeseir

Raghavendra beldona Raghavendra beldona · Accepted Answer · 2020-08-05T12:07:45

The sample which you are referring helps you to Sign in users and call the Microsoft Graph API from an Angular single-page application.

In the document you can see below note which points you to the tutorial

Note: A more detailed tutorial covering this sample can be found here.

Please refer the Sample for B2C Angular SPA.

Execute user flow on Azure B2C with Angular SPA MSAL library

1 Answers