Logout does not work with React Application when there are multiple tabs opened

[GopikaRam]

Core Library

MSAL.js (@azure/msal-browser), MSAL Node (@azure/msal-node)

Wrapper Library

MSAL React (@azure/msal-react)

Public or Confidential Client?

Public

Description

We are using the msal-react library to integrate Microsoft Entra into our React application. We're encountering an issue during the logout process. Specifically, when we open two different tabs within the same browser and attempt to log out, the functionality doesn’t work as expected. The logout works fine with a single tab but inconsistently, as sometimes it fails even with just one tab.

MSAL Configuration

export const msalConfig = {
 auth: {
    clientId: window?.ENV?.VITE_APP_CLIENT_ID || import.meta.env.VITE_APP_CLIENT_ID, // This is the ONLY mandatory field that you need to supply.
    authority: window?.ENV?.VITE_APP_AUTHORITY || import.meta.env.VITE_APP_AUTHORITY, // Replace the placeholder with your tenant subdomain
    redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
    postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
    // navigateToLoginRequestUrl: false, // 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
  },
};


export const loginRequest = {
  scopes: ['openid', 'profile'],
};

Logout function :

  const handleLogout = () => {
    const logoutRequest = {
      account: instance.getActiveAccount(),
      postLogoutRedirectUri: window.location.origin,
      onRedirectNavigate: (url) => {
        console.log('Performing final cleanup before redirect...', url);
        localStorage.clear();
        return true;
      },
    };
    instance.logoutRedirect(logoutRequest).catch((error) => {
      console.error('Logout redirect failed', error);
    });
  };

Expected Behavior
User is logged out, session is ended. Log In page is displayed.

Current Behavior
User logs in back after when click on logout button.