🔐

Firebase Auth でログインが永続化できない問題の解決（Javascript SDK）

2023/08/14に公開

JavaScript

Firebase Auth

tech

情報が少なかったので記事にしました

結論

確認すべきことは以下。

Firebase API Keyが正しいかの確認
onAuthStateChangedを正しく使用できているか
使用しているAPIKeyで "Token Service API" と "Identity Toolkit API" を選択できているか
setPersistenceが記述されていないか確認

Firebase API Keyが正しいかの確認

コンソール > プロジェクトの設定 > 全般に載っている情報で正しく使用されているか

また、Firebaseで使用してるApiKeyが壊れている場合もあります

うまく動かない場合、GoogleCould のコンソールから正常かどうか確認する必要があります

onAuthStateChangedを正しく使用できているか

余談ですが、永続化できない問題で出てくる解決法が大体これ

公式サイトに詳しく書いているの詳細は省きますが、

const FirebaseAuth = getAuth(FirebaseApp)
const user = FirebaseAuth.currentUser

上記の方法だと必ずすぐにcurrentUserが帰ってくるわけではないのでnullになってしまう場合があります

const FirebaseAuth = getAuth(FirebaseApp)
onAuthStateChanged(), async (user) => {
  // ユーザー保存の処理を書く
})

上記方法を使用してユーザーの変化を監視することが推奨されています

使用しているAPIKeyで "Token Service API" と "Identity Toolkit API" を選択できているか

GoogleCould のコンソールで使用しているApiKeyを確認。

API の制限 > キーを制限している場合 "Token Service API","Identity Toolkit API" が選択できているか確認してください

Identity Toolkit API とは

アカウントの作成・ログイン・ログアウト等ができるAPIです

「そもそもログインができない」 という症状であればこちらが原因の可能性があります。

公式サイトがこちら

Token Service API とは

JWTを発行することができるAPIです。

FirebaseAuth ではJWTの有効期限1hが終了したら自動で新鮮なJWTを取得するようになっています。
しかしこちらのAPIが有効でなければ発行できません。

「ログインは成功するけど1時間で再ログインしなければならない」 という症状であれば大体こちらが原因だと思われます。

公式サイトがこちら

setPersistenceが記述されていないか確認

公式サイトから引用。

ウェブアプリケーションの場合、デフォルトの動作では、ユーザーがブラウザを閉じた後でもユーザーのセッションが維持されます。

デフォルトの設定でログインの永続化はできています。
なので永続化をしたい場合setPersistenceを使用する必要がありません。

永続化ができない場合は上のバグがある可能性が高いです。

まとめ

Firebase API Keyが正しいかの確認
onAuthStateChangedを正しく使用できているか
使用しているAPIKeyで "Token Service API" と "Identity Toolkit API" を選択できているか
setPersistenceが記述されていないか確認

上記を確認すれば大体解決すると思います。

余談ですが私は Token Service API を設定できていなくて10日ほど苦しんだので、誰かの助けになれば幸いです。

また、これで解決しないかった場合、相談を受け付けていますので何なりとご相談ください。

結論