Firebase redirect domain listed but still gives an error with signInWithRedirect

Question

I have an angular 2 application that uses firebase for authentication. I want to use Google as my authenticatonprovider and have everything setup so that it should work.

If i try to authenticate with signinWithPopup (As mentioned in the docs) it works:

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
});

But if i try the same code with a redirect firebase.auth().signInWithRedirect(provider) I get the error:

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

But the domain is listed in my firebase console in that section (localhost is even one of the default allowed domains). And the error states that this would also prevent signinwithpopup which still works.

Anyone have an idea why the popup method does work and the redirect one doesn't?

Answer 1

So I finally figured out what the problem was. The problem is not domain based, it is a problem in the flow of the application. The loginwithpopup code was being called in the constructor of the app.component.ts (with the intention of logging people in as soon as the site would load).

I changed that code to the loginwithredirect function, but because it is called within the constructor it gets called everytime you get redirected back to the site from the google authentication page (which puts you in a eternal loop). I still have no idea why the domain error surfaced in the the browser console but when I fixed the flow to first check if we came back from an redirect the problem disappeared.

For completeness the current code I use to login with the redirect method:

firebase.auth().getRedirectResult().then(function (result) {
  if (result.credential) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
  } 
  else {
    var provider = new firebase.auth.GoogleAuthProvider();

    provider.addScope('https://www.googleapis.com/auth/gmail.readonly');
    provider.addScope('https://www.googleapis.com/auth/calendar');
    provider.addScope('https://www.googleapis.com/auth/drive');
    provider.addScope('https://www.googleapis.com/auth/drive.appdata');
    provider.addScope('https://www.googleapis.com/auth/drive.file');

    firebase.auth().signInWithRedirect(provider);

   }
}).catch(function (error) {
  // Handle Errors here.
  console.log(error);
});