Firebase Custom Claims with Angular

Question

I have been struggling with some firebase authentication concepts and have not been able to find something concrete on how to resolve it. In my Angular 8 app, I am using firebase for all authentication including the use of custom claims for role based access. I have an auth service that feeds the user and the its custom claims:

 async getUser() {
    const u = await this.auth.currentUser;
    const level = await this.getLevel();
    return { ...u, level: level };
  }

  async getLevel():Promise<String> {
    return new Promise((resolve, reject) => {
      this.auth.currentUser.then((user) => {
        user.getIdTokenResult().then((token) => {
          console.log("Level from getLevel(): ", token.claims.level);
          if(token)
            resolve(token.claims.level);
          else
            reject({
              error: "Token error",
              message: "No token found"
            })
        })
      })
    })
  }

Now when I go to access this function from my auth guard and my navigation menu to see which routes are permitted and which nav items should be displayed it works on the first login; however, upon refresh it no longer works and I have to login:

Navbar:

constructor(
    private router: Router,
    private sidebarService: SidebarService,
    private activatedRoute: ActivatedRoute,
    private authService: AuthService
  ) {
    this.authService.getUser().then((user) => {
      this.currentUser = user;
    });
}

AuthGuard:

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const currentUser = await this.authService.getUser();

    if (currentUser) {
      console.log("User from Guard: ", currentUser)
      if (route.data && route.data.roles) {
        if (route.data.roles.includes(currentUser.level)) {
          return true;
        } else {
          this.router.navigate(['/unauthorized']);
          return false;
        }
      } else {
        return true;
      }
    } else {
      this.router.navigate(['/user/login']);
      return false;
    }
  }

I already understand that the currentUser in the firebase auth is going to be null and populated over time; however, the nav component is giving me and error, "ERROR TypeError: Cannot read property 'level' of null" and I cannot figure out why?

Am I using custom claims incorrectly? Is there a better way to achieve my goal? Any help is greatly appreciated.

Answer 1

等待大神解答