Firebase Login Popup closes automatically on Heroku

Question

We are using FireBase login for our app in React and the flow seems to be working fine on localhost.

But when we deploy our app on Heroku, the login with google window appears on screen and closes almost instantaneously.

Here's my auth.js

export function loginWithGoogle (email, pw) {
  const provider = googleAuthProvider;
  return firebaseAuth().signInWithPopup(provider)
  .then(saveUser)
  .catch(error => console.log(error));
}

Here's login.js

handleGoogleLogin = e => {
    e.preventDefault();
    loginWithGoogle()
      .then(response => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        console.log("After auth...",response);
        //const TOKEN = response.credential.accessToken;
        console.log("result...", response);

        //TODO: Need to call ConsumeSafe API to store the user details
        console.log("invoking getUser");
        getUser(response.data.user.Email).
        then((res) =>{
          this.props.loginHandler(res);
        });

      })
      .catch(error => {
        console.log("Error in popup...",error);
        this.setState(setErrorMsg("Invalid username/password."));
      });
  };

However none of the files catch any error but the window closes.

On my google dev console, I went to Credentials > Oauth2 Web client and added my heroku app url under authorized javascript origins. Still the same result

Answer 1

You need to add your domain to the Authorized domains in the firebase console.

Steps:

1. Visit your firebase console

2. Go to your firebase project

3. Go to Authentication -> Sign in method

4. Scroll down and you will see a list of Authorized domains

5. Add your domain address to the list and save it

This should solve your problem.