signInWithPopup 実行時のエラー "Cross-Origin-Opener-Policy..."
kwnFirebase AuthenticationのsignInWithPopupを実行すると、ポップアップが開いたタイミングでコンソールにエラーが出力される。試したのはGoogleアカウントでの認証のみ。エラーは出力されるが問題なく動くので放置しておいて良さそうだが、一応調べたことをメモしておく。
結論としては結局解決策は見つからなかった。エラーが出てる状況を放置するのも気持ち悪いし、自分はsignInWithPopupに拘る必要はなかったのでsignInWithRedirectを使うことにした。
バージョン
"node_modules/firebase": {
"version": "9.19.1",
~~~
"dependencies": {
~~~
"@firebase/auth": "0.22.0",
~~~
}
},
ざっくりコード
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
const firebaseApp = initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
});
export const auth = getAuth(firebaseApp);
export const googleAuthProvider = new GoogleAuthProvider();
import { auth, googleAuthProvider } from "./firebase";
~~~
await signInWithPopup(auth, googleAuthProvider);
エラー
Cross-Origin-Opener-Policy policy would block the window.closed call.
poll @ popup.ts:282
GPT-4に聞いてみたが、無視してよさそう。
質問
Firebase AuthのsignInWithPopupを実行すると「Cross-Origin-Opener-Policy policy would block the window.closed call.」というエラーがコンソールに表示されます。エラーの意味と対応方法を教えてください。
回答
Cross-Origin-Opener-Policy policy would block the window.closed call.のエラーメッセージは、新たに開いたウィンドウ（ポップアップウィンドウなど）がクロスオリジンのコンテキストで実行されている間、オリジンウィンドウがそのwindow.closedプロパティを参照しようとしたときに表示されます。
この問題は、FirebaseのsignInWithPopupメソッドが新しいウィンドウを開き、それがOAuthプロバイダのページ（Google、Facebookなど）へリダイレクトする際に発生します。そのOAuthプロバイダのページがCross-Origin-Opener-Policy: same-originを設定している場合、元のウィンドウがwindow.closedプロパティを参照することはブロックされます。
ただし、このエラーメッセージは基本的には無視して問題ありません。これは、Firebase AuthのsignInWithPopupメソッドが新しいウィンドウが閉じられたかどうかをポーリングするためにwindow.closedを使用しているためです。そのウィンドウが閉じられたら、Firebase AuthはバックグラウンドでIDトークンを交換し、ユーザー認証を完了します。
このエラーメッセージが表示されても、Firebase Authの機能には影響を与えません。ユーザーがOAuthプロバイダで正常に認証され、そのウィンドウが閉じられれば、Firebase Authは期待通りに動作します。このエラーメッセージが表示されても、通常は特に対応する必要はありません。
ただし、もし何らかの理由でこのエラーメッセージを解消したい場合は、signInWithPopupメソッドの代わりにsignInWithRedirectメソッドを使用することで回避できます。ただし、この方法を使用すると、認証プロセス中に元のウィンドウの状態が失われる可能性があることに注意してください。
kwnredditで同じ現象が報告されていたが、コメントを見ると誰も解決できていない。
kwnなぜかNext.jsのissueにも報告されていたが、これっていう解決策はなさそう。