如何将Google OAuth登录状态同步至Firebase并触发onAuthStateChanged监听

问题根因 #

你当前使用第三方Google登录组件拿到授权后，仅手动将用户信息写入了Firestore数据库，没有走Firebase Auth的凭证登录流程，Firebase Auth服务完全没有感知到Google登录状态，自然不会触发onAuthStateChanged回调。

修复步骤 #

1. 前置准备 #

先确认你已在Firebase控制台「身份验证」-「登录方式」页面，启用了Google作为登录提供商。

2. 修改Google登录成功回调逻辑 #

Google授权成功后，需要先将返回的凭证提交给Firebase Auth完成登录，之后Firebase会自动同步用户信息，也会正常触发onAuthStateChanged监听。

修改后的Google登录代码示例：

// 先导入需要的模块
import { GoogleAuthProvider, signInWithCredential } from "firebase/auth";
import { auth } from "你的firebase配置文件路径";

const GoogleAuth = () => {
  const saveFirebase = (email, uid) => {
    return firebase.firestore().collection("users").doc(uid).set({
      email: email,
    });
  };

  const onSuccess = async (response) => {
    try {
      // 1. 拿到Google返回的id token
      const idToken = response.tokenId;
      // 2. 创建Firebase可识别的Google登录凭证
      const credential = GoogleAuthProvider.credential(idToken);
      // 3. 用凭证登录Firebase Auth，这一步完成后就会触发onAuthStateChanged
      const userCredential = await signInWithCredential(auth, credential);
      const user = userCredential.user;
      // 4. 再写入用户信息到Firestore，统一用Firebase生成的uid即可
      await saveFirebase(user.email, user.uid);
    } catch (err) {
      console.error("Google登录同步Firebase失败：", err);
    }
  };

  // 注意你之前onFailure绑定了onSuccess是错误的，这里改回来
  const onFailure = (err) => {
    console.error("Google登录失败：", err);
  };

  const handleClick = () => {
    return (
      <GoogleLogin
        clientId="1093050194946-tcn6k22l190klav7cat182leq09luthu.apps.googleusercontent.com"
        buttonText="Login"
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiePolicy={"single_host_origin"}
        theme="dark"
      />
    );
  };
  return <div className="google-button">{handleClick()}</div>;
};

3. 优化现有监听器代码 #

你现有的useEffect没有加依赖数组和清理逻辑，会重复绑定监听器，建议修改为：

const authListener = () => {
  // onAuthStateChanged返回清理函数，用来卸载时取消监听
  return auth.onAuthStateChanged((user) => {
    if (user) {
      setUser(user);
      setUsername(user.displayName);
      // 登录成功跳转主页的逻辑可以写在这里
    }
  });
};

useEffect(() => {
  const unSubscribe = authListener();
  // 组件卸载时清理监听
  return () => unSubscribe();
}, []); // 空依赖数组，只在组件首次挂载时绑定一次

内容的提问来源于stack exchange，提问作者coldasspirit