CanActivate is not behaving as it should with Angular 7 with firebase

Question

In my Authservice, I have:

  getAuthenticationState(): Observable<any> {
    return this.angularFireAuth.authState;
  }

And in my Guard:

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
        // In case of refresh
        return this.authService.getAuthenticationState()
        .pipe(map(user => !!user))
        .pipe(tap(loggedIn => {
            console.log(loggedIn);
            if (!loggedIn) {
                this.router.navigate(['/admin/login']);
            } else {
                return true;
            }
        }));
    }

My problem is that I have to click the login button twice (I'm sure it is implemented as it should), it seems that the Guard is not working as an Observable, the loggedIn value prints only once.

Answer 1

add take(1) to solve it and why you're using 2 pipes , change it to

 return this.authService.getAuthenticationState()
    .take(1)
    .pipe(
         map(user => !!user),
         tap(loggedIn => {
            console.log(loggedIn);
           if (!loggedIn) {
              this.router.navigate(['/admin/login']);
           } else {
              return true;
           }
         })
      );