FirebaseUI
要点
npm install --save firebase firebaseui firebaseui-ja
公式言語パックがある
Webなら基本的にこれを使う。
実装の全体像
どこかのクラスにクライアントを読み込む。その際にAPIキーを入れる。
ログインボタンを配置したい箇所にID付きdivタグ用意
ui.start を呼んでUI配置。CSSもインポートすること。
ログイン状態検知は onAuthStateChanged
Firebaseライブラリを何かしら使用すると発火する?
firebaseui.auth.AuthUI.getInstance() を実行したときも動く
なのでページ初期表示時にログイン状態を拾えなかったらui.startと書くと無限ループになる
ログインコールバックは signInSuccessWithAuthResult で受け取れる
その後リダイレクトするかどうかを決められる。リダイレクト先は事前にオプションで指定。
おそらくこのコールバックはサーバー/データベースにログインがあったことを伝える箇所
onAuthStateChanged は初回ログイン後と再訪問が対象
TIPS
Error: An AuthUI instance already exists for the key "DEFAULT" firebase.auth().onAuthStateChanged を使うこと
This domain (192.168.0.2) is not authorized to run this operation.
https://gyazo.com/c279abaf14ca2cb53b8e67f7d6907414
動作確認用のiPhoneからLAN経由でMacにアクセス。Firebase / Authentication / Sign-in method に「承認済みドメイン」がある。ここにはlocalhostがデフォルトで登録されているが、当然ローカルIPはない。
CSS適用
nuxt.config.js iPhone Safari本番環境でCSSが適用されなかった。Vercelのキャッシュのせいかも。