javascriptfirebasefirebase-authenticationgoogle-signin

Firebase popup signin popup-closed-by-user error

I am trying to use the Javascript client library for Firebase auth to sign in with a Google account and popup window. However, when I try to sign in, the signin window pops up, I select my Google account, and then it spends about 10 seconds loading (with the blue progress bar moving), then the popup window closes, and shortly after I get the following error message:

code: "auth/popup-closed-by-user"
message: "The popup has been closed by the user before finalizing the operation."

I have enabled Google signin in the authentication section of the Firebase web UI. Below is the code I am using which is pretty much directly copied from the Firebase docs. I have made no other changes to the project config. I started a new project just to test this and have simply run firebase init, enabling only hosting, and enabling Google signin in the authentication web UI.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Welcome to Firebase Hosting</title>

    <script src="/__/firebase/7.14.6/firebase-app.js"></script>
    <script src="/__/firebase/7.14.6/firebase-auth.js"></script>
    <script src="/__/firebase/init.js"></script>
  </head>
  <body>
    <button id="signin">sign in</button>
    <button id="signout">sign out</button>
    <script>
      const provider = new firebase.auth.GoogleAuthProvider();
      const signinButton = document.querySelector("#signin");
      signinButton.addEventListener("click", () =>
        firebase
          .auth()
          .signInWithPopup(provider)
          .then(function (result) {
            console.log("result", result);
          })
          .catch(function (error) {
            console.error(error);
          })
      );
      const signoutButton = document.querySelector("#signout");
      signoutButton.addEventListener("click", () =>
        firebase
          .auth()
          .signOut()
          .then(function () {
            console.log("signed out");
          })
          .catch(function (error) {
            console.error(error);
          })
      );
    </script>
  </body>
</html>
Solution

  • See this issue: https://github.com/firebase/firebase-js-sdk/issues/3188.

    For some users, this is resolved by adding the app domain to the list of authorized domains:
    Firebase Console -> Auth -> Sign-In Method -> Authorized Domains -> Add (domain)