Reactive-Resume/src/hooks/useAuthState.js

import { useEffect, useReducer, useState } from 'react';

export default function useAuthState(firebase) {
  const [auth, setAuth] = useState(undefined);

  const [state, dispatch] = useReducer(
    (innerState, action) => {
      switch (action.type) {
        case 'auth_state_changed':
          return {
            ...innerState,
            user: action.user,
            loading: false,
          };
        case 'error':
          return {
            ...innerState,
            error: action.error,
            loading: false,
          };
        default:
          return innerState;
      }
    },
    {
      user: undefined,
      loading: true,
      error: undefined,
    },
  );

  useEffect(() => {
    setAuth(firebase.auth());
  }, [firebase]);

  useEffect(() => {
    if (auth === undefined) return;

    const unsubscribe = auth.onAuthStateChanged(
      (user) => {
        dispatch({ type: 'auth_state_changed', user });
      },
      (error) => {
        dispatch({ type: 'error', error });
      },
    );

    return () => {
      unsubscribe();
    };
  }, [auth]);

  return [state.user, state.loading, state.error];
}