React中Google OAuth2弹窗自动关闭及onNonOAuthError触发时机咨询

核心问题解答：onNonOAuthError的常见触发场景 #

• 域名/跨域配置错误：当应用域名未正确配置到Google OAuth凭据中，或者配置的域名与实际运行域名存在差异（比如带www和不带www、HTTP/HTTPS协议不匹配），会导致登录弹窗无法与父页面正常通信，触发该错误。
• 弹窗通信被拦截：浏览器的弹窗拦截规则、页面的CSP（内容安全策略）限制了Google登录弹窗与父页面的postMessage通信，导致授权结果无法传递，触发非OAuth错误。
• 页面流程中断：登录过程中页面被刷新、跳转，或者页面存在脚本错误、第三方插件冲突，导致登录回调逻辑无法正常执行，触发该回调。
• 库内部逻辑异常：@react-oauth/google库在处理登录流程时，出现OAuth协议流程之外的内部错误，比如状态值验证失败、本地存储操作异常等。

结合你的场景补充分析 #

你的staging环境正常但生产环境异常，优先排查以下点：

1. 核对Google凭据中生产环境的「已授权JavaScript来源」和「已授权重定向URI」，确保完全匹配实际域名（只需填写根域名，比如https://www.spresssong.com，不需要带后续路径）。
2. 检查生产环境的CSP配置，确认允许加载accounts.google.com的iframe，且允许跨域postMessage通信。
3. 在生产环境浏览器控制台查看onNonOAuthError打印的具体错误信息，能精准定位问题根源。

你使用的认证Hook代码 #

const googleLogin = useGoogleLogin({
  onSuccess: async tokenResponse => {
    const userInfo = await axios
      .get('https://www.googleapis.com/oauth2/v3/userinfo', {
        headers: { Authorization: `Bearer ${tokenResponse.access_token}` },
      })
      .then(res => res.data);

    
    let role = '';
    if(window.location.pathname.split('/')[1] === 'customer'){
      role = 'Customer';
    }
    else if(window.location.pathname.split('/')[1] === 'artist') {
      role = 'Artist';
    }
    else if(window.location.pathname.split('/')[1] === 'finance') {
      role = 'Finance';
    }
    else if(window.location.pathname.split('/')[1] === 'idol') {
      role = 'Idol';
    }
    OAuthSignin({email: userInfo.email, role})
  },
  onError: (e) => {
    console.log(e)
  },
  onNonOAuthError: (err) => {
    console.log(err);
  },
});

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