search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.64k stars 2.65k forks source link

MSAL Angular query string is lost after redirected back. #3242

Closed fhljys closed 3 years ago

fhljys commented 3 years ago

Library

Framework

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

Browsers/Environment

Regression

Security

Source

github-actions[bot] commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@tnorling , after more investigation, I think we found the root cause. Issue happens here: image 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. image

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 commented 3 years ago

@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 commented 3 years ago

Thanks @jasonnutter. Verified. It works.