Context + useReducer

index.js

import { createContext, useContext, useReducer } from "react";

const initialState = {
  isSigningIn: false,
  isSignedIn: false,
};

const AuthContext = createContext(initialState);

const reducer = (state, action) => {
  switch (action.type) {
    case "SIGNING_IN":
      return { ...state, isSigningIn: true };

    case "SIGNED_IN":
      return { ...state, isSigningIn: false, isSignedIn: true };

    case "SIGNED_OUT":
      return { ...state, isSignedIn: false };

    default:
      throw new Error();
  }
};

export const AuthProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const signIn = () => {
    const { isSignedIn, isSigningIn } = state;
    if (!!isSignedIn || !!isSigningIn) return;

    dispatch({ type: "SIGNING_IN" });
    // await
    dispatch({ type: "SIGNED_IN" });
  };

  const signOut = () => {
    const { isSignedIn } = state;
    if (!isSignedIn) return;

    // await
    dispatch({ type: "SIGNED_OUT" });
  };

  return (
    <AuthContext.Provider
      value={{
        ...state,
        signIn,
        signOut,
      }}
      {...props}
    />
  );
};

export const useAuth = () => useContext(AuthContext);