Guard condition not executing

Question

I'm working on a new project using Angular & Firebase Auth + Firestore DB, and I noticed a problem in my implementation but I've ran out of ideas what it could cause this.

I created an Admin Guard that checks whether the DB user is admin or not. But When I compile, I could not see the guard condition is not executing.

Here is the database get for the user:

get(uid: string): AngularFirestoreDocument<User> {
  return this.afs.doc(`users/${uid}`)
}

From the Auth Service where I get the db user:

get dbUser$(): Observable<any> {
  return this.user$.pipe(
    switchMap(user => {
      if(user && user.uid) {
        return this.dbService.get(user.uid).valueChanges();
      } else {
        return of(null);
      }
    }),
  )
}

And here I call it in the AdminAuthGuard:

export class AdminAuthGuard {

  constructor(
    private authService: AuthService, 
    private dbService: DatabaseService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.dbUser$
    .pipe(
      map((userData: any) => {
        console.log('Admin Auth Guard returns true');
        if(userData && userData.isAdmin) {
          return true;
        } else {
          console.log('Admin Auth Guard returns false');
          return false;
        }
      })
    );
  }
}

I've put the console.log on this.authService.dbUser$ and it prints twice a user with displayName and email, but without the isAdmin, and the third print is with a user with isAdmin property. The console.log('Admin Auth Guard returns true') & ('Admin Auth Guard returns false') never prints.

Here is the app-routing for those paths:

  {path: 'admin/products', component: AdminProductsComponent, canActivate: [AdminAuthGuard]},
  {path: 'admin/orders', component: AdminOrdersComponent, canActivate: [AdminAuthGuard]},

I tried to create and Admin Guard for two routes, and expected to get at least a print from the functions.

Answer 1

try the following

auth service

user$: Observable<AppUserModel | null | undefined>;

  constructor(
    private afs: AngularFirestore,
    public afAuth: AngularFireAuth,
  ) {
    super(afs);

    this.user$ = afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<AppUserModel>(`${entityName}/${user.uid}`)
            .snapshotChanges()
            .pipe(map(snap => {
              if (snap) {
                return this.convertSnap<AppUserModel>(snap);
              } else {
                return null;
              }
            }));
        } else {
          return of(null);
        }
      }));
  }

admin guard

export class AuthGuard  {
  constructor(
    private router: Router,
    private auth: AuthService
  ) { }

  canActivate(_route: any, state: RouterStateSnapshot): Observable<boolean> {
    return this.auth.user$.pipe(map(user => {
      if (!user) {
        this.router.navigate(['/'], { queryParams: { returnUrl: state.url } });
        return false;
      } else {
        return true
      }
    }));
  }
}

I use convert snap to get the user uid

  convertSnap<T>(snap: Action<DocumentSnapshot<T>>) {
    if (snap.payload.exists === false) {
      return null;
    } else {
      return <T>{
        uid: snap.payload.id,
        ...snap.payload.data()
      }
    }
  }