🕌

Firebase Authで作る認証アーキテクチャパターン

2024/09/13に公開

はじめに

こんにちは。クラウドエース株式会社で主にアプリケーション開発を担当している水野と秋庭です。

今回は、Firebase Auth で作る認証アーキテクチャパターンについてご紹介します。

Firebase Auth(正式名称:Firebase Authentication)は、簡単に認証システムを構築することができるフルマネージド IDaaS です。
Firebase Auth では、パスワード、電話番号、一般的なフェデレーション ID プロバイダ(Google、Facebook、Twitter)などを使用した認証を行うことができます。
また、バックエンド サービス、使いやすい SDK、アプリでのユーザー認証に使用できる UI ライブラリが用意されています。
ただ、SDK は、Client SDK と Admin SDK が存在し、その2つをうまく使いこなすまで、私は調査に少し時間がかかりました。
そのため、その調査内容で得たノウハウを共有したいと思います。

https://firebase.google.com/docs/auth?hl=ja

Client SDK と Admin SDK の違い

Client SDK と Admin SDK には、以下のような違いがあります。

SDK 実行主体 主な使い方
Client SDK FE ユーザー自身の操作
Admin SDK BE 全ユーザーの操作、IDトークン管理

そのため、基本的には FE から Client SDK を使用することを検討し、Client SDK ではできないことを BE から Admin SDK を使用する構成がオススメです。

ユースケース

今回は、パスワード認証をベースにユースケースをご紹介します。
大枠のアーキテクチャ方針としては、SSO 等の別の認証方式にも適用できますので、パスワード認証以外を検討されている方も参考になる内容となっています。

ログイン

処理順序 実行主体 SDK 処理内容
1 FE Client SDK ユーザーが入力したメールアドレス・パスワードを使用し、signInWithEmailAndPassword() でユーザー認証を行う。
2 FE Client SDK 認証が成功すると、Firebase Auth から払い出された ID トークンと リフレッシュトークンをブラウザ内のストレージに保存する。(自動保存)

ID トークン検証

ID トークン検証を行うことで、BE へのリクエスト時にどのユーザーからのリクエストかを確認することができます。

処理順序 実行主体 SDK 処理内容
1 FE Client SDK getIdToken() でトークンを取得し、BE にリクエストを送信。
2 BE Admin SDK VerifyIdToken() を実行しトークンを検証する。

ログアウト

処理順序 実行主体 SDK 処理内容
1 FE BE に トークン無効化のリクエストを送信。
2 BE Admin SDK RevokeRefreshTokens() を実行しユーザーに紐づくトークンを無効化する。
3 FE Client SDK トークン無効化の成功レスポンスを受け取ったら、Client SDK は signOut() を実行し、ログアウト状態にする。

セッション切れログアウト

「2時間」など任意のセッション時間でログアウトさせたいユースケースです。

処理順序 実行主体 SDK 処理内容
1 FE Client SDK ユーザーの任意のアクション(ページを開く、ボタン押す等)でログイン状態の確認ログイン時刻からの経過時間を計測する
2 FE 経過時間が任意のセッション時間を超えていたら、BE に トークン無効化のリクエストを送信。
3 BE Admin SDK RevokeRefreshTokens() を実行しユーザーに紐づくトークンを無効化する。
4 FE Client SDK トークン無効化の成功レスポンスを受け取ったら、Client SDK は signOut() を実行し、ログアウト状態にする。

サインアップ

処理順序 実行主体 SDK 処理内容
1 FE Client SDK ユーザーが入力したメールアドレス・パスワードを使用し、createUserWithEmailAndPassword() でユーザー作成を行う。
2 FE Client SDK 作成が成功すると、Firebase Auth から払い出された ID トークンと リフレッシュトークンをブラウザ内のストレージに保存する。(自動保存)
3 FE Client SDK sendEmailVerification() を実行しユーザーに確認メールを送る
4 FE ユーザーがメール内のリンクを踏むと、ユーザー検証が完了する。

ユーザー追加(他ユーザー)

管理者ユーザーが他のユーザーを追加して初期パスワードを発行し、追加されたユーザー自身がパスワードを変更することで、ユーザー検証も完了する仕組みです。

処理順序 実行主体 SDK 処理内容
1 FE 管理者ユーザーが入力したメールアドレスを使用し、ユーザー追加リクエストを送信。
2 BE Admin SDK パスワードを生成し、CreateUser() を使用してユーザーを作成する。
3 BE 作成されたユーザーのメールアドレスに、メールアドレスと初期パスワード、ログインURLを送信する。
4 FE Client SDK 追加されたユーザーがログインを実施したら、User.emailVerified でユーザー検証が完了しているかを確認する。(初期パスワード発行時はこの値が false になっている)false の場合は、作成されたユーザーのメールアドレスに sendPasswordResetEmail() を使用してパスワード再設定メールを送信する。
5 FE ユーザーがメール内のリンクを踏んでパスワード変更すると、ユーザー検証が完了する。

ユーザー削除(自ユーザーのみ)

Client SDK でユーザーの削除(=セキュリティ上重要な操作)を行うには、ユーザーが最近ログインしている必要があります。

処理順序 実行主体 SDK 処理内容
1 FE Client SDK ユーザーにログインを求めて再認証させる。
2 FE Client SDK deleteUser() を使用してユーザーを削除する。

ユーザー削除(他ユーザー)

処理順序 実行主体 SDK 処理内容
1 FE BE に ユーザー一覧取得のリクエストを送信。
2 BE Admin SDK Users() を使用してユーザー一覧を取得する。
3 FE 削除対象のユーザーのIDを使用し、BE に ユーザー削除のリクエストを送信。
4 BE Admin SDK DeleteUser() を使用してユーザーを削除する。

メールアドレス変更

Client SDK でメールアドレスの設定(=セキュリティ上重要な操作)を行うには、ユーザーが最近ログインしている必要があります。

処理順序 実行主体 SDK 処理内容
1 FE Client SDK ユーザーにログインを求めて再認証させる。
2 FE Client SDK ユーザーが入力したメールアドレスを使用し、verifyBeforeUpdateEmail() を使用してパスワード再設定メールを送信する。
3 FE ユーザーがメール内のリンクを踏むと、ユーザー検証が完了する。

パスワード変更

Client SDK でパスワードの設定(=セキュリティ上重要な操作)を行うには、ユーザーが最近ログインしている必要があります。

処理順序 実行主体 SDK 処理内容
1 FE Client SDK ユーザーにログインを求めて再認証させる。
2 FE Client SDK sendPasswordResetEmail() を使用してパスワード再設定メールを送信する。
3 FE ユーザーがメール内のリンクを踏んでパスワード変更すると、ユーザー検証が完了する。

さいごに

今回は、Firebase Auth で作る認証アーキテクチャパターンについてご紹介しました。

こちらを参考にしていただき、Client SDK と Admin SDK をうまく使いこなし、良い開発者体験を得ていただけたら幸いです。

参考

https://firebase.google.com/docs/auth?hl=ja
https://firebase.google.com/docs/auth/web/password-auth?hl=ja
https://firebase.google.com/docs/auth/web/manage-users?hl=ja
https://firebase.google.com/docs/auth/admin/manage-users?hl=ja
https://firebase.google.com/docs/reference/js/auth

Discussion