How to register and login from an Angular app using Azure AD B2C

Marc Dürst 46 Reputation points
2021-02-06T07:58:54.54+00:00

Since hours I try to find a way how to register and login using Azure AD B2C so all user infos of my Angular app are stored inside Azure AD B2C and not in my applications database.

I search articles and tried it on my own for many hours now - without success. It looks like all the information in the internet is outdated in one or another way. Especially on the part how to exactly configure Azure B2C to get access from an Angular app. It looks like the whole Azure AD B2C configuration user-interface has changed a lot comparing to documentation etc.

Questions:

  • How to configure the app registrations in details to get access from Angular?
  • What library to use how (MSAL 1.x, MSAL 2.x or other open-id libs)
  • How exactly to configure the MSAL 1 or MSAL 2 library on the Angular client? (Authority, Client-ID, etc.)
  • Choose "Web" or "SPA" for this kind of app (tried both, think SPA but doesn't work)? What to choose for which client library?
  • What options to choose in app registrations regarding which client lib?
  • What to configure outside of the app-registration so an Angular app can trigger/use the flows and get authentication token?
  • What is the correct "authority" URL? Does it differ depending on the library / version one uses? (eg. MSAL 1 vs MSAL 2)
  • Is there any updated how-to or sample for a recent Angular version (>= 10)?
  • What must be done to run the Angular app on localhost and connect to B2C? Eg. must it be HTTPS? Where what to configure to address the CORS errors?

Thanks for your help!
Marc

Microsoft Security | Microsoft Entra | Microsoft Entra External ID
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.