firebaseui-web(firebaseui-web-react)とエミュレータを連携してみた！

firebaseui-web(firebaseui-web-react)とエミュレータの連携を試してみたので、調べた内容などを簡単にまとめたいと思います。

※ 調べた内容は、主にfirebaseui-webについてですが、firebaseui-web-reactについても問題なく動作しました

公式ドキュメントでは「対応予定」？
エミュレータ対応されてるっぽい？
エミュレータ対応コード
利用サンプル
- firebaseui-web での利用
  - 利用例その１ - テストコード
  - 利用例その２
    - 補足: firebaseのバージョンに注意
- firebaseui-web-react での利用
まとめ

公式ドキュメントでは「対応予定」？

以下の公式ドキュメント(21/08/06 時点)だと、「Firebase UI ウェブ」は「対応予定」となっていました。

しばらく開発用のプロジェクトを作って使っていたのですが、不便なことが増えてきたので、もう一度、firebaseui-webとエミュレータの連携を調べてみる事にしました。

エミュレータ対応されてるっぽい？

以下の公式リポジトリのIssueページによると、どうも対応している模様

Emulator support should now be available in the latest FirebaseUI-web release.

21/02/04ごろのコメントなので、バージョンだとv4.7.3あたりだと思われます。

v4.7.2, v4.7.3 は更新が 21/02/04 の当日で、v4.8.0 がその後しばらくしてからなので、v4.8.0 以降が無難かと思います。

※ v4.8.0 については動作確認済み

エミュレータ対応コード

エミュレータ対応のプルリクはたぶん、これ ↓

javascript/widgets/authui.jsの以下のコードが、おそらくエミュレータ対応部分だと思われます。

  const emulatorConfig = auth.emulatorConfig;
  if (emulatorConfig) {
    const {protocol, host, port, options} = emulatorConfig;
    const portString = port === null ? '' : ':' + port;
    this.tempAuth_.useEmulator(`${protocol}://${host}${portString}`, options);
  }

引数で渡されるfirebase.auth.Authにエミュレータの設定がある場合は、内部で使用されるthis.tempAuthでも同様のエミュレータ設定をする、みたいな感じだと思います。

利用サンプル

firebaseui-web での利用

利用例その１ - テストコード

以下は、おそらくjavascript/widgets/authui.jsのテストコードだと思われます。

testAuth.install();
testAuth.useEmulator('http://localhost:1234');
app = new firebaseui.auth.AuthUI(testAuth, 'id0');

firebaseui-webについては、動作確認していないのですが、useEmulatorしたfirebase.auth.Authをfirebaseui.auth.AuthUIのコンストラクタに突っ込めば良さそうな感じです。

※ firebaseui-web-react については後述

利用例その２

以下は、先ほどのIssueから

firebase.initializeApp(FIREBASE_CONFIG, 'debug');
var auth = firebase.auth()
auth.useEmulator("http://localhost:9099")
var ui = new firebaseui.auth.AuthUI(auth);
ui.start('#firebaseui-auth-container', {
    signInSuccessUrl: '/transactions',
    signInOptions: [
        {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
            requireDisplayName: false
        }
    ]
});

先ほどのテストコードとほぼ同じような感じです。

質問内容から引用していますが、質問の内容自体はバージョン違いで動かなかったということだったので、上記のコード自体は問題ないかなと思います。

補足: firebaseのバージョンに注意

「利用例その２」で引用した質問の続きから

Problem solved, in case it's useful for someone: updating firebaseui is not enough, you also need to be on firebase 8.2.4 at least to have the emulatorConfig exposed (I was on firebase 8.2.1)

firebase 8.2.4 以上が必要な模様

firebaseui-web-react での利用

firebaseui-web-react (5.0.2) で利用されているfirebaseuiは、エミュレータに対応済みのバージョンが使われていました。

以下のようなコードを試したところ、問題なくエミュレータと連携できたので、firebaseui-web-reactでも使えそうです。

const Sample = () => {
    const auth = firebase.auth()
    auth.useEmulator("http://localhost:9099")

    return <StyledFirebaseAuth
        uiConfig={someConfig}
        firebaseAuth={auth}
    />
}

まとめ

firebaseui-web はエミュレータ対応済みっぽい
firebaseui-web-react もエミュレータ対応済みっぽい
公式ドキュメントは、最新というわけではない？