Angular app logoutRedirect not redirecting

Question

I am trying to implement a logout redirect feature in my Angular app but it is not working as expected. I have added the redirect URL "http://localhost:4200" in the postLogoutRedirectUri, but it is not redirecting upon logout. Here's the code:

constructor(private authService: MsalService) {}

@Input() icon?: string;

logout() {
  this.authService.logoutRedirect({
    postLogoutRedirectUri: "http://localhost:4200"
  });
}

I have set the redirectUri and the PostLogoutRedirectUri in my auth {} parameter i to http://localhost:4200 and the redirect is not working. I am getting "You have signed out of your account" message only, but it will not redirect to localhost:4200. I am using a virtual machine btw, could this be the issue?

Can someone help me figure out why the redirect is not working properly?

Answer 1

Hi @Roel Camp we're sorry to hear you're facing this issue.

Based on the code snippet you provided, it looks like you are using the Microsoft Authentication Library (MSAL) for Angular to implement logout redirect feature in your Angular app, but the redirect is not working as expected.

Yes, this could be because you're using a VM. Can you please share the Azure doc you followed to set up your logout redirect feature? In the meantime, here are a few things you can do to troubleshoot the issue:

• Check if the postLogoutRedirectUri parameter is set correctly in your Azure AD app registration. You can do this by navigating to your app registration in the Azure portal, selecting "Authentication" from the left-hand menu, and verifying that the "Logout URL" field is set to "[http://localhost:4200]".The redirectUri needs to match exactly between your Azure AD app registration and MSAL configuration. Make sure "[http://localhost:4200] is configured in both places.
• On a VM, localhost refers to the VM itself, not your host machine. Update the redirect URI to use the actual VM IP address or hostname instead.
• The redirectURI in MSAL also needs to be publicly reachable by Azure AD, so localhost on a VM will not work. Configure your VM to expose port 4200 publicly and use that URL.

Please let us know if you have further questions.

-Grace