Amplify signIn成功但currentAuthenticatedUser返回null的问题求助

问题场景 #

开发基于AWS后端的React Native应用，已实现AppStack（登录/注册后进入）和LoginStack（未登录进入）。登录函数执行成功并输出"success"，但Auth.currentAuthenticatedUser()仍返回null，App组件未自动跳转至AppStack。

登录函数代码：

import { Auth } from "aws-amplify";

async function signIn(username, password) {
  try {
    const user = await Auth.signIn(username, password);
    console.log("success");
    return user;
  } catch (error) {
    console.log("error signing in", error);
  }
}

export default signIn;

App组件代码：

import { NavigationContainer } from "@react-navigation/native";
import { Amplify, Auth, Hub } from "aws-amplify";
import awsExports from "./src/aws-exports";
import { useState, useEffect } from "react";

import AppNavigator from "./AppNavigator";
import LoginNavigator from "./LoginNavigator";

Amplify.configure(awsExports);

export default function App() {
  const [user, setUser] = useState(undefined);

  const checkUser = async () => {
    const authUser = await Auth.currentAuthenticatedUser({ bypassCache: true });
    setUser(authUser);
  };
  useEffect(() => {
    checkUser();
  }, []);

  return (
    <NavigationContainer>
      {user ? <AppNavigator /> : <LoginNavigator />}
    </NavigationContainer>
  );
}

原因分析 #

1. 仅初始化检查用户状态：App组件的useEffect仅在挂载时执行一次checkUser，登录成功后未触发重新检查，无法更新user状态。
2. 未监听Auth状态变化：Amplify Auth操作（如signIn）会通过Hub发布事件，未监听这些事件则无法实时感知用户登录状态变化。
3. 未处理未认证错误：Auth.currentAuthenticatedUser()在用户未登录时会抛出错误，原代码未捕获该错误，导致user状态始终为undefined。

解决方案 #

1. 修复checkUser函数，处理未认证场景 #

添加try/catch捕获未登录时的错误，明确设置user状态为null：

const checkUser = async () => {
  try {
    const authUser = await Auth.currentAuthenticatedUser({ bypassCache: true });
    setUser(authUser);
  } catch (err) {
    // 未登录时将user设为null
    setUser(null);
  }
};

2. 添加Hub监听，实时同步Auth状态变化 #

在useEffect中监听Auth模块的事件，当用户登录/登出时重新检查用户状态：

useEffect(() => {
  // 初始化检查用户
  checkUser();

  // 监听Auth状态变更事件
  const authListener = Hub.listen('auth', (data) => {
    const { event } = data.payload;
    // 登录或登出时重新检查用户状态
    if (event === 'signIn' || event === 'signOut') {
      checkUser();
    }
  });

  // 组件卸载时移除监听
  return () => authListener();
}, []);

3. 补全React Hooks导入 #

原App组件代码漏了useState和useEffect的导入，需添加：

import { useState, useEffect } from "react";

修改后的完整App组件代码 #

import { NavigationContainer } from "@react-navigation/native";
import { Amplify, Auth, Hub } from "aws-amplify";
import { useState, useEffect } from "react";
import awsExports from "./src/aws-exports";

import AppNavigator from "./AppNavigator";
import LoginNavigator from "./LoginNavigator";

Amplify.configure(awsExports);

export default function App() {
  const [user, setUser] = useState(undefined);

  const checkUser = async () => {
    try {
      const authUser = await Auth.currentAuthenticatedUser({ bypassCache: true });
      setUser(authUser);
    } catch (err) {
      setUser(null);
    }
  };

  useEffect(() => {
    checkUser();

    const authListener = Hub.listen('auth', (data) => {
      const { event } = data.payload;
      if (event === 'signIn' || event === 'signOut') {
        checkUser();
      }
    });

    return () => authListener();
  }, []);

  return (
    <NavigationContainer>
      {user ? <AppNavigator /> : <LoginNavigator />}
    </NavigationContainer>
  );
}

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