Firebase Authentication provider with next.js

auth.tsx

"use client";

import { getApp, getApps, initializeApp } from "firebase/app";
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  User,
} from "firebase/auth";
import {
  ReactNode,
  createContext,
  useContext,
  useEffect,
  useState,
} from "react";

if (!getApps().length) {
  initializeApp({
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  });
}
const app = getApp();
const auth = getAuth(app);

export async function signIn() {
  await signInWithPopup(auth, new GoogleAuthProvider());
}

export async function signOut() {
  await auth.signOut();
}

const UserContext = createContext<User | null>(null);

export function useUserContext() {
  return useContext(UserContext);
}

export function UserProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  // Unsubscribe when unmount
  useEffect(() => auth.onAuthStateChanged(setUser), []);

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}