添加自定义域名后Firebase认证模拟器Google登录异常问题

核心问题 #

添加自定义域名后，本地模拟器的authDomain被设置为线上自定义域名，导致Google OAuth认证完成后重定向到线上地址，而非本地模拟器的回调地址，进而本地无法捕获登录状态；同时原代码未处理重定向后的认证结果回调。

具体修复步骤 #

• 拆分环境的authDomain配置
  本地开发时，将firebaseConfig中的authDomain临时改回Firebase默认域名（[你的项目ID].firebaseapp.com），生产环境再使用自定义域名。也可以通过环境变量自动切换，比如：

  const firebaseConfig = {
    // 其他配置
    authDomain: process.env.NODE_ENV === 'development' 
      ? '[项目ID].firebaseapp.com' 
      : 'your-custom-domain.com'
  };
  

• 添加本地回调URI到Google OAuth凭据
  进入Google Cloud控制台的OAuth 2.0凭据页面，为对应的客户端ID添加本地模拟器的回调地址：http://localhost:[你的模拟器端口]/__/auth/handler（比如默认端口5000对应http://localhost:5000/__/auth/handler）。

• 补充重定向结果处理逻辑
  signInWithRedirect的then回调在页面重定向后不会触发，必须在页面初始化时调用getRedirectResult来获取认证结果：

  // 页面加载时执行，处理重定向后的登录结果
  getRedirectResult(auth)
    .then((result) => {
      if (result?.user) {
        set(child(firebaseRef, `users/${result.user.uid}`), {
          email: result.user.email,
          "last-login": serverTimestamp()
        });
      }
    })
    .catch((error) => {
      console.error('Redirect Result Error:', error);
    });
  

  原代码中的then回调仅适用于非重定向场景，重定向后页面刷新，该逻辑不会执行，必须通过getRedirectResult处理。

• 确认Firebase授权域名包含本地地址
  在Firebase控制台的「认证」->「设置」->「授权域名」中，添加localhost（或具体的localhost:[端口]），确保本地域名被允许进行认证操作。

为什么之前无自定义域名时正常？ #

未添加自定义域名时，authDomain使用Firebase默认域名，Google OAuth凭据中已自动包含默认的本地回调地址，模拟器能正确接收重定向后的认证结果；切换为自定义域名后，回调地址指向线上，本地模拟器无法捕获状态。

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