how to use angular pipe and subscribe correctly in request call

Question

In my angular application I am sending a request to my backend to check credentials, after success the backend sends an token which I read. So far this works, but I had to use an pipe to make it map to a method and then make it work. But my problem now it even though I am getting 200 from the server my page will not navigate to the protected page automatically. If I enter the url manually it works this is what I tried:

  authenticateUser(login: LoginModel){
    this.http = new HttpClient(this.handler)
    return this.http.post<JwtToken>(environment.rootUrl + 'api/authenticate', {
      username: login.username,
      password: login.password,
    }).pipe(map(response => this.authenticateSuccess(response)))
      .subscribe({
        next: () => {
          this.isAuthenticated = true;
          this.router.navigate(['/dashboard'])
        }, error: (error) => {
          this.isAuthenticated = false;
          console.log(error)
        }
      })

  }

It does not enter the subscribe part after the pipe. Is there any way to make this work? I still want to have an error handling like if no error then navigate to url if error do not navigate.

EDIT:

AuthenticateSuccess method:

  isUserLoggedIn(){
    return !! localStorage.getItem('authenticationToken')
  }

  private authenticateSuccess(response: JwtToken): void {
      const jwt = response.id_token;
      localStorage.setItem('authenticationToken' , jwt)
      this.localStorageService.store('authenticationToken', jwt);
      console.log(this.localStorageService.retrieve('authenticationToken'))
      this.sessionStorageService.clear('authenticationToken');

  }

Authguard:

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private auth: AuthenticationService,
    private router: Router
  ) {
  }

  canActivate(): Promise<boolean> {
    return new Promise(resolve => {
      if (this.auth.isUserLoggedIn()) {
        resolve(true)
      } else {
        this.router.navigate(['authenticate'])
        resolve(false)
      }
    })

  }
}

SOLUTION:

 authenticateUser(login: LoginModel) {
    this.http = new HttpClient(this.handler)
    return this.http.post<JwtToken>(environment.rootUrl + 'api/authenticate', {
      username: login.username,
      password: login.password,
    }).subscribe({
      next: response => {
        this.isAuthenticated = true;
        this.authenticateSuccess(response)
        this.router.navigate(['/dashboard'])
      }, error: (err) => {
        console.log(err)
      }, complete: () => {
        console.log("finished without worry")
      }
    })
  }

Answer 1

RxJs map operator is supposed to modify the content of an observable. The map operator however needs to return the same observable or another observable, for the next subscribe operation to be able to function.

In your case your map operator does not return any observable at all and therefore the subscribe method has no reason to be triggered.

You could simple return the response again in your method here

private authenticateSuccess(response: JwtToken): any {
      const jwt = response.id_token;
      localStorage.setItem('authenticationToken' , jwt)
      this.localStorageService.store('authenticationToken', jwt);
      console.log(this.localStorageService.retrieve('authenticationToken'))
      this.sessionStorageService.clear('authenticationToken');
      return response;
  }

but I think all the code of the map method matches better directly inside the subscribe method.