React 应用程序中的 Google OAuth 登录问题 - 适用于本地主机，但不适用于域服务器

Question

我在 React 应用程序中遇到 Google OAuth 登录问题。身份验证过程在本地主机上完美运行，但是当部署到域服务器（托管在 Vercel 上）时，登录不成功。我已经验证了以下内容：

1. Google 控制台配置：

   • Google Console 中的 JavaScript 来源和授权 URL 已为我的域正确设置。

2 网络状态：

• 尝试在域服务器上使用 Google 登录时，网络状态显示状态 200 响应。

---

以下是相关代码片段：

handleGoogleLogin = async (credentialResponse) => {
    var decoded = jwtDecode(credentialResponse.credential);
    const user = {
      name: decoded.name, // Customize based on Google's response
      email: decoded.email,
      sub:decoded.sub,
      

     // Customize based on Google's response
      // Add more fields as needed
    };

    try {
      // Check if the response structure matches your expectations
     
     
        // Store the user data in your MongoDB database using an API endpoint
       
        const res = await axios.post(`/api/v1/auth/google`, { user })
        console.log("res",res.data);
        console.log(res.data.token)
        if (res && res.data.success) {
          toast.success('Logged in successfully');
          setAuth({
            ...auth,
            user: res.data.user,
            token:res.data.token, // Update the user field correctly
          });
         console.log("res",auth);
          navigate(location.state || '/');
          localStorage.setItem('auth', JSON.stringify(res.data));
        } else {
          toast.error(res.data.message);
        }
    
    } catch (error) {
      console.log('eer',error);
      toast.error('Something went wrong');
    }
  }; <GoogleOAuthProvider  clientId="cliend id">
  <GoogleLogin
                    onSuccess={handleGoogleLogin}
                    rememberMe={true} 
                    onError={() => {
                      console.log('Login Failed');
                    }}
                  />
    </GoogleOAuthProvider>

此外，该应用程序构建在 MERN 堆栈上，托管在 Vercel 上，并且

.env

文件中的环境变量已正确配置。

我已经彻底检查了以上几方面，一切似乎都正常。但是，登录在域服务器上不起作用。任何有关可能导致此问题的原因的指导或建议将不胜感激。

谢谢！

Answer 1

您是否已将域添加到 Firebase 控制台？ 如果没有，您需要添加您的域以允许身份验证。