Amplify UI React v6中fetchAuthSession返回undefined问题咨询

核心问题分析与修复步骤 #

1. 修正 Amplify 配置的位置 #

你的代码中Amplify.configure放在组件内部，每次组件渲染都会重新执行配置，这会导致Auth模块状态紊乱，是会话获取失败的常见原因。必须将配置移到组件外部，确保全局只初始化一次：

import React, { useState, useEffect } from "react";
import { Authenticator, useAuthenticator } from "@aws-amplify/ui-react";
import { fetchAuthSession } from "aws-amplify/auth";
import { Amplify } from "aws-amplify";

// 全局配置，仅执行一次
Amplify.configure({
  Auth: {
    Cognito: {
      userPoolClientId: "<client id>",
      userPoolId: "<user pool id>",
    },
  },
});

const App = () => {
  // ... 剩余组件逻辑
};

2. 确保 fetchAuthSession 正确获取令牌 #

默认情况下fetchAuthSession可能不会主动刷新令牌，需要显式传入forceRefresh: true参数，确保获取有效且最新的会话数据：

const printAccessTokenAndIdToken = async () => {
  try {
    const session = await fetchAuthSession({ forceRefresh: true }); 
    console.log("Access Token:", session?.tokens?.accessToken.toString()); 
    console.log("ID Token:", session?.tokens?.idToken?.toString());
  } catch (e) {
    console.log(e);
  }
};

3. 直接使用 useAuthenticator 提供的会话（更简便方案） #

Amplify UI 的useAuthenticator Hook 已经内置了会话信息，无需额外调用fetchAuthSession，可以直接从上下文获取：

const { user, signOut, session } = useAuthenticator((context) => [context.user, context.session]);

useEffect(() => {
  if (session?.tokens) {
    console.log("Access Token:", session.tokens.accessToken.toString());
    console.log("ID Token:", session.tokens.idToken.toString());
  }
}, [session]);

4. 修复 Authenticator 子组件渲染问题 #

你的Authenticator子组件未正确返回JSX元素，可能导致Auth状态同步异常，需修正：

return  (
  <Authenticator
    hideSignUp={true}
    loginMechanisms={["username"]}
    // 若未定义components变量，移除该属性
    // components={components}
  >
    {({ signOut }) => {
      // 必须返回渲染元素
      return <button onClick={signOut}>退出登录</button>;
    }}
  </Authenticator>
);

额外配置检查 #

• 确认Cognito用户池客户端启用了ALLOW_USER_SRP_AUTH认证流程，确保令牌发放功能正常。
• 检查@aws-amplify/ui-react与aws-amplify依赖版本一致，避免版本不兼容导致的状态异常。

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