firebaseui-web(firebaseui-web-react)とエミュレータの連携を試してみたので、調べた内容などを簡単にまとめたいと思います。
※ 調べた内容は、主にfirebaseui-web
についてですが、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 での利用
利用例 その1 - テストコード
以下は、おそらく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 については後述
利用例 その2
以下は、先ほどの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のバージョンに注意
「利用例 その2」で引用した質問の続きから
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 もエミュレータ対応済みっぽい
- 公式ドキュメントは、最新というわけではない?