Update authentication components and add Firebase auth hook

Author: Boopathi

src/app/page.tsx

@@ -12,8 +12,8 @@ import { useToast } from "@/hooks/use-toast";
 import { format } from "date-fns";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Loader2 } from "lucide-react";
-import { auth } from "@/lib/firebase";
-import { onAuthStateChanged, signOut, User as FirebaseUser } from "firebase/auth";
+import { signOut } from "firebase/auth";
+import { auth } from "@/hooks/use-firebase-auth";
 import { API_BASE_URL } from "@/lib/api";
 
 // A more obvious loading animation to show while dynamic components are being downloaded.

src/components/auth/login-modal.tsx

@@ -12,7 +12,7 @@ import { Loader2 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import type { UserRole } from "@/app/types";
 import { API_BASE_URL } from "@/lib/api";
-import { auth } from "@/lib/firebase";
+import { auth } from "@/hooks/use-firebase-auth";
 import { 
   signInWithEmailAndPassword, 
   sendPasswordResetEmail,

src/components/auth/signup-modal.tsx

@@ -11,7 +11,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Loader2 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { API_BASE_URL } from "@/lib/api";
-import { auth } from "@/lib/firebase";
+import { auth } from "@/hooks/use-firebase-auth";
 import { 
   GoogleAuthProvider,
   signInWithPopup

src/hooks/use-firebase-auth.ts

@@ -0,0 +1,25 @@
+
+"use client";
+
+import { useState, useEffect } from 'react';
+import { getAuth, onAuthStateChanged, User as FirebaseUser } from 'firebase/auth';
+import { getFirebaseApp } from '@/lib/firebase';
+
+const app = getFirebaseApp();
+export const auth = getAuth(app);
+
+export function useFirebaseAuth() {
+  const [user, setUser] = useState<FirebaseUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user);
+      setLoading(false);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  return { user, loading };
+}

src/lib/firebase.ts

@@ -1,6 +1,5 @@
 
 import { initializeApp, getApps, getApp, FirebaseApp } from "firebase/app";
-import { getAuth, Auth } from "firebase/auth";
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -12,8 +11,11 @@ const firebaseConfig = {
   measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
-// Initialize Firebase for SSR and client-side
-const app: FirebaseApp = !getApps().length ? initializeApp(firebaseConfig) : getApp();
-const auth: Auth = getAuth(app);
-
-export { app, auth };
+// A function to initialize Firebase App, ensuring it's a singleton.
+// This can be called safely from the client-side.
+export function getFirebaseApp(): FirebaseApp {
+    if (getApps().length) {
+        return getApp();
+    }
+    return initializeApp(firebaseConfig);
+}