如何在 React 应用重新启动后保持用户认证？

javascript

2024-03-19 15:30:03

在 React 应用重新启动后保持用户认证

问题

在使用 Firebase 进行用户身份验证的 React Native 应用程序中，用户在应用程序重新启动后可能会遇到认证失效的问题。

原因

此问题通常是由于应用程序未能正确管理用户会话所致。

解决方法

以下是解决此问题并保持用户认证的方法：

1. 使用 useAuth() 钩子管理用户状态

useAuth() 钩子可用于在整个应用程序中管理用户身份验证状态。

import { getAuth, onAuthStateChanged, User } from "firebase/auth";

const auth = getAuth();

export function useAuth() {
  const [user, setUser] = React.useState<User>();

  useEffect(() => {
    const unsubscribeFromAuthStateChanged = onAuthStateChanged(auth, (user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(undefined);
      }
    }, (error) => {
      console.error("Auth state change error:", error);
    });

    return unsubscribeFromAuthStateChanged;
  }, []);

  return {
    user,
  };
}

2. 在导航中使用 useAuth()

export default function RootNavigation() {
  const { user } = useAuth();

  if (user) {
    return <LoggedInStack />;
  } else {
    return <AuthStack />;
  }
}

3. 存储用户会话信息

AsyncStorage.setItem('userToken', user.accessToken);
AsyncStorage.setItem('userExpiration', user.expirationTime);

4. 在应用程序启动时检索用户会话信息

const userToken = await AsyncStorage.getItem('userToken');
const userExpiration = await AsyncStorage.getItem('userExpiration');

if (userToken && userExpiration) {
  const user = await restoreUserFromToken(userToken, userExpiration);
  if (user) {
    setUser(user);
  }
}