microsoft-authentication-library-for-js: Login popup not working on mobile
Library
-
msal@1.x.xor@azure/msal@1.x.x -
@azure/msal-browser@2.3.1 -
@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
- React 16.13.1
- Other
Description
The calling the logging popup opens a new window, starts the logging process, and then stays on the new window and nothing hppens. On desktop/laptop it works fine.
Error Message
no error message
MSAL Configuration
import * as msal from '@azure/msal-browser'
const msalConfig = {
auth: {
clientId: process.env.REACT_APP_MICROSOFT_CLIENT_ID,
redirectUri: window.location.origin,
},
}
const msalInstance = new msal.PublicClientApplication(msalConfig)
// inside async function
const response = await msalInstance.loginPopup({ scopes: [] })
console.log(response) // <-- this never gets called on mobile
Reproduction steps
Stated above
Expected behavior
Calling msalInstance.loginPopup should return info about the user and continue the execution flow
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? no
Security
- Is this issue security related?
- No
Source
- Internal (Microsoft)
- Customer request
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 17 (4 by maintainers)
@Gameboy98 did you find the solution? i am also facing issue while login to my app using mobile browser. I cant even see the redirection to microsoft login page while using chome without incognito in mobile browser. For desktop browser everything works fine
@egbertn I confirm that is working, with redirect instead of popups.
Code example: https://github.com/clemlesne/private-gpt/commit/87be7258bec070e4fffec80d45cf8c4ea6bd8bf3.
At the end, it for now only can work with redirect login. The popup really does too much which not all browsers allow especially on the Mobile. My collegue finally got it working.
Still no solution? Has anyone managed to sort this out?
Indeed. Problematic
Still an issue
Still facing this issue, Please Refer This: const { instance } = useMsal(); instance .loginPopup(loginRequest) .then((res) => { localStorage.setItem(‘msToken’, JSON.stringify(res)) callMsGraph(res.accessToken).then((response) => { handleLogin(employee_code); }); // <-- This never gets called on Mobile Devices }) .catch((e) => { console.log(e); });
Here’s a screencap video
https://user-images.githubusercontent.com/6963212/109619452-76bb2900-7b41-11eb-9fed-04cc0d7b33de.mp4