Angularfire 2 using AngularFireAuthGuard for role based content display

Question

Is there any way to use new Angularfire2 guards (AngularFireAuthGuard) to check the user custom claims (https://firebase.google.com/docs/auth/admin/custom-claims) for content display?

I have a button like "Edit Article" that I just want to display for users that have the "editor" custom claim.

I want something like this, but for content display not for route access control:

// This pipe will only allow users with the editor role to access the route
// { path: 'articles/:id/edit', component: ArticleEditComponent, ...canActivate(editorOnly) }
const editorOnly = pipe(customClaims, map(claims => claims.role === "editor"));

Answer 1

If you aren't using this for route access control, then you shouldn't use AuthGuards. Try something like this combined with an *ngIf or *ngSwitch:

firebase.auth().currentUser.getIdTokenResult()
  .then((idTokenResult) => {
     // Confirm the user is an Admin.
     if (!!idTokenResult.claims.admin) {
       // Show admin UI.
       showAdminUI();
     } else {
       // Show regular user UI.
       showRegularUI();
     }
  })
  .catch((error) => {
    console.log(error);
  });

Answer 2

This is more of an AF approach so might not be exactly what you're looking for. This will give you the claims which you can use to decide what content to show.

    this.af.currentUser.then((result) => {
        result.getIdTokenResult().then((result) => { console.log(result.claims) });
    });