After login user gets initially redirected to /code

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-node@1.x.x
• @azure/msal-react@1.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angular@2.x.x
• @azure/msal-angularjs@1.x.x

Framework

• Angular
• React
• Other

Description

After a successful login, I get redirected to my application and in case of local development to: http://localhost:4200/#/code

This means I come from localhost:4200/#/home ->microsoft.com -> localhost:4200/#/code -> localhost:4200/#/home, whereas localhost:4200/#/code does not exist and lead to my “Not Found”-page ({ path: '**', component: NotFoundComponent }).

I got hash routing enabled and sometimes when the redirect is too slow my application tries to find the route /code which obviously does not exist. When it is fast enough then the user actually doesn’t see the intermediate redirect to /code because after a short time the user gets then redirect to the original page.

I am using the recommended approach with the provided RedirectComponent.

Error Message

No real error message, just the intermediate redirect to the route /code after a successful login

MSAL Configuration

// msal instance config
auth: {
      clientId: 'xxx',
      authority: `https://login.microsoftonline.com/xxx/`,
      redirectUri: window.location.origin,
      postLogoutRedirectUri: window.location.origin,
      navigateToLoginRequestUrl: true
    },

All other properties dont matter and are default settings.

Reproduction steps

1. Setup default configuration like described in the Angular 11 sample application
2. Use login redirect as an auth request
3. Add MsalGuard to all your routes to ensure an automated login
4. Enable hash routing
5. Access your website and observe the following behavior:
   1. Visit e.g. localhost:4200/#/home
   2. Redirect to microsoft and login
   3. Redirect to localhost:4200/#/code=xx
   4. Redirect to `localhost:4200/#/home

Expected behavior

I thought the RedirectComponent is responsible to handle the redirects. Therefore, I would either expect that the navigation to /code is handled by the component and the user does not see any real routing to this (in my case it would lead to a short view of the not found page as this route does not exist) or that the received code is put as a query parameter like localhost:4200/#/home?code=xxx.

Am I missing something in the configuration or did I something wrong?

Identity Provider

• Azure AD
• Azure B2C Basic Policy
• Azure B2C Custom Policy
• ADFS
• Other

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Please add browser name here)

Regression

• Did this behavior work before? Version:

Security

• Is this issue security related?

Source

• Internal (Microsoft)
• Customer request

[jasonnutter]

@sidyes Apologies for the delay in responding.

I can’t reproduce the infinite loops, as this was fixed in the latest version of MSAL Angular, I believe. What I can reproduce is that when using hash routing, if the MSAL Guard is put on the code route, if the user is not logged in and attempts to navigate to another protected route (e.g. /profile), after logging in they end up on the code route, instead of the page they were navigating to.

It is not clear right now why this is happening, but our recommendation would be to not put the guard on any of the placeholder routes (e.g. /code, /error, etc) when using hash routing, as that appears to mitigate the issue.

So what is the best way to enable automated login (securing all routes with the provided guard) as well as preventing the visible redirects to for example /code?

When using hash routing, we can’t do anything about the visible redirect to teh /code route, given AAD returns the auth code response in the hash, which triggers the Angular router. We will investigate the issue described above and see if we can provide a fix so that the user ends up on the correct page (given the endless loop issue should already be fixed).

[sidyes]

Any help/recommendation for this problem @jo-arroyo @jasonnutter ?