如何在 React 应用程序中处理 AWS Cognito 刷新令牌

Question

我的 React 应用程序使用 AWS Cognito 在用户池中创建用户，但目前成功授权会话后具有无限的生命周期。现在我需要通过 Cognito Refresh Token 实现检查会话。

在服务器端（Nest.js），我使用“amazon-cognito-identity-js”。成功创建用户后，他们将通过电子邮件/密码和 MFA 代码执行登录流程。 Cognito 服务返回 accessToken、refreshToken 和 idToken，但我不知道如何在客户端处理它。 React 应用程序应该做什么来检查令牌是否有效并保持会话活动？请指教！

Answer 1

我知道您说过您已经实现了用户创建/登录。然而，老实说，最好的解决方案是安装 Amplify UI 包并让它完成所有这一切。他们花了数年时间处理边缘情况并确保代码可靠且安全。只需安装 Amplify UI 库，为您的 Cognito 用户池配置 Amplify，然后包装所有需要用户使用

Authenticator

组件直接登录或使用

withAuthenticator

高阶组件登录的组件。

这将为您提供用户创建和登录流程（包括使用 QR 代码创建 MFA），并且还可以根据需要处理填充用户对象并存储/刷新 accessToken。 示例代码在这里。

Answer 2

对于那些希望在 React 项目中继续使用 sdk“amazon-cognito-identity-js”实施的人来说，以下是如何刷新 cognito 用户会话（刷新令牌）。

import {
    CognitoUser,
    CognitoUserPool,
    CognitoUserSession,
    ICognitoUserPoolData } from "amazon-cognito-identity-js";
import { COGNITO_CLIENT_ID, COGNITO_USER_POOL_ID } from "../../constants";

const userPoolData: ICognitoUserPoolData = {
    UserPoolId: COGNITO_USER_POOL_ID,
    ClientId: COGNITO_CLIENT_ID
};

export const userPool = new CognitoUserPool(userPoolData);

export function getSessionService() {
  const cognitoUser = userPool.getCurrentUser();
  return new Promise<CognitoUserSession>((resolve, reject) => {
    if (!cognitoUser) {
      reject(new Error("No user found"));
      return;
    }
    cognitoUser.getSession((err: Error | null, session: CognitoUserSession | null) => {
      if (err) {
        reject(err);
        return;
      }
      if (!session) {
        reject(new Error("No session found"));
        return;
      }
      resolve(session);
    })
  })
}

export function refreshTokenService(email: string) {
  return new Promise(async (resolve, reject) => {
    const cognitoUserSession = await getSessionService();
    const refreshToken  = cognitoUserSession.getRefreshToken();
    const cognitoUser = new CognitoUser({
      Username: email,
      Pool: userPool,
      Storage: window.localStorage
    });
    cognitoUser.refreshSession(refreshToken, (err, result) => {
      console.log({err, result})
      if (err) {
        reject(err)
        return
      }
      resolve(result);
    });
  });
}