React项目中AWS Cognito集成Google登录后无法登出的问题

问题核心：Cognito的OAuth会话Cookie未被清除，导致点击登录按钮时直接跳过Google账号选择，自动完成登录。以下是完整的解决步骤：

1. 实现正确的Cognito登出逻辑 #

Cognito提供了专门的logout端点，用于清除自身会话Cookie并触发身份提供商（Google）的登出。创建登出函数如下：

const handleLogout = () => {
  // 清除localStorage中存储的用户信息（根据你实际的存储key调整）
  localStorage.removeItem('userInfo');
  localStorage.removeItem('idToken');

  // 替换为你的Cognito配置
  const cognitoDomain = "你的Cognito域名"; // 例如 'myapp.auth.us-west-2.amazoncognito.com'
  const clientId = "你的Cognito客户端ID";
  const logoutUri = encodeURIComponent("http://localhost:3000/"); // 登出后跳转的地址，必须在Cognito客户端的注销URL中配置

  // 构造登出URL
  const logoutUrl = `https://${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${logoutUri}`;
  
  // 跳转到Cognito登出页面，完成后自动重定向到logoutUri
  window.location.href = logoutUrl;
};

关键配置要求 #

• 必须在Cognito控制台的App客户端设置中，将logoutUri添加到注销URL列表中，否则Cognito会拒绝重定向请求。

2. 强制Google显示账号选择页 #

即使清除了Cognito会话，Google可能仍保留用户会话，导致直接登录。可以在登录请求的URL中添加prompt=login参数，强制Google显示账号选择界面：

修改你的signUpWithGoogle函数：

const signUpWithGoogle = () => {
  const cognitoDomain = "你的Cognito域名";
  const responseType = "code";
  const clientId = "你的Cognito客户端ID";
  const redirectUri = encodeURIComponent("http://localhost:3000/");
  const identityProvider = "Google";

  // 添加prompt=login参数
  const signUpUrl = `https://${cognitoDomain}/oauth2/authorize?identity_provider=${identityProvider}&response_type=${responseType}&client_id=${clientId}&redirect_uri=${redirectUri}&prompt=login`;

  window.location.href = signUpUrl;
};

3. 验证登出效果 #

点击登出按钮后：

• Cognito会清除自身域名下的会话Cookie（如CognitoIdentityServiceProvider.<clientId>.session等）
• 重定向到指定的logoutUri
• 再次点击Google登录按钮时，会强制显示Google账号选择界面，不会自动登录

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