Auth pop up returning blank page

Question

When I submit an auth call to google to I get the popup from the google window, then when I submit my credentials and press submit it forwards on to something like

https://auth.firebase.com/v2/FIREBASEREF/auth/google/callback?state= etc

And then all I get is a blank (blue background) screen.

$('#loginButton').click(function() {
  myFirebaseRef.authWithOAuthPopup("google", function(error, authData) {
    if (error) {
      console.log("Login Failed!", error);
      alert("Login Failed, please try again.")
    } else {
      console.log("Authenticated successfully with payload:", authData);
      myUserID = authData.uid;
    }
  });
});

The same is also happening when trying to auth with Github, I can press "submit" or "login" etc. and then it just loads a blank page at auth.firebase.com

Any ideas?

Thanks

Answer 1

FWIW if anyone ends up on this issue: I was getting the exact same thing... the oauth popup was blank and not doing anything. I fixed it by removing the async/await from my form handler:

<form onSubmit={this.onSubmit}>
  <button type="submit">Sign In with Google</button>
</form>
...
onSubmit = async event => {
    await this.auth.signInWithPopup(this.googleProvider)
      .then(....

Answer 2

Sometimes this should be an permissions issue related with the domain where you're trying to do the request like localhost or 127.0.0.1.

In that case, Go to Firebase Console -> Authentication -> Sign-In Method then scroll down to Authorized domains and add your current domain from you're trying to sign in e.g. 127.0.0.1.

Note: This is just for dev purposes, in case you want to deploy your app to Prod, you shouldn't have this configuration. For multiples environments you should check here

Another Note: If you're working with Javascript, you might add an event.preventDefault() before to call firebase.authWithOAuthPopup(...) to be able to obtain the result of the promise that return the authWithOAuthPopup function.