React中AWS Amplify+Cognito+Google登录后登出失效问题

在React应用中使用AWS Amplify实现Google账号登录后，执行登出操作再次登录时，系统会直接沿用之前的Google会话跳转回应用，无需重新输入账号密码。尝试了多种方案均无效，现提供正确的解决方案：

之前方案的问题分析 #

• 方案1：Auth.signout()仅清除Amplify本地会话，未触发Google第三方会话的登出，导致浏览器仍保留Google登录状态
• 方案2：通过fetch调用Cognito登出接口不符合要求，该接口需要浏览器跳转处理（而非AJAX请求），且Cognito的logout接口为GET请求，POST方式会触发CORS问题，同时需确保注销URL已在Cognito客户端配置
• 方案3：直接跳转Google登出链接未处理Cognito会话，且无法彻底清除与Cognito绑定的Google授权会话

正确登出流程 #

需结合Amplify本地会话清除+Cognito登出跳转，彻底清除Amplify、Cognito及Google三方会话：

1. 清除Amplify本地会话：调用Auth.signOut并传入global: true参数，清除本地存储和相关cookie
2. 跳转Cognito登出URL：通过浏览器跳转至Cognito的logout端点，该端点会自动触发Google登出，并最终重定向回应用登录页

代码实现

const handleLogout = async () => {
  // 清除Amplify本地会话
  await Auth.signOut({ global: true });

  // 替换为你的实际配置参数
  const cognitoDomain = "your-cognito-domain.auth.region.amazoncognito.com";
  const clientId = "your-cognito-client-id";
  const logoutRedirectUri = "http://your-app-domain/login"; // 需在Cognito客户端配置的注销URL

  // 构造Cognito登出URL
  const logoutUrl = `https://${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${logoutRedirectUri}`;

  // 跳转至登出页面完成会话清除
  window.location.href = logoutUrl;
};

关键配置说明

在AWS Cognito用户池的应用客户端设置中，必须将logoutRedirectUri添加到注销URL列表中，否则Cognito会拒绝该重定向请求。

注意事项 #

• logoutRedirectUri必须与Cognito配置的注销URL完全一致，包括协议（http/https）、域名、路径
• 必须通过浏览器跳转访问Cognito logout URL，不能使用AJAX请求（否则无法处理第三方会话清除）
• Auth.signOut({ global: true })会清除所有与Amplify相关的会话数据，确保本地状态完全重置

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