Firebase AuthのLocal EmulatorはAuthProviderに応じて適切なダミーユーザを生成してくれる

公開日時

Firebase Local Emulator Suiteを使ってローカル開発を行う際に↓の設定をするとFirebase Authの接続先をエミュレータに変更できる。

firebase.auth().useEmulator('http://localhost:9099')

Google認証を使いたい場合に、エミュレータだとOAuth認証はどうなるんだろうと思って試してみたところダミーのOAuthユーザを生成してくれる仕組みになっていた。

↓でGoogleログイン用のポップアップを表示すると、既存のダミーユーザか新規ユーザを追加するかが選択できる。

const provider = new firebase.auth.GoogleAuthProvider()
await app.auth().signInWithPopup(provider)

local auth1

新規ユーザの場合は「Auto-Generate」ボタンをクリックするとダミーデータをいい感じに入力してくれる。

local auth2

ユーザ登録後にエミュレータUI(http://localhost:4000/auth)でカスタムクレームを設定することもできる。

local auth3

エミュレータがなかった頃は開発用のfirebaseプロジェクトを別途用意した上でfirebase admin sdkを使って都度ユーザのカスタムクレームを設定する必要があったので手間だった。

エミュレータのおかげでfirebaseを使ったサービスでもローカル開発がとてもやりやすくなった。

参考


Related #firebase

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。