a client side utilities for init firebase auth, firestore, firebase storage

clientApp.js

'use client';

import { initializeApp, getApps } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { getStorage, connectStorageEmulator } from "firebase/storage";
import { firebaseConfig } from "./config"; // replace with your firebase config

const init = () => {
  const appNotAvailable = getApps().length === 0
  const inDevMode = process.env.NODE_ENV === 'development'

  const firebaseApp = appNotAvailable ? initializeApp(firebaseConfig) : getApps()[0]
  const auth = getAuth(firebaseApp)
  const db = getFirestore(firebaseApp)
  const storage = getStorage(firebaseApp)
  if (appNotAvailable && inDevMode) {
    const emuHost = process.env['NEXT_PUBLIC_FIREBASE_EMULATOR_HOST'] || '127.0.0.1'

    const autherPort = process.env['NEXT_PUBLIC_FIREBASE_AUTH_EMULATOR_PORT'] || 9099
    connectAuthEmulator(auth, `http://${emuHost}:${autherPort}`)

    const dbPort = process.env['NEXT_PUBLIC_FIREBASE_FIRESTORE_EMULATOR_PORT'] || 8080
    connectFirestoreEmulator(db, emuHost, dbPort)

    const storagePort = process.env['NEXT_PUBLIC_FIREBASE_STORAGE_EMULATOR_PORT'] || 9199
    connectStorageEmulator(storage, emuHost, storagePort)
  }
  return { firebaseApp, auth, db, storage };
}

export const { firebaseApp, auth, db, storage } = init();