ReactJS中Firebase的signInWithRedirect()函数无法使用问题

针对你遇到的signInWithRedirect失效但signInWithPopup正常的问题，以下是针对性的排查和修复步骤：

1. 确认重定向URI与授权域配置 #

• 进入Firebase控制台，打开认证 → 登录方法 → Google，检查「授权重定向URI」是否包含http://localhost:3000（注意URI必须完全匹配，包括协议、端口和结尾的斜杠）。
• 同时在认证 → 设置 → 授权域中，确保localhost:3000已被添加到列表中。

2. 调整getRedirectResult的调用时机 #

重定向返回应用后，需要立即获取登录结果，而不是手动点击按钮才触发。修改App.jsx，在组件初始化时调用：

import { useEffect } from 'react';
import { signInWithGoogle, signMeOut, check, auth, getRedirectResult } from "./authy";

function App() {
  useEffect(() => {
    // 组件加载时立即检查重定向结果
    const handleRedirect = async () => {
      const result = await getRedirectResult(auth);
      if (result) {
        console.log("登录成功：", result.user);
      }
    };
    handleRedirect();
  }, []);

  return (
    <>
      <button onClick={signInWithGoogle}>Sign In</button>
      <br />
      <button onClick={signMeOut}>Sign out</button>
      <br />
      <button onClick={check}>log</button>
    </>
  );
}

export default App;

同时在authy.js中补充导出：

// ... 现有代码
export const auth = getAuth(app);
export { getRedirectResult };

3. 升级Firebase依赖版本 #

你当前使用的v9.21.0可能存在重定向相关的已知bug，升级到最新版本：

npm install firebase@latest

4. 排查浏览器Cookie限制 #

重定向登录依赖第三方Cookie，部分浏览器默认会阻止：

• 尝试在无痕/隐私模式下测试登录流程
• 打开浏览器Cookie设置，允许localhost和Firebase auth域名的第三方Cookie

5. 简化signInWithGoogle函数 #

由于重定向会直接跳转页面，async/await在这里没有实际作用，修改函数：

export const signInWithGoogle = () => {
  signInWithRedirect(auth, provider);
};

6. 确认Firebase初始化唯一性 #

检查项目中是否存在多次初始化Firebase的代码，确保整个应用只使用同一个auth实例。

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