Login popup not working on mobile Edge

jkytomak commented 3 months ago

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.17.0

Wrapper Library

Not Applicable

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

Mobile Edge browser ends on redirectUrl page after logging with popup. All other browser work fine (for example Edge on desktop and Chrome on mobile).

Error Message

user_cancelled: User cancelled the flow and invalid_client: Authentication failed

MSAL Logs

I was not able to get trace logs from mobile Edge, but you can try the issue by yourself: https://my.humbol.app

Here is console log (about:inspect) from mobile Edge:

https://my.humbol.app/login?page=%2F

LOG2024-07-31T18:07:09.140Z INFO: Started new session ({"environment":"production","sessionId":"528bceb856a0a3925b34a3833f953348d567fd1e","serverVersion":"v2024.7.31-2"})
LOG2024-07-31T18:07:11.230Z INFO: Failed to sign in with Microsoft ("BrowserAuthError: user_cancelled: User cancelled the flow.")

https://my.humbol.app/login/ms-redirect#error=invalid_client&error_description=AADSTS50012%3a+Authentication+failed.+Trace+ID%3a+769b89c3-269d-47b8-a497-270f09a22700+Correlation+ID%3a+019109f9-79ec-752f-bdf6-429df94e2d6f+Timestamp%3a+2024-07-31+18%3a07%3a14Z&error_uri=https%3a%2f%2flogin.microsoftonline.com%2ferror%3fcode%3d50012&state=eyJpZCI6IjAxOTEwOWY5LTdhMTUtNzAxMS04MGYyLTI5MDFmZjZkYmRlZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicG9wdXAifX0%3d

LOG2024-07-31T18:07:14.439Z INFO: Get new client token
LOG2024-07-31T18:07:14.499Z INFO: Started new session ({"environment":"production","sessionId":"8c4765ea19d38ae8042e4599afbd055d5e3bcae4","serverVersion":"v2024.7.31-2"})

Network Trace (Preferrably Fiddler)

[ ] Sent
[ ] Pending

MSAL Configuration

{
  auth: { clientId: 'd29e5778-18e9-4dae-9ecf-078d0168fe86' },
  cache: {
      cacheLocation: 'localStorage'
  }
}

Relevant Code Snippets

publicClientApplication.loginPopup({
scopes:  ['User.read'],
prompt: 'select_account',
redirectUri: '/login/ms-redirect',
}

Reproduction Steps

Go to https://my.humbol.app with mobile Edge Click "Sign in with Microsoft" Try to login with any MS account. End up on ms-redirect page open and original login page saying that login failed.

Expected Behavior

Popup is closed and original login page is logged in to app (if valid Humbol user) or saying "Currently only open for invited users" (if not Humbol user).

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Edge

Regression

No response

Source

External (Customer)

lalimasharda commented 3 months ago

Hey @jkytomak the error indicates that the popup was closed by the user or it could be blocked by the browser. When I try to repro the issue, I see a new tab open to enter my credentials. Can you confirm if this tab is opening for you? If not, you need to check if it is being blocked by the browser.

jkytomak commented 3 months ago

@lalimasharda yes, popup opens normally, but after I select / login with some account from popup, it does not close and those errors come to console / api.

tnorling commented 3 months ago

Please see here - popup is not recommended in mobile browsers as support is very limited. What Edge is doing here is "closing" the popup and then re-opening the url in a new tab which causes the original calling page to lose the reference to the frame doing the sign-in. We recommend using redirects for interaction in mobile browsers

AzureAD / microsoft-authentication-library-for-js