feat: Add Local Development Mock Mode for Firebase Auth

Govt-Billing-React/src/firebase/auth.ts

@@ -3,9 +3,16 @@ import {
   signInWithEmailAndPassword,
   signOut,
 } from "firebase/auth";
-import { auth } from "./index";
+import { auth, isConfigured } from "./index";
+
+const MOCK_USER = { uid: "local-dev-user", email: "dev@local.com", displayName: "Local Developer" };
 
 const signUpWithEmailAndPassword = async (email: string, password: string) => {
+  if (!isConfigured) {
+    localStorage.setItem("mockUser", JSON.stringify({ ...MOCK_USER, email }));
+    window.location.reload();
+    return { ...MOCK_USER, email };
+  }
   try {
     const userCredential = await createUserWithEmailAndPassword(
       auth,
@@ -23,6 +30,11 @@ const signUpWithEmailAndPassword = async (email: string, password: string) => {
 };
 
 const loginWithEmailPassword = async (email: string, password: string) => {
+  if (!isConfigured) {
+    localStorage.setItem("mockUser", JSON.stringify({ ...MOCK_USER, email }));
+    window.location.reload();
+    return { ...MOCK_USER, email };
+  }
   try {
     const userCredential = await signInWithEmailAndPassword(
       auth,
@@ -40,6 +52,11 @@ const loginWithEmailPassword = async (email: string, password: string) => {
 };
 
 const logOut = async () => {
+  if (!isConfigured) {
+    localStorage.removeItem("mockUser");
+    window.location.reload();
+    return;
+  }
   try {
     await signOut(auth);
   } catch (error) {

Govt-Billing-React/src/firebase/index.ts

@@ -13,7 +13,13 @@ const firebaseConfig = {
 
 let app: FirebaseApp, auth: Auth, db: Firestore;
 
+const isConfigured = !!firebaseConfig.apiKey;
+
 const initFirebase = () => {
+  if (!isConfigured) {
+    console.warn("Firebase is not configured. Running in local mock mode.");
+    return;
+  }
   if (!app) {
     app = initializeApp(firebaseConfig);
   }
@@ -25,4 +31,4 @@ const initFirebase = () => {
   }
 };
 
-export { initFirebase, app, auth, db };
+export { initFirebase, app, auth, db, isConfigured };

Govt-Billing-React/src/hooks/useUser.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { auth } from "../firebase";
+import { auth, isConfigured } from "../firebase";
 import { User } from "firebase/auth";
 
 export default function useUser() {
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
 
-  const handleUser = (user: User) => {
+  const handleUser = (user: User | null) => {
     if (user) {
       setUser(user);
     } else {
@@ -16,6 +16,14 @@ export default function useUser() {
     setIsLoading(false);
   };
   useEffect(() => {
+    if (!isConfigured) {
+      const mockUserStr = localStorage.getItem("mockUser");
+      if (mockUserStr) {
+        setUser(JSON.parse(mockUserStr));
+      }
+      setIsLoading(false);
+      return;
+    }
     const unsubscribe = auth.onIdTokenChanged(handleUser);
     return () => unsubscribe();
   }, []);