Authentication in React App - Typescript

auth.tsx

import * as React from 'react';
import { client } from '../utils/httpClient';

type User = {
  _id: string;
  name: string;
  email: string;
  photo: string;
  credits: number;
} | null;

type State = {
  user: User;
  logout(): void;
  loading: boolean;
};

const AuthContext = React.createContext<State | undefined>(undefined);
AuthContext.displayName = 'AuthContext';

export const AuthProvider: React.FC = (props) => {
  const [user, setUser] = React.useState<User>(null);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    async function fetchUser() {
      setLoading(true);

      try {
        const user = await client('api/current_user');
        setUser(user);
        setLoading(false);
      } catch (error) {
        console.error(error);
        setUser(null);
        setLoading(false);
      }
    }

    fetchUser();
  }, []);

  const logout = React.useCallback(() => {
    client('api/logout').then(() => setUser(null));
  }, []);

  const value = React.useMemo(
    () => ({ user, loading, logout }),
    [user, loading, logout],
  );

  return <AuthContext.Provider value={value} {...props} />;
};

export const useAuth = () => {
  const context = React.useContext(AuthContext);

  if (context === undefined) {
    throw new Error('useAuth must be used within a AuthProvider');
  }

  return context;
};