Msal 2.0 - how to generate Sign Up link with Azure B2C?

Question

In my angular app I use Azure AD B2C for authentication and MSAL.js 2.0 library to handle it. I have a "Log In" button on the home page, that is easy. But I also need a "Sign Up" button, so user would be redirected straight to Azure B2C 'Sign Up' page. Is this possible?

Answer 1

It is possible to redirect straight to Azure AD B2C signup page by creating individual sign-in and sign up policies and make the below changes. It won't be possible with single sign-in signup policy.

In the app config.ts add the below changes

export const b2cPolicies = {
    names: {
    SignIn: "b2c_1_SignIn",
    signup: "B2C_1_signup",
        resetPassword: "b2c_1_reset",
    },
    authorities: {
        SignIn: {
        authority: "https://fabrikamb2c.com/fabrikamb2c.onmicrosoft.com/B2C_1_SignIn"
      },
      signup: {
        authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_signuptest"
      },
        resetPassword: {
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_reset"
        } 
    }
}

Create a signup button and add signup click function

 signup() {
    this.authService.loginPopup(b2cPolicies.authorities.signup)
  }

Answer 2

We can use single sign-in signup policy and single signin or signup policy.

This method is for display signup signin policy:

export const msalConfig = {
  auth: {
    clientId: "your app client id",
    authority:
    "https://XXX.b2clogin.com/XXX.onmicrosoft.com/<b2c policy name>",
    redirectUri: AZURE_REDIRECT_URI,
    postLogoutRedirectUri: "/",
    knownAuthorities: [
      "https://XXX.b2clogin.com/XXX.onmicrosoft.com/<b2c policy name>",
    redirectUri: AZURE_REDIRECT_URI",
    ],
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true,
  },
};

export const loginRequest = {
  scopes: ["https://XXX.onmicrosoft.com/api/XXX"],
};

//Click on login 
const handleLogin = () => {
    instance.loginPopup(loginRequest);
  };

This method is for display individual signup policy:

const handleSignup = () => {
    instance.loginPopup({
      authority:
        "https://XXX.b2clogin.com/tfp/XXX.onmicrosoft.com/<b2c policy name>",
      clientId: "your app client id",
      redirectUri: AZURE_REDIRECT_URI,
      postLogoutRedirectUri: "/",
      knownAuthorities: [
        "XXX.b2clogin.com/rentpundit1.onmicrosoft.com/<b2c policy name>",
      ],
      protocolMode: "OIDC",
    });