React Context Provider for Firebase

firebase-context.tsx

import {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useState,
} from "react";
import { initializeApp, getApps, getApp, FirebaseApp } from "firebase/app";
import { getFirestore, Firestore } from "firebase/firestore/lite";
import { Auth, getAuth, User } from "firebase/auth";

import { firebaseConfig } from "../config";

type FirebaseContextProps = {
  app: FirebaseApp | undefined;
  firestore: Firestore | undefined;
  auth: Auth | undefined;
  user: User | undefined;
  setUser: (u: User) => void;
};

export const FirebaseContext = createContext<FirebaseContextProps>({
  app: undefined,
  firestore: undefined,
  auth: undefined,
  user: undefined,
  setUser: () => null,
});

export const useFirebase = () => useContext(FirebaseContext);

interface FirebaseProviderProps {
  children: ReactNode;
}

const FirebaseProvider = ({ children }: FirebaseProviderProps) => {
  const [app, setApp] = useState<FirebaseApp>();
  const [firestore, setFirestore] = useState<Firestore>();
  const [auth, setAuth] = useState<Auth>();
  const [user, setUser] = useState<User>();

  useEffect(() => {
    if (getApps().length === 0) {
      setApp(initializeApp(firebaseConfig));
    } else {
      setApp(getApp());
    }
  }, []);

  useEffect(() => {
    if (!app) return;

    setFirestore(getFirestore(app));

    const a = getAuth();

    if (a.currentUser) {
      setUser(a.currentUser);
    }

    setAuth(a);
  }, [app]);

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

    auth.onAuthStateChanged((u) => {
      if (u) setUser(u);
    });
  }, [auth]);

  return (
    <FirebaseContext.Provider value={{ app, firestore, auth, user, setUser }}>
      {children}
    </FirebaseContext.Provider>
  );
};

export default FirebaseProvider;