(Cancel button) Error - Guard - error while logging in, unable to activate

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.21.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.1.0

Description

I am integrating B2C the same way as it’s described in https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/2-call-api-b2c in my project

My app has “/panel/settings” Component, which is protected by MsalGuard:

const panelRoutes = [
  { path: '', component: PanelHomeComponent },
  { path: 'settings', component: PanelSettingsComponent },
];

const routes: Routes = [
  { path: 'panel', component: PanelComponent, canActivate: [MsalGuard], children: panelRoutes },
];

I implemented EditProfile button (redirect) there. It works ok when I update the profile (it redirects me to “/panel/settings” without any issues). But there is a problem when I click a Cancel button (default EditProfile user flow). Logs:

Steps and redirects:

1. I click the Cancel button on the default EditProfile B2C page
2. Auto-redirect to https://localhost:4200/
3. Auto-redirect to https://localhost:4200/panel/settings
4. Auto-redirect to https://localhost:4200/ (wrong)

When I try to click Login button again on the landing page after all auto-redirects:

Angular: 13.0.2 .NET Core: 6

MSAL Configuration is the same as in https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/2-call-api-b2c (different clientId, etc params ofc)

MSAL Configuration

No response

Relevant Code Snippets

No response

Identity Provider

Azure B2C Basic Policy

Source

Internal (Microsoft)

[tnorling]

It indicates that loginPopup or loginRedirect/handleRedirectPromise threw an error which resulted in the user not being logged in

[tnorling]

Just for clarification on your suggestion. You are suggesting we rebuild the MSAL Guard and add the catchError on the handleRedirectObservable?

Correct. The current behavior of the MSAL Guard naiivly assumes that when a redirect returns an error it means that the user should not have access to the guarded route. This is not an accurate assumption when trying to sign a 2nd user in or when working with B2C where you might be invoking interaction to go to the profile edit or password reset policy rather than to sign a user in. You should modify the existing MSAL Guard catchError handler to check whether or not a user was already signed in when this error was thrown. If there is a user signed in you can activate the Guard - if not you can use the existing behavior to render the login failed route.

Also what page should get the handle handleRedirectObservable? The page that initiated the password reset or the page that we are redirecting to.

Short answer: both. Long answer: handleRedirectObservable should be run on all pages that will be hit after the redirect to the IDP. By default handleRedirectObservable called on the redirectUri page will redirect you to the calling page and then handleRedirectObservable called on the calling page will handle the response.