firebaseの認証がうまくいかなかったときの対処法（The current domain is not authorized for OAuth operations）

事象

事象としては、こちらとほぼ同じ。

firebaseのauth認証が通らない（not authorized to run this operation）

consoleに以下のエラーが出ていた。

Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (xxxxxxxx.web.app) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.


確認

Firebase設定の確認

Firebase -> Authentication -> Sign-in method の下の方にある「承認済みドメイン」には、対象のアプリのドメインが登録されている。
Firebase Hostingを使って開発しているのでデフォルトで登録済みなのです・・・

上記のサイトを参考に、config回りを確認。

main.jsに以下のように記載済み。（Firebaseからコピペしてきたやつ）
js:main.js
// Initialize Firebase
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxx.firebaseio.com",
projectId: "xxxxxxxx",
storageBucket: "xxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxx",
appId: "xxxxxxxx",
measurementId: "xxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);


結論

四苦八苦して、たどり着いたのは、、、
configを以下のように修正。理由は分からないが、firebaseapp.comではなくて、web.appを登録すれば行けた。

main.js

// Initialize Firebase
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxx.web.app",★
    databaseURL: "https://xxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxx",
    appId: "xxxxxxxx",
    measurementId: "xxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);