FirebaseのAPIキーにリファラー制限を設定したらAuthのGoogleログインがエラーになった

公開日時

FirebaseのAPIキーはクライアントから利用するキーのため、公開しても問題ない(というか公開するしかない)が、自分のサイト以外でAPIキーが利用されるのは防いでおきたい。

APIキー制限はFirebaseコンソール上からは設定できないのでGCPのコンソールから行う必要がある。

APIとサービス => 認証情報 にある Browser key (auto created by Firebase) が該当のAPIキーになっている。

本番環境からのアクセスのみを許可したかったので、リファラー制限に本番環境のURL(xxx.app/*)を設定したところ、Firebase AuthによるGoogleログインができなくなってしまった。

現象としてはログインポップアップが表示されるものの、ログイン画面が表示されずポップアップが閉じてしまう。

consoleには↓が記録されていた。

{
  code: "auth/popup-closed-by-user",
  message: "The popup has been closed by the user before finalizing the operation.",
  a: null
}

Google認証ダイアログを表示した際に firebaseapp.com にアクセスしていたので{project_id}.firebaseapp.com/* を追加してみたところ、アカウント選択画面までは表示されたが同じエラーになってしまった。

最終的に {project_id}.web.app/* も追加したところ、これまで通りログインができるようになった。

firebase api key

これはハマる。

参考


Related #firebase

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

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

Firebase Extensions

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

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

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

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

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる