React+Firebase项目如何接入Google One Tap登录并关联Firebase Auth

问题根因 #

你遇到的auth/argument-error错误是因为GoogleAuthProvider.credential()方法要求传入idToken和/或accessToken参数，而你直接将Google One Tap返回的完整response对象传入该方法，参数格式不符合要求，导致登录流程中断，因此Firebase的认证状态没有更新，自然不会触发onAuthStateChanged监听函数。

修复方案 #

仅需要调整useGoogleOneTapLogin的onSuccess回调逻辑，从返回的response中提取idToken传入credential方法即可：

useGoogleOneTapLogin({
  onError: error => console.log(error),
  onSuccess: response => {
    console.log(response);
    // 从response中提取idToken，仅传入该字段即可
    const credential = provider.credential(response.credential);
    auth.signInWithCredential(credential)
      .then(result => {
        const { user } = result;
        console.log(user);
      })
      // 建议添加错误捕获，避免异常静默丢失
      .catch(err => console.error('登录失败：', err));
  },
  googleAccountConfigs: {
    client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  }
});

修改完成后，Google One Tap登录流程可以正常执行，Firebase认证状态更新后，你现有代码中的onAuthStateChanged监听会自动触发，不需要额外调整其他认证逻辑。

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