Firebase signInWithRedirect返回null，React本地登录问题求助

你的代码存在几处可能导致signInWithRedirect返回null的问题，还有一处遗漏的函数定义，下面逐一说明并给出修复方案：

1. getRedirectResult调用时机与Auth初始化不同步 #

使用重定向登录时，Firebase Auth需要完成初始化流程后才能正确获取重定向结果。你当前在组件挂载时立即调用getRedirectResult，但此时Auth实例可能还未完成初始化，导致返回null。同时，onAuthStateChanged监听器的独立触发逻辑，无法很好地配合重定向后的状态同步。

2. 遗漏handleSignOut函数 #

登录成功后渲染的Sign Out按钮绑定了handleSignOut函数，但你未定义该函数，点击后会直接报错，需要补充实现。

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import { auth } from './firebase';
import { GoogleAuthProvider, signInWithRedirect, getRedirectResult, onAuthStateChanged, signOut } from 'firebase/auth';

function App() {
  const [user, setUser] = useState(null);

  // 处理Google登录
  const handleSignIn = async () => {
    try {
      const provider = new GoogleAuthProvider();
      await signInWithRedirect(auth, provider);
    } catch (error) {
      console.error("登录错误: ", error);
    }
  };

  // 补充登出函数实现
  const handleSignOut = async () => {
    try {
      await signOut(auth);
      setUser(null);
    } catch (error) {
      console.error("登出错误: ", error);
    }
  };

  // 合并重定向结果获取与Auth状态监听逻辑
  useEffect(() => {
    const initAuth = async () => {
      try {
        // 优先获取重定向登录结果
        const result = await getRedirectResult(auth);
        if (result) {
          setUser(result.user);
          console.log("重定向登录成功，用户信息:", result.user);
          return;
        }
        
        // 若无重定向结果，监听Auth状态变化
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
          console.log("Auth状态更新，用户:", currentUser);
          setUser(currentUser);
        });

        return unsubscribe;
      } catch (error) {
        console.error("Auth初始化错误:", error);
      }
    };

    initAuth();
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <p>欢迎, {user.displayName}!</p>
          <button onClick={handleSignOut} style={buttonStyle}>登出</button>
        </div>
      ) : (
        <button onClick={handleSignIn} style={buttonStyle}>使用Google登录</button>
      )}
    </div>
  );
}

const buttonStyle = {
  display: 'flex',
  alignItems: 'center',
  backgroundColor: '#4285F4',
  color: '#fff',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
  fontSize: '16px',
};

export default App;

额外排查点 #

• 确认firebase.js中的Auth实例初始化正确，必须基于已初始化的Firebase App实例创建：

  // firebase.js 正确示例
  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  
  const firebaseConfig = {
    // 你的Firebase配置信息
  };
  
  const app = initializeApp(firebaseConfig);
  export const auth = getAuth(app);
  

• 检查浏览器是否阻止第三方Cookie：Google登录重定向依赖第三方Cookie，部分浏览器的隐私模式或增强跟踪保护会拦截它，导致登录失败。可以尝试在普通模式下测试，或在浏览器设置中允许相关站点的第三方Cookie。
• 再次确认Firebase控制台中，Authentication -> Sign-in method -> Authorized domains已添加你的本地开发地址（如http://localhost:3000）。

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