Authentication on angular spa using msal.js

Question

my angular app has 1000s unique routes and users should be able to click on login button from any of those pages. Have implemented msal.js basing on this sample :

https://github.com/Gimly/simpleAngularAzureB2C/blob/master/src/app/authentication.service.ts

I am getting following error when calling login method:

AADB2C90006:+The+redirect+URI+'http://localhost:39579/unique-uri'+provided+in+the+request+is+not+registered+for+the+client+id+

Is there a way to get around this?

Thanks!

Answer 1

By default, the Msal.UserAgentApplication constructor sets the "redirect_uri" request parameter to the current URL, which doesn't scale.

The Msal.UserAgentApplication constructor accepts a "redirectUri" options argument that enables the "redirect_uri" request parameter to be set to a fixed URL (e.g. "http://localhost:39579/authcallback") that is registered for the Azure AD B2C application.

Before MSAL generates the authentication request to Azure AD B2C, it writes the current URL (e.g., "http://localhost:39579/unique-uri") to storage and then redirects the user agent to the authentication endpoint.

At the "/authcallback" endpoint, you must create a new instance of Msal.UserAgentApplication, to handle the authentication response.

After MSAL verifies the authentication response from Azure AD B2C, it reads the original URL from storage and then returns the user agent to this URL.