概要

@angular/fireのv5.2.0でAuth Guardsが追加されました。
これにより、自前でguardを書かなくても認証チェックが可能になりました。
ただ、v5.2.1の時点では上手く動かない問題がありました。

基本的な使い方

まずapp.module.tsのimportsにAngularFireAuthGuardModuleを追加します。
あとはguardを指定するだけでログイン済みかどうかチェックすることができます。
コードとしては下のようになります。

import { AngularFireAuthGuard } from '@angular/fire/auth-guard';

export const routes: Routes = [
    { path: '', component: AppComponent },
    { path: 'items', component: ItemListComponent, canActivate: [AngularFireAuthGuard] },
]

カスタマイズ

デフォルトではログイン済みかチェックするだけですが、authGuardPipeを使ってカスタマイズすることもできます。
リダイレクト先の変更や、custom claimsのチェックなどが提供されています。

import { canActivate, redirectUnauthorizedTo } from '@angular/fire/auth-guard';

const redirectUnauthorizedToLogin = redirectUnauthorizedTo(['login']);

export const routes: Routes = [
    { path: '', component: AppComponent },
    { path: 'items', component: ItemListComponent, ...canActivate(redirectUnauthorizedToLogin) }
];

問題

v5.2.1の時点で認証をカスタマイズした場合、production buildでうまく動きませんでした。
canActivate関数を使わずに下のように書くとちゃんと動きました。

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(["login"]);

const routes: Routes = [
  {
    path: "items",
    component: ItemListComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin }
  }
]

@angular/fireのAuth Guardsで認証チェックをする

概要

基本的な使い方

カスタマイズ

問題

参考