React Native Web集成Firebase Google OAuth遇auth/network-request-failed错误

核心排查方向 #

1. 检查Firebase Auth域名白名单配置 #

确认Firebase控制台Authentication > 设置 > 授权域中，已添加当前Web项目的域名（比如本地开发的http://localhost:19006、生产环境的实际域名）。即便请求显示成功，未授权的域名会导致Firebase后端拒绝会话持久化，最终onAuthStateChanged返回null。

2. 清除浏览器缓存与Cookie #

浏览器缓存的旧Firebase会话或Cookie可能引发状态异常：

• 打开Chrome DevTools，进入Application > Storage，点击Clear site data
• 重启浏览器后重新测试登录流程

3. 验证Firebase初始化配置 #

对比新项目与当前项目的firebaseConfig，确保：

• apiKey、authDomain、projectId等参数完全一致
• 初始化时未误加额外配置（比如自定义auth设置干扰会话存储）

4. 排查CORS与代理设置干扰 #

若项目使用自定义代理或CORS配置，可能拦截Firebase认证响应：

• 确认Expo项目app.json的web配置中，build或devServer未修改默认跨域设置
• 检查AdBlock、VPN等浏览器插件是否干扰了认证请求的会话写入

5. 调试认证流程时序与参数 #

在代码中添加日志，确认调用逻辑与参数有效性：

// 打印credential与认证结果
console.log('待传入的credential:', credential);
signInWithCredential(auth, credential)
  .then((userCredential) => {
    console.log('登录成功返回:', userCredential);
  })
  .catch((error) => {
    console.error('登录错误详情:', error.code, error.message, error.stack);
  });

// 监听auth状态变化的完整日志
onAuthStateChanged(auth, (user) => {
  console.log('Auth状态更新:', user);
});

查看日志是否存在时序问题（比如错误回调先于状态变化触发），或credential本身格式异常。

6. 修复潜在依赖冲突 #

即便依赖版本一致，当前项目可能存在隐藏冲突：

• 删除node_modules和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）
• 确认安装过程无警告或错误提示

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