react-18 sample not rerendering in firefox after successfull signing using popup

Core Library

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

Core Library Version

2.23.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.3.2

Description

The msal-react sample for react-18 is not re-rendering the homepage after a successful sign-in via popup in firefox. The login is successful because after F5’ing, the homepage does login the rendered view. I can only reproduce this in firefox, in edge and chromium the homepage is rerendered after a successful sign-in. The issue only occurs when signing in via Popup, sign-in via redirect does re-render the homepage in firefox.

Error Message

None

Msal Logs

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools [react-dom.development.js:29742](http://localhost:3000/home/fvdnabee/GIT/microsoft-authentication-library-for-js/samples/msal-react-samples/react-18-sample/node_modules/react-dom/cjs/react-dom.development.js)
[Thu, 28 Apr 2022 07:57:01 GMT] : @azure/msal-browser@2.23.0 : Info - Emitting event: msal:handleRedirectStart [authConfig.js:37](http://localhost:3000/home/fvdnabee/GIT/microsoft-authentication-library-for-js/samples/msal-react-samples/react-18-sample/src/authConfig.js)
[Thu, 28 Apr 2022 07:57:01 GMT] : [742c5e69-1e2b-49ba-91d8-e2bac8cbc1dc] : msal.js.browser@2.23.0 : Info - handleRedirectPromise called but there is no interaction in progress, returning null. authConfig.js:37
[Thu, 28 Apr 2022 07:57:01 GMT] : @azure/msal-react@1.3.2 : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect [authConfig.js:37](http://localhost:3000/home/fvdnabee/GIT/microsoft-authentication-library-for-js/samples/msal-react-samples/react-18-sample/src/authConfig.js)
[Thu, 28 Apr 2022 07:57:01 GMT] : @azure/msal-react@1.3.2 : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect authConfig.js:37
[Thu, 28 Apr 2022 07:57:01 GMT] : @azure/msal-browser@2.23.0 : Info - Emitting event: msal:handleRedirectEnd [authConfig.js:37](http://localhost:3000/home/fvdnabee/GIT/microsoft-authentication-library-for-js/samples/msal-react-samples/react-18-sample/src/authConfig.js)
[Thu, 28 Apr 2022 07:57:01 GMT] : @azure/msal-react@1.3.2 : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none 2 authConfig.js:37
[Thu, 28 Apr 2022 07:57:06 GMT] : @azure/msal-browser@2.23.0 : Info - Emitting event: msal:loginStart [authConfig.js:37](http://localhost:3000/home/fvdnabee/GIT/microsoft-authentication-library-for-js/samples/msal-react-samples/react-18-sample/src/authConfig.js)
Some cookies are misusing the recommended “SameSite“ attribute 15
[Thu, 28 Apr 2022 07:57:06 GMT] : @azure/msal-browser@2.23.0 : Info - Emitting event: msal:popupOpened authConfig.js:37
[Thu, 28 Apr 2022 07:57:06 GMT] : [f821a13c-0bc6-447a-9a27-41965eaa9469] : @azure/msal-common@6.2.0 : Info - in acquireToken call [authConfig.js:37](http://localhost:3000/home/fvdnabee/GIT/microsoft-authentication-library-for-js/samples/msal-react-samples/react-18-sample/src/authConfig.js)
[Thu, 28 Apr 2022 07:57:07 GMT] : @azure/msal-browser@2.23.0 : Info - Emitting event: msal:loginSuccess authConfig.js:37

MSAL Configuration

export const msalConfig = {
    auth: {
        clientId: "753315ad-REDACTED",
        authority: "https://login.microsoftonline.com/556e6b1f-REDACTED",
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: isIE || isEdge || isFirefox
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {	
                    return;	
                }
                switch (level) {	
                    case LogLevel.Error:	
                        console.error(message);	
                        return;	
                    case LogLevel.Info:	
                        console.info(message);	
                        return;	
                    case LogLevel.Verbose:	
                        console.debug(message);	
                        return;	
                    case LogLevel.Warning:	
                        console.warn(message);	
                        return;	
                    default:
                        return;
                }
            }
        }
    }
};

Relevant Code Snippets

Official sample is here: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-18-sample/

Reproduction Steps

1. Open react-18-sample in firefox, I’m running firefox 99.0.1-1
2. Click sign in using popup
3. Provide valid credentials, the popup closes
4. The homepage does not re-render with the authenticated view

Expected Behavior

The homepage should re-render displaying the authenticated view, manually reloading the page should not be necessary.

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Firefox

Regression

No response

Source

External (Customer)

[tnorling]

@fvdnabee For some reason the moment the popup is opened the whole UI freezes and nothing is clickable anymore. It’s not clear to me what is causing this yet but I have found a way to fix it. Setting the asyncPopups flag to true on the PublicClientApplication config seems to resolve the issue for me, can you try that and let me know if that works for you as well? In the meantime I’ll continue to investigate why this is happening with the default setting.

[himadrinath]

looks like problem has been fixed in react@latest release