useMsalAuthentication hook is not working after upgrading to msal-react 1.5.1

[salman90]

Core Library

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

Core Library Version

2.32.1

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.5.1

Public or Confidential Client?

Public

Description

We are facing an issue with the useMsalAuthentication hook when upgrading to msal-react 1.5.1 in the following PR. We are not receiving any response (accessToken, error) from the hook if we wrap our components with React.StrictMode. I believe it is related to an update we made in msal-react 1.5.0. If we remove the strict mode or downgrade to msal-react 1.4.10 the application works as expected.

Error Message

No error message.

Msal Logs

[Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-browser@2.32.1 : Info - Emitting event: msal:initializeStart
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-browser@2.32.1 : Info - Emitting event: msal:initializeEnd
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-browser@2.32.1 : Info - initialize has already been called, exiting early.
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-browser@2.32.1 : Info - Emitting event: msal:handleRedirectStart
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : [3abf3b22-d2c0-4832-b960-ac399ba94351] : msal.js.browser@2.32.1 : Info - handleRedirectPromise called but there is no interaction in progress, returning null.
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-browser@2.32.1 : Info - Emitting event: msal:handleRedirectEnd
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-react@1.5.1 : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-react@1.5.1 : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-react@1.5.1 : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-react@1.5.1 : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-react@1.5.1 : Info - useMsalAuthentication - User is authenticated, attempting to acquire token
authConfig.js:40 [Thu, 08 Dec 2022 19:11:11 GMT] : @azure/msal-browser@2.32.1 : Info - Emitting event: msal:acquireTokenStart
authConfig.js:40 [Thu, 08 Dec 2022 19:11:12 GMT] : @azure/msal-browser@2.32.1 : Info - Emitting event: msal:acquireTokenSuccess

MSAL Configuration

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        clientCapabilities: ['CP1'], // this lets the resource owner know that this client is capable of handling claims challenge.
    },
    cache: {
        cacheLocation: 'localStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        /**
         * Below you can configure MSAL.js logs. For more information, visit:
         * https://docs.microsoft.com/azure/active-directory/develop/msal-logging-js
         */
        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;
                }
            },
        },
    },
};

Relevant Code Snippets

export const Profile = () => {
    const { instance } = useMsal();
    const account = instance.getActiveAccount();
    const [graphData, setGraphData] = useState(null);
    const request = {
        scopes: protectedResources.graphMe.scopes,
        account: account,
    };

    const { login, result, error } = useMsalAuthentication(InteractionType.Popup, {
        ...request,
        redirectUri: '/redirect.html',
    });
    useEffect(() => {
        if (!!graphData) {
            return;
        }

        if (!!error) {
            // in case popup is blocked, use redirect instead
            if (error.errorCode === 'popup_window_error' || error.errorCode === 'empty_window_error') {
                login(InteractionType.Redirect, request);
            }

            console.log(error);
            return;
        }

        if (result) {
           let accessToken = result.accessToken;
            getGraphClient(accessToken)
                .api('/me')
                .responseType(ResponseType.RAW)
                .get()
        }
    }, [graphData, result, error, login]);

    if (error) {
        return <div>Error: {error.message}</div>;
    }
    return <>{graphData ? <ProfileData response={result} graphData={graphData} /> : null}</>;
};

Reproduction Steps

1. Clone https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial.git
2. cd 2-Authorization-I\1-call-graph\SPA.
3. Checkout branch update-msal-packages.
4. Configure application.
5. sign-in and navigate to profile page.

Expected Behavior

Expect the result (accessToken) or an error from the useMsalAuthentication hook.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

@azure/msal-react 1.4.10

Source

Internal (Microsoft)

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @jo-arroyo please follow up.

[tnorling]

Thanks for raising this. I've determined this is due to a change to StrictMode in React 18, specifically in development mode. What's happening is that React is mounting, unmounting then remounting the component but instead of starting with a clean slate on each mount it is preserving state and refs which results in the finalizer for the token acquisition thinking the component is not mounted and not setting state.

More discussion in this issue in the React repo.

This could be resolved by resetting the value of the ref we use to track whether or not the component is mounted in a useEffect, though it's not clear to me yet if that would cause any unintended consequences or if this is even something we should be responsible for. For now the workarounds seem to be:

1. Don't use StrictMode until the React team addresses this gap
2. Serve the app in production mode which does not perform the new behavior
3. Downgrade to React 17

I'll mark this as a bug but I'm not committing to fixing it on our end quite yet.