MSAL Logout Issue with MsalAuthenticationTemplate: Stuck on Loading After Account Selection Cancelled

[srinivasii]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

2.38.4

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.5.0

Public or Confidential Client?

Public

Description

Issue Summary: When using MsalAuthenticationTemplate in my application, after a successful login, the user is prompted to choose the account to log out. However, if the user clicks the "Back" button a few times instead of selecting an account, the MsalAuthenticationTemplate gets stuck in the loading state, and the logout process does not complete.

Steps to Reproduce:

Log in using MSAL with MsalAuthenticationTemplate.
Click on the logout button to initiate the logout process.
When prompted to choose the account, click the "Back" button a few times instead of selecting an account.
Observe the behavior:
The MsalAuthenticationTemplate enters a loading state.
The logout process does not complete, and the user is unable to proceed.
Expected Behavior:

After clicking the "Back" button, the application should return to its previous state without being stuck in the loading state.
The user should be able to proceed with logging out or the session should reset appropriately.
Actual Behavior:

After clicking the "Back" button multiple times, the MsalAuthenticationTemplate gets stuck in a loading state.
The logout process is never completed, and the user cannot continue using the app until the page is refreshed.
Additional Information:

I am using MSAL version [add version] along with MsalAuthenticationTemplate.
The issue appears when navigating back during the account selection process for logout.
Environment: [mention relevant platform or browser details, if applicable].
Please let me know if further details are required. Thank you for investigating this issue!

Error Message

No response

MSAL Logs

[Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useAccount - Updating account
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - initialize has already been called, exiting early.
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useAccount - Updating account
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - initialize has already been called, exiting early.
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [01937769-bfcf-7195-a3b1-0a687488eceb] : [email protected] : Info - handleRedirectPromise did not detect a response as a result of a redirect. Cleaning temporary cache.
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useMsalAuthentication - No user is authenticated, attempting to login
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:loginStart results in setting inProgress from none to login
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:loginStart results in setting inProgress from none to login
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useAccount - Updating account
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useAccount - Updating account
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useAccount - Updating account
msalConfig.ts:29 [Fri, 29 Nov 2024 10:13:59 GMT] : [] : @azure/[email protected] : Info - useAccount - Updating account

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export const msalConfig: Configuration = {
  auth: {
    clientId: config.clientId ?? '',
    authority: `https://login.microsoftonline.com/${config.tenantId}`,
    redirectUri: config.redirect_url,
    postLogoutRedirectUri: config.redirect_url, // Redirect URI after logout
  },
  cache: {
    cacheLocation: 'localStorage', // or "localStorage" for persistence across tabs
  },
  system: {
    allowNativeBroker: false, // Disables WAM Broker (Windows Authentication Manager)
    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 msalConfig: Configuration = {
  auth: {
    clientId: config.clientId ?? '',
    authority: `https://login.microsoftonline.com/${config.tenantId}`,
    redirectUri: config.redirect_url,
    postLogoutRedirectUri: config.redirect_url, // Redirect URI after logout
  },
  cache: {
    cacheLocation: 'localStorage', // or "localStorage" for persistence across tabs
  },
  system: {
    allowNativeBroker: false, // Disables WAM Broker (Windows Authentication Manager)
    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;
        }
      }
    }
  },
  
};

Reproduction Steps

1. Log in using MSAL with MsalAuthenticationTemplate.
2. Click on the logout button to initiate the logout process.
3. When prompted to choose the account, click the "Back" button a few times instead of selecting an account.
4. Observe the behavior:
5. The MsalAuthenticationTemplate enters a loading state.
6. The logout process does not complete, and the user is unable to proceed.

Actual Behavior:

After clicking the "Back" button multiple times, the MsalAuthenticationTemplate gets stuck in a loading state.
The logout process is never completed, and the user cannot continue using the app until the page is refreshed.

Expected Behavior

After clicking the "Back" button, the application should return to its previous state without being stuck in the loading state.
The user should be able to proceed with logging out or the session should reset appropriately.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

@azure/msal-browser 2.38.4"