Auth0 redirects me to the login page when I add a logout button to an Angular component

Question

I'm fairly new to auth0. I have an Angular application with several pages that requires authentication. At the moment the user arrives on the home page and is then redirected to an auth0 authentication page to log in. Once the connection is successful, the user is redirected to a /app page. All this works well. However, as soon as I add a button that calls the auth0 logout() function in this app page, the behaviour changes. This time, once the user has logged in, they are redirected to the /app page and then immediately afterwards to the home page. It's as if the user is immediately logged out. However, it seems that the user is not logged out, judging by the isAuthenticated$ variables in auth0.

I'd like the disconnect button to no longer cause this problem. At first I thought that the user was logged out directly and that the two pages, login and app, didn't share the same auth0 session. However, they do use the same service, which is declared separately, and as I said, it seems that the user isn't logged out. This would explain the redirection to the start page but not the fact that the user still seems to be logged in. I'd therefore like to set up an auth0 logout logic on my auth0 app page that doesn't create a bug.

Thank you so much for your help.

Answer 1

Are you specifying the returnTo parameter? Here's what I'm using in one of my examples:

import { Component, Inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { AsyncPipe, DOCUMENT } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-home',
  imports: [AsyncPipe],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {

  constructor(public auth: AuthService, @Inject(DOCUMENT) private doc: Document) {
  }

  login(): void {
    this.auth.loginWithRedirect();
  }

  logout(): void {
    this.auth.logout({
      logoutParams: {
        returnTo: this.doc.location.origin
      }
    });
  }
}

Answer 2

Suppose that your component Login.
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item" *ngIf="loginStatus">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" *ngIf="loginStatus">Aboutus</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" *ngIf="loginStatus">ContactUS</a>
    </li>
    <li class="nav-item">
      <button type="button" class="btn btn-primary" *ngIf="!loginStatus 
(click)="login()">
    Login
  </button>
</li>
<li class="nav-item">
  <button type="button" class="btn btn-danger" *ngIf="loginStatus" (click)="logout()">
       Logout
     </button>
     </li>

Your typeScript File
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { CartserviceService } from '../cartservice.service';   
@Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.css'],
 })
export class HeaderComponent implements OnInit {
   constructor(public cS: CartserviceService, public aS: AuthService) {}
   cartCount;
   loginStatus;
  ngOnInit() {
    this.cS.cartCount.subscribe((c) => {
      this.cartCount = c;
    });
    this.aS.isLoggedIn.subscribe((status) => {
      this.loginStatus = status;
    });
  }
  login() {
        if(this.loginForm.valid){
          this.router.navigate(['dashboard']);
        }else{
          console.log("user id and password not valid");
        }
}

logout(){
 this.router.navigate(['login']); Here you can redirect as per requirement
 }