Snippet

Angular Firebase Claims Auth Guard

AOAnonymous One· Sep 1, 20221 min read
  • #Angular
  • #Firebase
  • #Firebase Authentication
  • #Angular Guard
  • #RxJS

Angular Firebase Claims Auth Guard

Convert a promise into an observable for canActivate angular auth guard.

Filename: auth.guard.ts

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router,
} from '@angular/router';
import { nav_path } from '../../app-routing.module';
import {from, Observable, of} from 'rxjs';
import {map, switchMap, take, tap} from 'rxjs/operators';
import {Auth, authState, getIdTokenResult} from "@angular/fire/auth";

@Injectable({ providedIn: 'root', })
export class AdminAuthGuard implements CanActivate {
  constructor(
    private auth: Auth,
    private router: Router
  ) {}
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    Observable<boolean> {
    return authState(this.auth).pipe(
      take(1),
      switchMap(user => {
        if (user) {
          return from(getIdTokenResult(user)).pipe(
            map(idTokenResult => !!idTokenResult?.claims?.admin),
            tap((isAdmin) => { if (!isAdmin) this.router.navigate([nav_path.FORBIDDEN])})
          )}
        else { this.router.navigate([nav_path.LOGIN]); return of(false); }
      })
    )
  }
}

0 Comments

Sign in to join the conversation.

Search

Jump to a page, story or project