ionic - Firebase auth: This domain is not authorized for OAuth oprations for your Firebase project

Question

I am developing an Ionic App where I need to login via twitter. I developed this a few days ago and it worked fine but recently faced this error:

"Firebase: This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console. (auth/unauthorized-domain)".

  signInWithRedirect() {
const auth = getAuth();
signInWithRedirect(auth, new TwitterAuthProvider())
  .then(() => {
    console.log(window);
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = TwitterAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    this.user = user;
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    this.error = { errorCode, errorMessage };
  });

}

This is my package.json file.

 "@angular/common": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/fire": "^7.0.3",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@ionic-native/core": "^5.36.0",
"@ionic-native/deeplinks": "^5.36.0",
"@ionic-native/facebook": "^5.36.0",
"@ionic-native/firebase-authentication": "^4.20.0",
"@ionic-native/geolocation": "^5.20.0",
"@ionic-native/sign-in-with-apple": "^5.36.0",
"@ionic-native/twitter-connect": "^5.36.0",
"@ionic/angular": "^5.7.0",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-customurlscheme": "5.0.2",
"cordova-plugin-facebook-connect": "^3.1.1",
"cordova-plugin-inappbrowser": "5.0.0",
"cordova-universal-links-plugin-fix": "1.2.1",
"firebase": "^9.0.1",

I have added localhost to my authorized domain as well (which is added by default):

My guess is this is due to the origin of ionic apps being "ionic://localhost" instead of "http://localhost".

My Ionic version is also latest which is recommended by Firebase: https://firebase.google.com/docs/auth/web/cordova

Any help with this would be appreciated. Thanks

Answer 1

I think your local host domain in the authorized domains section should look like this: http://localhost:4200

Answer 2

Were you able to solve it? Still have the same issue with ionic 5

Answer 3

Reason: You didn't have the firebase app domain itself (*.firebaseapp.com) included in the Accept requests from these HTTP referrers (web sites) list in the Google API credentials for the app key ( https://console.developers.google.com/apis/credentials/key ).

This must be a fairly recent requirement as accepting requests from just my actual site domain was enough beforehand.

source: https://github.com/firebase/firebase-js-sdk/issues/998