firebase web 注册与 google 仅在第二次点击后才有效？

Question

I have got a react create app configured with google firebase. I am accepting both signup with email and signup with google methods.

the regular signup with email works fine. but signInWithGoogle() method only works if user clicks on the google icon 2 times. I am using history.push to redirect user to /dashboard if the signInWithGoogle() promise resolves successfully.

Current Behavior: when I click on the google button which fires this function, I get popup window:

but after successful login in this window exits, but the site stays on the same signup form. However, if I repeat the action, (click the google icon, and signing with google id again (twice), then it redirects to dashboard.

Expected Behavior:

It should redirect to /dashboard without needing to repeat the action twice.

CODE: components/SignUpSide.js

import React from "react";
import { useState, useContext, useEffect } from "react";
import { Link, useHistory } from "react-router-dom";
import FirebaseContext from "../context/firebase";



export default function SignUpSide() {

const history = useHistory();
const { firebase, googleProvider } = useContext(FirebaseContext);

const auth = firebase.auth();

  async function signInWithGoogle() {
    auth
      .signInWithPopup(googleProvider)
      .then((res) => {
        const newUser = res.user;

        const checkDomains = ["gmail.com", "yahoo.com", "outlook.com"];
        const domain = newUser.email.substring(
          newUser.email.lastIndexOf("@") + 1
        );
        let accountType = "";
        if (checkDomains.includes(domain)) {
          accountType = "limited";
        } else {
          accountType = "Standard";
        }

        firebase
          .firestore()
          .collection("users")
          .add({
            userId: newUser.uid,
            username: newUser.displayName.toLowerCase(),
            // fullName,
            emailAddress: newUser.email.toLowerCase(),
            following: ["2"],
            followers: [],
            dateCreated: Date.now(),
            firstLogin: true,
            accountType: accountType,
          });

        history.push("/dashboard");
      })
      .catch((error) => {
        alert.error(error.message);
      });
  }

return (
<>
  <Button onClick={signInWithGoogle}>
                    <img
                      className={classes.icons}
                      src="https://img.icons8.com/fluent/100/000000/google-logo.png"
                      alt="google logo"
                    />
                  </Button>
</>
 )
}

Answer 1

OK so I figured out the answer sharing it here for the future.

The problem: during my debugging, I found out that when the Google popup window gets removed, it actually refreshes the page it originated from which destroys the context and the entire component's code get to run again because of the refresh. since my 'redirect' code was at the bottom, on the first time, the execution isn't reached to the redirect code so it never works. however, during the second time around, the Google popup code never runs and it reaches the redirect code so the page redirects.

the solution: I wrote an if statement in login page's useEffect, saying something like:

if (user) {
 //redirect to dashboard
}

so as soon as a user is gotten thanks to popup exit, the app gets redirected to dashboard.