Continuous looping from MSAL handleRedirectStart - Returning access token

[billgirten]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.6.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.8

Public or Confidential Client?

Public

Description

Intermittently, users to the www.buysportscards.com are witnessing what appears to be a looping web page. After careful examination of the MSAL logs, it appears that MSAL is infinitely firing an event to handle an access token returned by Microsoft.

This causes our web application to react to the handler, causing the state to change, forcing the page to re-render.

Error Message

No errors are encountered.

MSAL Logs

[Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:initializeStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:initializeEnd
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-browser@3.11.1 : Info - initialize has already been called, exiting early.
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:handleRedirectStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [01909eae-9fbe-7e2b-a9a3-e2760d35c891] : msal.js.browser@3.11.1 : Info - handleRedirectPromise called but there is no interaction in progress, returning null.
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:handleRedirectEnd
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-react@2.0.14 : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:02 GMT] : [] : @azure/msal-react@2.0.14 : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:12 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:initializeStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:12 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:initializeEnd
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:12 GMT] : [] : @azure/msal-browser@3.11.1 : Info - initialize has already been called, exiting early.
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:12 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:handleRedirectStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-react@2.0.14 : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - BrowserCacheManager: addTokenKey - idToken added to map
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - BrowserCacheManager: addTokenKey - accessToken added to map
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - BrowserCacheManager: addTokenKey - refreshToken added to map
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:loginSuccess
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:handleRedirectEnd
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-react@2.0.14 : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:13 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:20 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:20 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:20 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:20 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:20 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:20 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:21 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:22 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:23 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:32 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:32 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess
2main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenStart
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getAccessToken - Returning access token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-common@14.8.1 : Info - CacheManager:getIdToken - Returning ID token
main.5a9f4e0e.js:2 [Wed, 10 Jul 2024 22:06:33 GMT] : [] : @azure/msal-browser@3.11.1 : Info - Emitting event: msal:acquireTokenSuccess

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export const msalConfig: Configuration = {
    auth: {
        clientId: process.env.REACT_APP_CLIENT_ID || '', // This is the ONLY mandatory field that you need to supply.
        authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose SUSI as your default authority.
        knownAuthorities: [b2cPolicies.authorityDomain || ''], // Mark your B2C tenant's domain as trusted.
        redirectUri: process.env.REACT_APP_REDIRECT_URI, // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
        postLogoutRedirectUri: process.env.REACT_APP_POST_LOGOUT_REDIRECT_URI, // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    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: {},
};

Relevant Code Snippets

useEffect(() => {
        const account = instance.getActiveAccount();
        if (account !== null) {
            const tokenRequest: SilentRequest = {
                account: account as AccountInfo | undefined,
                scopes: AUTH_REQUESTS.LOGIN.scopes,
            };
            instance
                .acquireTokenSilent(tokenRequest)
                .then(async response => {
                    if (response.accessToken) {
                        const apiConfig: Configuration = {...apiAuthConfig, accessToken: response.accessToken};
                        sellersLockerSearchApi = new SellersLockerSearchApi(apiConfig);
                    }
                })
                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                .catch(error => {
                    addToast({
                        severity: 'error',
                        message: 'User must be Signed In.',
                        contextKey: 'Authentication',
                    });
                    setTimeout(() => {
                        authFunc.logout();
                    }, 5000);
                });
        }
    }, [instance]);

Reproduction Steps

1. User Sign-In to www.buysportscards.com
2. User navigates to Inventory page
3. Snippet above executes and periodically goes into an endless loop - every second MS returns access token.

Expected Behavior

Access token should be returned upon request.

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari

Regression

No response

Source

External (Customer)

[Tijmene]

I am experiencing a similar issue!

[tnorling]

This causes our web application to react to the handler, causing the state to change, forcing the page to re-render.

This sounds like this is the cause of your loop rather than the result. If your whole page is re-rendering that will cause your useEffect hook to run again which will invoke acquireTokenSilent again and that will emit the event again.

Can you provide more context around what your event handler is doing and why? You likely should not be re-rendering the entire page based on a token call succeeding.

@Tijmene I would suggest opening your own issue with more details so we can focus on your specific usage

[billgirten]

tnorling,

The problem is that this effect is intermittent - not consistent.

Here is the useEffect hook that is inside of the AuthContext:

` useEffect(() => {
const eventCallbackId = instance.addEventCallback(async event => {
if (event.eventType === EventType.LOGIN_START) {
console.log('msal helper >>> LOGIN_START');
dispatch({type: reducerActions.SET_LOGIN_INPROGRESS});
}
if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
console.log('msal helper >>> LOGIN_SUCCESS');
const payload = event.payload as AuthenticationResult;
const accessToken = payload.accessToken;
const account = payload.account;
instance.setActiveAccount(account);
dispatch({
type: reducerActions.SET_ACCESS_TOKEN_AND_ACCOUNT,
payload: {accessToken, account},
});
}
if (event.eventType === EventType.LOGIN_FAILURE) {
console.log('msal helper >>> LOGIN_FAILURE');
}

        if (event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS) {
            console.log('msal helper >>> ACQUIRE_TOKEN_SUCCESS');
            const payload = event.payload as AuthenticationResult;
            const accessToken = payload.accessToken;
            if (localStorage.getItem('accessToken') !== accessToken) {
                localStorage.setItem('accessToken', accessToken);
                dispatch({
                    type: reducerActions.SET_ACCESS_TOKEN,
                    payload: {accessToken},
                });
            }
        }

        if (event.eventType === EventType.ACQUIRE_TOKEN_FAILURE) {
            console.log('msal helper >>> ACQUIRE_TOKEN_FAILURE');
        }
    });

    return () => {
        if (eventCallbackId) {
            instance.removeEventCallback(eventCallbackId);
        }
    };
}, [instance]);`

[tnorling]

You do not need to and should not store the access token yourself in localstorage. MSAL.js handles caching tokens for you and you should invoke acquireTokenSilent each time you need to use the token, if it's cached and valid it will be returned from the cache.

[billgirten]

Thank you, Thomas.