ReactJS中Google OAuth登录result与token未定义问题求助

核心原因 #

你使用的@react-oauth/google是Google新身份验证流程的封装库，它的onSuccess回调返回的数据结构和旧版react-google-login完全不同。你代码中调用的res?.profileObj和res?.tokenId是旧版库的字段，在新库中不存在，因此导致result和token始终为undefined。

解决方案 #

1. 适配新库的数据结构 #

修改Auth.js中的googleSuccess函数，改用新库的返回字段：

const googleSuccess = async (res) => {
  // 新库中用户信息存在res.user，ID Token存在res.credential
  const result = res.user;
  const token = res.credential;

  try {
    dispatch({ type: 'AUTH', data: { result, token } });
  } catch (error) {
    console.log(error);
  }
};

res.user的结构示例：

{
  name: "用户名",
  email: "用户邮箱",
  picture: "头像URL",
  sub: "用户唯一ID"
}

2. 验证环境变量加载 #

• 确保.env.development中的变量名严格以REACT_APP_开头：REACT_APP_GOOGLE_API_TOKEN=你的客户端ID
• 重启React开发服务器，在App.js中添加console.log(process.env.REACT_APP_GOOGLE_API_TOKEN)确认是否读取到有效值。如果仍为undefined，检查文件是否放在项目根目录，或者是否有拼写错误。

3. 检查Google Cloud Console配置 #

• 进入Google Cloud Console的OAuth 2.0客户端ID配置页面，确保授权JavaScript来源包含你的开发地址（如http://localhost:3000）
• 确保重定向URI配置正确（新流程可能不需要，但如果有回调需求需添加）
• 确认已启用相关API（如People API，部分场景下需要）

4. 修复代码中的其他问题 #

• 补充缺失的Material-UI组件导入：

import { Container, Paper, Button } from '@material-ui/core';
import GoogleIcon from '@material-ui/icons/Google'; // 替换你使用的图标

• 移除多余的</form>标签（代码中只有闭合标签没有开头，会导致DOM结构错误）

修改后的Auth.js核心部分示例 #

// 补充导入
import { Container, Paper, Button } from '@material-ui/core';
import GoogleIcon from '@material-ui/icons/Google';

// ... 其他代码

const googleSuccess = async (res) => {
  const result = res.user;
  const token = res.credential;

  try {
    dispatch({ type: 'AUTH', data: { result, token } });
  } catch (error) {
    console.log(error);
  }
};

// ... 其他代码

return (
  <Container component="main" maxWidth="xs">
    <Paper className={classes.paper} elevation={3}>
      <GoogleLogin
        render={(renderProps) => (
          <Button
            className={classes.googleButton}
            color="primary"
            fullWidth
            onClick={renderProps.onClick}
            disabled={renderProps.disabled}
            startIcon={<GoogleIcon />}
            variant="contained"
          >
            Google Sign In
          </Button>
        )}
        onSuccess={googleSuccess}
        onFailure={googleFailure}
        cookiePolicy="single_host_origin"
      />
    </Paper>
  </Container>
);

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