Angular MSAL Redirect to Microsoft Login after Logout

Question

I am currently starting with Angular and MSAL and I cannot figure out how to achieve the following:

1. When the user access the WebApp, the Microsoft Login should appear (via Azure AD)
2. After successful authentication, the webapp appears
3. When the user clicks on Logout, the user should be logged out
4. After the Logout, he should go back to step 1., so he should see the Microsoft Login again

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

    MsalModule.forRoot({
      auth: {
        clientId: '...', // This is your client ID
        authority: '...',
        // redirectUri: 'https://localhost:5001',
        postLogoutRedirectUri: '**<--THIS MAYBE? BUT WHAT URL DO I PUT HERE TO COME BACK TO THE MICROSOFT LOGIN PAGE??**'
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    }, {
      popUp: false,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        // ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],...

And here is my app-routing.module.ts:

const routes: Routes = [
  {
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
  }
];

The issue with the solution that I have now is: When I logout it will go to the WebApp again and then redirect to the MS login page. But I want him to go directly to the MS login page, so that the user does not see anything of the webapp anymore (after logout).

What I really need to prevent is, that the user can see anything of the webapp if he is not logged in. So I do not want to redirect him to a component (because then he sees the content again).

Answer 1

I am fighting with same problem. What you have to do is make one page not guarded by MsalGuard and after logout redirect to this page. You must define whole url like 'http://localhost:4200/logout-page'. When you log out, you will be redirected to MS page where you can logout your account and then you will be redirected to your unguarded logout-page. Other guarded pages will redirect you immediately to MS Login page again.

MsalModule.forRoot({
  auth: {
    clientId: '...', // This is your client ID
    authority: '...',
    // redirectUri: 'https://localhost:5001',
    postLogoutRedirectUri: window.location.protocol + '//' + window.location.host + '/logout-page'
  },
... rest of your configuration
}

... and this is your new routing...

const routes: Routes = [
{
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
}, {
    path: 'lougout-page',
    component: LogoutPageComponent // This is your new component
}
];

Actually, you should make your home page unguarded and after logout you should redirect to it. But you will lost automatic redirect to login when app is loaded. But it should be covered by simple Guard, where you will check MsalService accounts and depends on result you should redirect or not.

Answer 2

You have to call the logout method (of the MsalService of '@azure/msal-angular') through a component or service. Please refer to the code below.

 import { MsalService } from '@azure/msal-angular'; constructor( private msalService: MsalService ) { } onLogout(){ this.msalService.logout(); }

Answer 3

In your app.component.ts, add a function that checks whether or not you have a logged-in user - something like this:

get authenticated(): boolean {
   return this.msalService.instance.getActiveAccount() ? true : false;
}

Then, in your onInit function, check the authenticated status and call MSAL login if it's false - a user will be redirected to log in, both initially and on logout as returning to your app will trigger login flow again.

ngOnInit() {    
   if (!this.authenticated) {
      this.msalService.instance.loginRedirect();
   }
}

Answer 4

Some others touched on some points, but I'd like to add my case. OP says they don't want to redirect within their own web app, and you really don't have to, but I think it is a good practice. If only inform the user they are being signed out as it may take a couple of seconds for the user to actually be logged out.

So if you really want some immediate feedback to go to azure's login page again (without waiting for a success from the logout endpoint), I would suggest something like:

this.msalService.logout();
this.msalService.instance.loginRedirect();

That will handle a logout but will also pop them directly to the login page. However, there may be some funky issues, especially if there happens to be an error on logging out so please be sure to test thoroughly.

Edit: I haven't personally tested this because I do redirect to a logout component, but it seems feasible unless there is something quirky here.