React应用Firebase谷歌登录弹窗在Heroku自动关闭问题

这种谷歌登录弹窗秒关的问题我碰到过好多次啦，基本都是Firebase的授权域名没配置到位导致的，毕竟本地localhost和Heroku的域名完全不同，Firebase会默认拦截非授权域名的登录请求。给你一步步梳理解决方案：

1. 配置Firebase授权域名（最常见原因） #

• 打开Firebase控制台，找到你的目标项目
• 进入Authentication模块，切换到Sign-in method标签页
• 找到谷歌登录的配置项，下滑到Authorized domains区域
• 点击Add domain，输入你的Heroku应用完整域名（比如yourappname.herokuapp.com），然后保存更改

2. 检查Heroku环境变量的Firebase配置 #

• 确认你在Heroku设置的环境变量里，Firebase的初始化配置是正确的，特别是REACT_APP_FIREBASE_AUTH_DOMAIN要和你Firebase项目的认证域名一致（比如your-project-id.firebaseapp.com）
• 注意：这里的authDomain不是Heroku域名，Heroku域名是要加到上面的授权列表里的

3. 考虑替换登录方式（针对浏览器Cookie限制） #

有些浏览器默认限制第三方Cookie，signInWithPopup方式可能会因为这个被拦截，你可以试试换成signInWithRedirect，兼容性更好：

export function loginWithGoogle() {
  const provider = googleAuthProvider;
  return firebaseAuth().signInWithRedirect(provider)
    .then(() => firebaseAuth().getRedirectResult())
    .then(result => {
      if (result?.user) {
        return saveUser(result.user);
      }
    })
    .catch(error => console.log(error));
}

4. 排查前端代码细节 #

• 确认你的loginWithGoogle函数里没有多余的参数（看你代码里写了email, pw但实际没用到，虽然不影响，但可以删掉避免混淆）
• 检查handleGoogleLogin函数是否正确阻止了默认事件（你代码里有e.preventDefault()，这部分是对的）

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