microsoft-authentication-library-for-js: popup flow broken in full-screen macOS

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.26.0

Wrapper Library

Not Applicable

Wrapper Library Version

None

Description

It seems that using the loginPopup function does not work properly on full-screen mode on macOS. The popup never get closed and the flow fails silently. When the browser is not in full-screen mode, it always works as expected.

This issue has already been reported in #4839 but even with the library version 2.26.0, it’s still not working. We also tried to follow those instructions but without success.

This example also fails in the same way.

Error Message

We don’t get any error neither in the parent window nor the popup.

Msal Logs

Navigated to https://login.live.com/oauth20_authorize.srf?client_id=bbeb7747-ff22-4d91-b4d1-5847e7986bf4&scope=User.Read+email+profile+openid+offline_access&redirect_uri=https%3A%2F%2Fadmin.getcontrast.dev&response_type=code&state=eyJpZCI6IjNkOGJjNWY3LTY0ODQtNGJlNi04ZDkwLTRlOTE4MTM5NmQ0ZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicG9wdXAifX0%3D&response_mode=fragment&nonce=ea4795fd-61eb-414b-a359-d8797cf6ca74&code_challenge=HFjlKBs7AmsVWArHURPcLy7_h8kqv2hK903oVH1-4aw&code_challenge_method=S256&x-client-SKU=msal.js.browser&x-client-Ver=2.26.0&uaid=3dc3690e4b194502b9c13592b9c43424&msproxy=1&issuer=mso&tenant=common&ui_locales=fr-FR&client_info=1&epct=AQABAAAAAAD--DLA3VO7QrddgJg7WevrprbipdRja0-Eq_g8YusVTfzTyimTvpxSMoW2-CWXSL24udMbi7Mf6u_TWzCXQ1gTfvZuGOoQbDjWI1SGJI3KRmn2Q6u0CECf1cy9iuKzql5cOJI75-LL7Qbwnn1R2nWDefsP29mr-FKqFZcgzOJdUD4myTGfCbp6H1n-Z2UeKani_mArk6IIhJjDDSXMcx5oWCKDGDTyFN-mqWvyPV96LyAA&jshs=0&username=xxxxxxx%40outlook.com&login_hint=xxxxxxx%40outlook.com Navigated to https://login.live.com/ppsecure/post.srf?client_id=bbeb7747-ff22-4d91-b4d1-5847e7986bf4&scope=User.Read+email+profile+openid+offline_access&redirect_uri=https%3A%2F%2Fadmin.getcontrast.dev&response_type=code&state=eyJpZCI6IjNkOGJjNWY3LTY0ODQtNGJlNi04ZDkwLTRlOTE4MTM5NmQ0ZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicG9wdXAifX0%3D&response_mode=fragment&nonce=ea4795fd-61eb-414b-a359-d8797cf6ca74&code_challenge=HFjlKBs7AmsVWArHURPcLy7_h8kqv2hK903oVH1-4aw&code_challenge_method=S256&x-client-SKU=msal.js.browser&x-client-Ver=2.26.0&msproxy=1&issuer=mso&tenant=common&ui_locales=fr-FR&client_info=1&epct=AQABAAAAAAD--DLA3VO7QrddgJg7WevrprbipdRja0-Eq_g8YusVTfzTyimTvpxSMoW2-CWXSL24udMbi7Mf6u_TWzCXQ1gTfvZuGOoQbDjWI1SGJI3KRmn2Q6u0CECf1cy9iuKzql5cOJI75-LL7Qbwnn1R2nWDefsP29mr-FKqFZcgzOJdUD4myTGfCbp6H1n-Z2UeKani_mArk6IIhJjDDSXMcx5oWCKDGDTyFN-mqWvyPV96LyAA&jshs=0&username=xxxxxxx%40outlook.com&login_hint=xxxxxxx%40outlook.com&contextid=A224BC714EFD7E88&bk=1655913753&uaid=3dc3690e4b194502b9c13592b9c43424&pid=15216 Navigated to https://example.com

MSAL Configuration

const msalConfig = {
  auth: {
    clientId: 'bbeb7747-ff22-4d91-b4d1-5847e7986bf4',
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: 'https://example.com',
  },
};

Relevant Code Snippets

const loginRequest = {
  scopes: ['User.Read', 'email', 'profile', 'openid'],
};

const msalInstance = new PublicClientApplication(msalConfig);
const loginResponse = await msalInstance.loginPopup(loginRequest);
msalInstance.setActiveAccount(loginResponse.account);
const tokenResponse = await msalInstance.acquireTokenSilent(loginRequest);

Reproduction Steps

Open the application in full-screen browser
Click the Sign in button
After being redirected to new tab, log in into Microsoft and accept the permission requested by the app

Expected Behavior

After the authentication, the popup is closed and the control is yield back to the parent window.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari

Regression

No response

Source

External (Customer)

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 8
Comments: 43 (7 by maintainers)

Most upvoted comments

@Cambencoil Hey,

You need to create:

blank.html, this should be just empty html file
Add redirectUri to this blank.html file

const msal = new PublicClientApplication({
  auth: {
    clientId: 'id',
    authority: 'authority',
    redirectUri: '/blank.html',
    postLogoutRedirectUri: '/'
  }
})

DOCS

It works for me for the VUE project.

KosKosovuch on Jan 7, 2023

@yoLotus Sorry for the wait. We are investigating this issue on our end and will get back with a resolution . We are able to reproduce this issue on Mac in full screen - Safari and Chrome. It seems that the hash is lost in redirection, which is leading to the error listed above. Checking with the team for potential solution, thanks so much for your patience

bmahall on Aug 26, 2022

@yoLotus I am currently looking into this , thanks for your patience!

bmahall on Jun 27, 2022

@Prasun-Acharjee create blank.html and put redirectUri: ‘/blank.html’. this is given in documentation. https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#redirecturi-considerations

Pro-v-7 on Jul 12, 2023

Thanks @KosKosovuch ! it did fix the issue on our side 👏🏽

jorge-d on Jan 6, 2023

Hey,

i still have the issue : popup flow broken in full-screen macOS it’s been 3 months. Does anyone could help me?

Cambencoil on Jan 4, 2023

@jo-arroyo Looks like this is duplicate of #5123, can we close one of them?

jasonnutter on Aug 25, 2022