Microsoft-authentication-library-for-js: msal-angular fails to login user on mobile browsers

[abannsunny]

[ ] Bug report

Browser:

Chrome for IOS V- 75.0
Chrome for Android v- 75.0
Safari for Ios v-12

Library version

"@azure/msal-angular": "0.1.2"

Current behavior

login with pop up succeeds but authService.getUser() returns null hence user is not logged in. This happens only in the mobile version of chrome and safari. Desktop version works fine.

I am not sure if it is because of difference in behavior in opening pop ups in these browsers.
the pop up is an entirely new tab.

Expected behavior

after login with pop has succeeded authService.getUser() should return the logged in user on mobile version of chrome and safari.

Minimal reproduction of the problem with instructions

in mobile version of chrome or safari
const token = await this.authService.loginPopup();
and then call this.authService.getUser()

[danicomas]

I have the same problem. It should be included, otherwise mobile devices can not validate. Let me know if exist any patch I could use.

[danicomas]

Maybe, to use loginRedirect instead of loginPopup is the best way for mobile devices

[jasonnutter]

Apologies for not responding to this issue. @danicomas did loginRedirect fix the issue?

[ghost]

Hi Team,
Any updates on this bug?

[MGMsystems]

Hi,

I have the same issue in 2 scenarios:

When using chrome on mac in full screen.

Chrome opens a new tab instead of a popup. Because of this the redirect after login doesn't work.

OS: macOs Mojave
Browser: Chrome V 77
Run browser in fullscreen

When using safari on mac (Not full screen)

Safari opens a new tab, asks to login, closes popup but returns user as null. So login doesn't do anything.
OS: macOs Mojave
Browser: Safari V 13

Solution/Workaround

We now use loginRedirect instead of loginPopup.
This solved both the issues.

[danicomas]

Apologies for not responding to this issue. @danicomas did loginRedirect fix the issue?

It is fixed using loginRedirect @jasonnutter

[jasonnutter]

@danicomas Good to know, thanks! We'll investigate this as we work on Angular this quarter.

[abannsunny]

I have been struggling with this for a long time now.

const token = await this.authService.acquireTokenSilent(this.tenantConfig.b2cScopes);

does the b2cScopes look something like
['https://AppName.onmicrosoft.com/access-api/user_impersonation']?

I get a user_login_error|User login is required error. even after I log in with the loginRedirect method.

After loginRedirect() call user successfully logs in. get redirected to the site and the authstate is switched to false and getUser() returns a null.

I am on
* "@azure/msal-angular": "^0.1.4",*

[mohanrajselvam007]

I have same issue in iphone safari/chrome browsers to login. any updates?

[luklew]

I have the exact same issue, I cannot login using Chrome or Safari on iOS. I managed to log in using Safari only when I disabled "Prevent cross-site tracking", but that's not the best solution since most people will have that enabled.

Im using msal-angular 0.1.4.

Any news/solutions on this?

Thanks

[luklew]

@danicomas Good to know, thanks! We'll investigate this as we work on Angular this quarter.

Any updates on this?
Thanks!

[jasonnutter]

@mohanrajselvam007 @luklew We have a new beta of the Angular wrapper, details here: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev-angular-1.0-protectedresources/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md

I've heard a few reports of trouble with mobile browsers, so we'll investigate that now and try to get a solution soon.

Note, that if cross-site tracking is enabled, it is expected that our library will not work properly, as the Implicit Flow relies on third-party cookies. We are working on the next major version of the library, which will use the Auth Code flow, which we expect to mitigate those problems, however, that will not be ready for a little while (and we haven't scheduled for when the Angular will be upgraded to that new version).

[luklew]

@jasonnutter Thanks for your reply! Does the beta version you linked solve the issue, at least for now?

[jasonnutter]

@luklew I haven't done any work for this issue specifically, so potentially not.

[luklew]

@jasonnutter Just as a very rough guide, do you know when it may be ready in the beta at least? It's currently being used in our production software and we're just trying to look at options depending on how long it may take to fix.
Thanks!

[jasonnutter]

@luklew I'll start looking into this issue next week, and can hopefully have a new beta with a fix next week or week after.

[luklew]

@jasonnutter Thanks ! Much appreciated!!
Ill be looking out for the new beta 👍

[jasonnutter]

@luklew @abannsunny I have been unable to reproduce this issue with the new beta. Can you please try it out and let me know if the issue still occurs?

[luklew]

@jasonnutter I tried using the new library . I seem to be able to log in using iOS, but now I am getting issues authenticating with the backend API. The acquireTokenSilent() seems to be failing, and so the auth token doesn't get attached to the API requests.

Do you know a way to fix this?
Thanks

[jasonnutter]

@luklew Could you please open a new issue with details on what you are observing, thanks!

[jasonnutter]

Closing this, as it looks to have been addressed by the new version of MSAL Angular. You can also use loginRedict/acquireTokenRedirect if there are issues specifically with popup.

[sergievskiy-a]

still reproduced on v1.0.0

[jasonnutter]

@sergievskiy-a Can you please open a new issue with details, thanks!