React自定义域名项目使用Firebase signInWithPopUp登录时出现400错误及auth/invalid-credential异常

问题描述 #

我正在给非Firebase托管的自定义域名React项目集成Firebase Authentication的signInWithPopUp功能，登录弹窗能正常打开并完成登录操作，但之后会出现两个错误：

• 来自Identity Tool Kit的400状态码错误
• 控制台抛出异常：Uncaught (in promise) FirebaseError: Firebase: Failed to verify the signature in SAMLResponse (auth/invalid-credential)

排查与解决方法 #

这种情况我之前做类似项目时也碰到过，核心问题基本都围绕域名授权、回调配置或跨域Cookie设置，咱们一步步来处理：

• 第一步：检查Firebase控制台的授权域名配置
  这是最常见的诱因，打开Firebase控制台的「认证」→「设置」→「授权域名」页面，把你的自定义域名（要带完整协议，比如https://your-custom-domain.com）添加进去。如果是本地开发测试，别忘了把http://localhost:3000这类本地地址也加上，必须精确匹配，不能用*.your-domain.com这种通配符。

• 第二步：确认OAuth第三方登录的回调地址配置
  如果你用的是Google、Facebook这类第三方OAuth登录，要在对应的OAuth提供商控制台里，把回调地址设置为https://your-custom-domain.com/__/auth/handler——这是Firebase Auth处理回调的默认路径，必须确保该地址已经在第三方平台的授权列表里，同时Firebase控制台的对应登录方法（比如Google登录）已经启用。

• 第三步：处理HTTPS与跨域Cookie问题
  现代浏览器对跨域Cookie限制很严格，除了本地localhost调试场景，你的自定义域名必须部署在HTTPS环境下，这样Firebase Auth才能正常在你的域名下设置会话Cookie。另外，在初始化Firebase Auth时，可以显式设置持久化存储为本地存储，避免会话丢失：

  import { getAuth, setPersistence, browserLocalPersistence, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
  
  const auth = getAuth();
  // 先设置持久化策略
  setPersistence(auth, browserLocalPersistence)
    .then(() => {
      const provider = new GoogleAuthProvider();
      return signInWithPopup(auth, provider);
    })
    .catch((error) => {
      console.error("登录出错：", error);
    });
  

• 第四步：深挖400错误的具体细节
  打开浏览器开发者工具的「网络」面板，找到返回400状态码的请求，查看响应体里的详细错误信息。Firebase的400错误通常会给出明确提示，比如「invalid domain」或「unauthorized domain」，根据提示再针对性调整配置就行。

• 额外提醒：别让CDN/反向代理拦截Auth路径
  如果你用了Cloudflare这类CDN或者反向代理服务，要确保没有拦截/__/auth/开头的请求——这个路径是Firebase Auth处理回调的关键通道，必须让它正常转发到Firebase的服务器。

内容来源于stack exchange