microsoft-authentication-library-for-js: Login Redirect fails in Angular 10 - MSAL Browser Sample

Library

msal@1.x.x or @azure/msal@1.x.x
@azure/msal-browser@2.1.0
@azure/msal-angular@0.x.x
@azure/msal-angular@1.x.x
@azure/msal-angularjs@1.x.x

Important: Please fill in your exact version number above, e.g. msal@1.1.3.

Framework

Angular: I am testing the Angular 10 - MSAL Browser Sample

Description

The Angular 10 - MSAL Browser Sample has been updated to include the ability to do a login redirect rather than a login popup. However using this login redirect, the post login redirect (in the sample set to http://localhost:4200) does not correctly refresh and the Angular Web App (or specifically MsalService) is not aware of the successful login. Calling this.authService.getAllAccounts().length in the AppComponent returns a length of 0. After refreshing the Chrome browser, the Web Application is able to process the successful login. In Safari browser the refresh also fails.

Issue is not present when login is provided with popup.

The sample uses @azure/msal-browser version 2.0.2, but I have tried 2.1.0 with the same results.

Error Message

Security

Is this issue security related?

Regression

Did this behavior work before? Version: Not aware

MSAL Configuration

auth: {
      clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6',
      redirectUri: 'http://localhost:4200'
}

Reproduction steps

clone the Angular 10 - MSAL Browser Sample
npm install and npm start
visit http://localhost:4200 and start login redirect by clicking “Login”
After providing Azure AD credentials, browser is redirected to http://localhost:4200, note that the “Login” button still shows and the “Logout” button is hidden.

Calling the Microsoft Graph in the /profile location will trigger a failing acquireToken call.

When I refresh Chrome, calling authService.getAllAccounts() returns the correct value. In Safari the browser refresh kicks off a failing acquireToken loop.

When I use interactionType: InteractionType.POPUP in the interceptor config, the post login redirect immediately shows the correctly refreshed Angular web app and the Logout button is showing rather than the Login button. So, this seems related to the InteractionType.REDIRECT configuration only.

Expected behavior

Browsers/Environment

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 20 (3 by maintainers)

Most upvoted comments

Is there a workaround for this? I need to use Authoritzation-Code Flow, and I cannot use a popup as well.

mexmirror on Oct 6, 2020

Exact same problem here… redirect method doesn’t work correctly on Safari if The user doesn’t have a session already (first Microsoft login).

Apparently the session data are not yet cached when handleRedirectObservable subscription streams for the existence of an Account in MsalGuard

brunnosantos on Oct 2, 2020

The only change I saw in the Angular 10 sample was an update to msal-browser to the latest version (v2.3.0), which did fix the issue for me.

Aside from that, after the user was redirected back to the site after signing in, the page would refresh itself repeatedly until I modified my main page’s routing from “/” to an actual path “/dashboard” like so:

ghost on Oct 8, 2020

Exact same problem here… redirect method doesn’t work correctly on Safari if The user doesn’t have a session already (first Microsoft login).

Apparently the session data are not yet cached when handleRedirectObservable subscription streams for the existence of an Account in MsalGuard

@brunnosantos Can you please clarify what you are referring to? Are you referring to this line in msal-guard? https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/38bb90e4e94a8d89363d6266d91390d33910d2f0/samples/msal-angular-v2-samples/angular10-browser-sample/src/app/msal/msal.guard.ts#L63

I’m unable to reproduce the behavior you described with the latest version of the sample in Safari.

@mexmirror @jaami01 Please try the latest version of the sample from the dev branch, we made some changes so redirect should work now.

jo-arroyo on Oct 7, 2020

Unfortunately, this is a known issue with using redirect in the Angular sample, and we are currently researching ways to handle this better.

@jo-arroyo , is there any workaround available for this in angular ?

jaami01 on Oct 7, 2020

@jo-arroyo Is there some place where those of us who want to track the progress of the Angular 10 wrapper for MSAL can see known issues, workarounds, and limitations? Most of the documentation I’ve seen out there is Angular 6-9 and I spent some time trying to get the current Angular 10 sample to work without any success.

jkewley on Sep 14, 2020