'Configure both ADD (not B2C) and Azure B2C in a single Angular app with msal without page reload

We have a requirement where on login screen user has to be enabled with both options(using separate buttons) for Azure B2c and B2E which would have different configurations to be integrated in Angular application , how can we achieve this effectively without Application reload?



Solution 1:[1]

You can totally setup an app to authenticate with multiple directories.

Setup one Azure AD that will be used by employees, where partners can be added through B2B. Then also setup a B2C directory for the customers.

On your app side you need to display a choice for the user: if they want to sign in as an employee/partner or as a customer. Then you redirect to the correct sign-in page.

You'll need to define the app twice, once in both directories.

The actual implementation will vary based on your tech stack, but in ASP.NET Core you would need to setup multiple Open ID Connect middleware. And none of them can use AutomaticChallenge, as you do need to know where to redirect the user, you can't really choose for them.

Azure AD B2C now allows custom policies (preview feature). This means you can use any OpenId Connect provider for sign-in, including Azure AD of course.

This new feature allows you to:

  1. Create a B2C tenant with custom policy for employee/partner login through Azure AD
  2. Send all users to authenticate with your B2C tenant
  3. Users can choose if they want to sign in with social accounts or if they are an employee or partner
  4. If they choose to sign in as employee or partner, they would be redirected to your Azure AD
  5. In the end your app gets a token from B2C telling where the user signed in, so you can then do authorizations based on that info.

Refer this link for more info.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 RajkumarMamidiChettu-MT