メモ帳

メモとか備忘録とか

FirebaseのSDKで設定ミスしたときのエラー

Firebase Authenticationでログイン機能を実装しようとして失敗したときのメモ。

FirebaseSDKのsignInWithPopup()を利用したところ、
コンソールに下記エラーを吐き出し、真っ白なままポップアップが閉じてしまいました。

Refused to display 'https://console.firebase.google.com/u/0/project/[PROJECT_NAME]/database/data/__/auth/iframe#id=I1_1234567891234&_gfid=I1_1234567891234&parent=https%3A%2F%2F[DOMAIN]&pfname=&rpctoken=12345678' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

結論から言うと、原因は初期設定値のミスでした。
↓間違ってた設定↓

firebase.initializeApp({
  apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: '[APP_NAME].firebaseio.com',
  projectId: '[APP_NAME]'
})

↓正しい設定↓

firebase.initializeApp({
  apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: '[APP_NAME].firebaseapp.com',
  projectId: '[APP_NAME]'
})

firebaseio.com はRealtime Databaseの利用時に使われる設定です。
(というかエラーのURLちゃんと見ると、思いっきりDatabaseって書いてます
firebase.google.com

そんなものがiframeで使えるわけもなく、
X-Frame-Optionsのエラーが出ているんだと思います。

ちなみにコード上での設定内容は、Firebase側のconsoleでこんな感じに生成できちゃいます。
これをコピペするのが吉ですね。
f:id:fksks:20201208064250p:plain

今回はfirebase側のdomain許可設定が間違ってると思い、
めちゃくちゃ時間使っちゃいました。初期設定には気をつけましょう。