auth-context-test.tsx

export const AuthProvider: FunctionComponent<AuthProviderProps> = (props) => {
  const { children } = props;

  const [token, setToken] = useLocalStorage<string | null>({
    key: 'auth.token',
    defaultValue: null,
    getInitialValueInEffect: true,
  });

  const [user, setUser] = useLocalStorage<UsersMeResponse | null>({
    key: 'auth.user',
    defaultValue: null,
    getInitialValueInEffect: true,
  });

  useEffect(() => {
    if (token) {
      requestUsersMe()
        .then((response) => setUser(response))
        .catch(() => {
          setUser(null);
          setToken(null);
        });
    }
  }, [token]);

  const login = useCallback((t: string) => {
    setToken(t);
  }, []);

  const logout = useCallback(() => {
    setToken(null);
    setUser(null);
  }, []);

  return <AuthContext.Provider value={{ user, token, login, logout }}>{children}</AuthContext.Provider>;
};