AuthContext.tsx

import firebase from "firebase/app";
import { createContext, useContext, useEffect, useState } from "react";

import { LoginPrompt } from "./components/LoginPrompt";

const AuthContext = createContext<firebase.User | null>(null);

export const AuthContextProvider: React.FC = props => {
  const [user, setUser] = useState<firebase.User | null>(null);
  const [loginError, setLoginError] = useState<string | null>(null);

  useEffect(
    () =>
      firebase.auth().onAuthStateChanged(async changeUser => {
        // Reset previous state
        setLoginError(null);

        // Disconnected, will show login prompt
        if (!changeUser) {
          return setUser(changeUser);
        }

        // Log user
        setUser(changeUser);
      }),
    [],
  );

  return user ? <AuthContext.Provider value={user}>{props.children}</AuthContext.Provider> : <LoginPrompt error={loginError} />;
};

export function useAuthContext() {
  return useContext(AuthContext);
}