MSAL Angular query string is lost after redirected back.

[fhljys]

Library

• msal@1.4.0 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 8
• React
• Other

Description

In Angular APP, hit exactly the same issue as described here.
The query string appeared for a while and then got lost.
https://stackoverflow.com/questions/63707766/capturing-query-string-before-angular-constructor-is-called

We are using 1.4.0, tried 1.4.8, same issue

Error Message

MSAL Configuration

{
auth: {
clientId: clientId,
authority: AAD_ENDPOINT + (this._tenantId || 'organizations'),
validateAuthority: true,
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin + baseHref,
navigateToLoginRequestUrl: true
},
cache: {
cacheLocation: window.navigator.userAgent.indexOf('Edge') > -1 ? 'localStorage' : 'sessionStorage'
},
system: {
loadFrameTimeout: 30 * 1000
},
framework: {
isAngular: true
}
}

// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

// Provide relevant code snippets here.
// For Azure B2C issues, please include your policies.

Expected behavior

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

[github-actions]

Invalid Issue Template:
Please update the original issue and make sure to fill out the entire issue template so we can better assist you.

[tnorling]

@fhljys Can you please share steps to reproduce and verbose level logs from msal? It's unclear from the stackoverflow issue linked, is this an issue with your own custom query string or the hash that contains the tokens returned from AAD? Can you clarify?

[fhljys]

Hi @tnorling , thanks for your prompt reply.

Here is to provide more details

1. I start a page with https://myapp.cloudapp.net/en-us/authoring?factory=xxx,
2. I was been redirected to login.microsoft and when redirect back I got https://myapp.cloudapp.net#id_token=mytoken, note, all the path and query string are lost
3. Then at some point I got https://myapp.cloudapp.net/en-us/authoring?factory=xxx#id_token=mytoken. This looks perfect to me. All the query and path are recovered
4. Then I got https://myapp.cloudapp.net, noting is left..(But at this moment, my app is already logged in.

From 3->4, my path and query string are lost..
I shared you a gif in teams as well.

[fhljys]

@tnorling , after more investigation, I think we found the root cause.
Issue happens here:

The original code removed hash, but an extra # is left. Angular will treat this as a location change, so it will cancel the original navigation and trigger a new one. The cancel operation somehow triggered an extra pop state.

So the issue here is why MSAL provides me an extra # after the navigation? Could you fix that?
(I tested with my code, (referencing this https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684) code on the right side can get rid of this issue. )

[jasonnutter]

@fhljys Please update to the latest version of msal, as this issue (extra # remaining in url) was addressed in 1.4.2: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/changelog.md#142

[fhljys]

Thanks @jasonnutter. Verified. It works.