カスタムクレームを使用してログイン

roleの設定をバックエンドに任せる

ログインしたユーザーが、一般ユーザーか管理者かで、ログイン後に画面遷移するページを変更したい場合があります。
その場合だと、Firestoreのuserコレクションに、roleフィールドを持たせて、取得した値が、userかadminで画面遷移先を変更する方法があります。
ですが、サーバーサイドに処理を書いて、Cloud Functionsを使用すれば、特定のメールアドレスを持っているユーザーは、管理者として、ログインさせることができます。

サーバーサイド側の仕組み

新規ユーザーが作成されたら、そのイベントがトリガーになって、Cloud Functionsが実行されユーザーIDのトークンに、カスタムユーザートークンが与えられます。
Node.js側のロジックで、if文で条件分岐して、もし新規登録されたユーザーが条件の一致するメールアドレスを持っていたら、管理者権限のトークンを付与します。

設定の手順

1. Firebaseのプロジェクトを作る

2. Firestoreを使えるようにする。Cloud FunctionsはFirestoreが使えないと、コマンド打ってもエラーが出て環境構築できない!

3. FirebaseAuthenticationのメールアドレスとパスワード認証を使えるようにする。

4. Cloud Functionsを使えるように設定する

5. Cloud Functionsのプロジェクトを作成する。JavaScriptを選択して、ESLintは使用しません。ESLintがあると、リントのチェックに引っかかると、Firebaseへのデプロイに失敗します!

6. 関数を作ったら、デプロイしておく。

7. Flutterのプロジェクトを作成してロジックを作ったらビルドする。

8. FirebaseAuthenticationのコンソールでユーザーアカウントを作成しておく。管理者のメールアドレスは、 admin@example.comにしておく。

9. 新規ユーザーを作成したときに、デプロイした関数が実行される

10. デバッグしながら、ログインの実験をしてみる。

Cloud Functionsの環境構築は公式ドキュメントを参考に設定をしてください。人によってはコマンドを打った時に出てくるログが違うかもしれませんが、落ち着いて本当に正しく入力されているか確認をしてください。

はじめに: 最初の関数の記述、テスト、デプロイ  |  Cloud Functions for Firebase

必要なパッケージを追加する

firebase_core | Flutter package

firebase_auth | Flutter Package

こちらが動作検証用に撮影した動画です

デバッグしてみると、ログインしているユーザーによって画面遷移しているページが異なります。

Cloud Functionsのトリガー関数を作成する

バックエンド側のロジックを作ります。新規登録されたユーザーのメールアドレスが、admin@example.com だけ管理者ユーザーにします。
カスタムクレームについては、公式の情報も読みながら見ていただくと、なんとなくご理解いただけるかもしれないです。
ドキュメントだけだとわからないですが、実際に動くものを見ると「ああ、そういうことかと!」とご理解いただけると思います。

カスタム クレームとセキュリティ ルールによるアクセスの制御  |  Firebase Authentication