react-google-login弃用后的替代包及react-oauth/google登录问题修复

替代包说明 #

react-google-login弃用后，官方推荐的OAuth 2.0替代包是@react-oauth/google，这是谷歌官方维护的React OAuth 2.0集成方案。

登录按钮点击后弹窗消失的问题修复 #

你的代码存在三个关键问题，以下是具体修改步骤：

1. 添加全局GoogleOAuthProvider包裹 #

新的@react-oauth/google要求在应用根组件外层添加GoogleOAuthProvider，否则登录功能无法正常初始化。在你的根组件（如App.js）中修改：

import { GoogleOAuthProvider } from '@react-oauth/google';

function App() {
  return (
    <GoogleOAuthProvider clientId={process.env.REACT_APP_G_CLIENT_ID}>
      {/* 这里放置你的应用路由或Login组件 */}
    </GoogleOAuthProvider>
  );
}

export default App;

2. 调整回调函数中的Token获取逻辑 #

新包的GoogleLogin成功回调返回的结构与旧包不同，原tokenId字段已替换为credential，修改googleSuccess函数：

const googleSuccess = async (res) => {
  // 替换res?.tokenId为res?.credential
  const token = res?.credential;
  try {
    await axios.post("/api/auth/google_signing", { tokenId: token });
    localStorage.setItem("_appSignging", true);
    dispatch({ type: "SIGNING" });
  } catch (err) {
    toast(err.response.data.msg, {
      className: "toast-failed",
      bodyClassName: "toast-failed",
    });
  }
};

3. 移除废弃的cookiePolicy参数 #

cookiePolicy参数在新包中已被移除，直接从GoogleLogin组件中删除该属性：

<GoogleLogin
  clientId={process.env.REACT_APP_G_CLIENT_ID}
  render={(renderProps) => (
    <button
      className="btn-alt"
      onClick={renderProps.onClick}
      disabled={renderProps.disabled}
    >
      sign in <FcGoogle />
    </button>
  )}
  onSuccess={googleSuccess}
  onFailure={googleError}
/>

额外注意事项 #

• 确保环境变量REACT_APP_G_CLIENT_ID已正确配置，且对应的谷歌OAuth客户端ID已在谷歌云平台中设置了正确的授权域名
• 如果仍有问题，检查浏览器控制台是否有报错信息，常见问题包括客户端ID不匹配、授权域名未添加等

内容的提问来源于stack exchange，提问作者Sajjad Hemati Nourani