Redirecting to Microsoft account selection after logout, how to skip Microsoft account popup and directly redirect to login or logout ?

Question

I'm currently facing an issue with the logout functionality in my web application. After clicking on the logout button, instead of immediately redirecting to the logout page, I'm being redirected to a Microsoft popup that asks which account to logout. However, I would like to skip this step and have the application directly redirect to the logout page.

I'm currently facing an issue with the logout functionality in my web application. After clicking on the logout button, instead of immediately redirecting to the logout page, I'm being redirected to a Microsoft popup that asks which account to logout. However, I would like to skip this step and have the application directly redirect to the logout page.

I'm currently facing an issue with the logout functionality in my web application. After clicking on the logout button, instead of immediately redirecting to the logout page, I'm being redirected to a Microsoft popup that asks which account to logout. However, I would like to skip this step and have the application directly redirect to the logout page.

After user clicking logout, it is redirecting to Microsoft page , for single user there is no use to show which page to select as I showed in above image, how can I resolve this issue by not redirecting to Microsoft page ?

This is what I have in my app.module.ts:

MsalModule.forRoot(new PublicClientApplication({
      auth: {
        clientId: environment.clientId, // This is your client ID
        authority: environment.authority, // This is your tenant ID
        redirectUri: environment.redirectUri,// This is your redirect URI,
        postLogoutRedirectUri: environment.logoutURL
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE,
      }
    }), {
      interactionType: InteractionType.Redirect,
      authRequest: {
        scopes: ['user.read']
        }
    }, {
      interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
      protectedResourceMap: new Map([ 
          ['https://graph.microsoft.com/v1.0/me', ['user.read']],
          [environment.apiBaseUrl, [environment.apiScope]],
      ])
    }),

Here is my logout function:

this.authService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200/'
    });
    this.router.navigateByUrl('/sign-in');
}

Answer 1

Hi @Sowmiya V ,

Thanks for reaching out.

To skip the account selection page and directly redirect to the logout page, you can specify the account to log out in the logout request. This can be done by passing the account parameter in the logout Popup or logoutRedirect method.

Here is an example of how to use the logoutPopup method with the account parameter:

const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  postLogoutRedirectUri: "your_app_logout_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

In this example, homeAccountId is the home account ID of the user to log out. You can obtain this ID from the AccountInfo object returned by the getAccount or getAllAccounts method.

By specifying the account to log out, the user will not be prompted to select an account on the Microsoft page and will be directly redirected to the logout page.

Reference : https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=javascript2#sign-out-with-a-pop-up-window

Hope this will help.

Thanks,

Shweta

---

Please remember to "Accept Answer" if answer helped you.