feat: enhance authentication flow in Home component with role validation and loading spinner

Author: akarsh911

src/pages/Home.tsx

@@ -1,21 +1,48 @@
-import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
+import { signInWithPopup, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
 import { auth, db } from "../firebase";
-import { doc, getDoc} from "firebase/firestore";
+import { doc, getDoc } from "firebase/firestore";
 import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import type { User } from "firebase/auth";
 import DashboardLayout from "../component/DashboardLayout";
-import { getAuth, onAuthStateChanged } from "firebase/auth";
+import { Spinner } from "react-bootstrap";
 import "../component/Home.css";
 
 
 
 const Home = () => {
   const navigate = useNavigate();
   const [user, setUser] = useState<User | null>(null);
+  const [checking, setChecking] = useState(true);
 
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(getAuth(), (u) => setUser(u));
+    // Subscribe to auth state and validate user role from Firestore.
+    const unsubscribe = onAuthStateChanged(auth, async (u) => {
+      setUser(u);
+      if (u) {
+        try {
+          const adminRef = doc(db, "users", u.uid);
+          const adminSnap = await getDoc(adminRef);
+          if (!adminSnap.exists()) {
+            // Not an admin user in our DB — sign out and block access
+            await auth.signOut();
+            setUser(null);
+            // don't navigate here; let UI show sign-in after checking
+            alert("You are not authorized to access this admin panel.");
+          } else {
+            const userData = adminSnap.data();
+            if (userData && userData.role==="user") {
+              await auth.signOut();
+              setUser(null);
+              alert("You are not authorized to access this admin panel.");
+            }
+          }
+        } catch (err) {
+          console.error("Error validating user:", err);
+        }
+      }
+      setChecking(false);
+    });
     return () => unsubscribe();
   }, []);
 
@@ -43,7 +70,7 @@ const Home = () => {
         const userData = adminSnap.data();
         const validRoles = ["admin", "event-admin", "event-coordinator", "outreach-admin", "outreach-member","finance"];
 
-        if (!validRoles.includes(userData.role) || userData.disabled) {
+        if (!validRoles.includes(userData.role)) {
           await auth.signOut();
           alert("You are not authorized to access this admin panel.");
           return;
@@ -56,6 +83,17 @@ const Home = () => {
     }
   };
 
+  if (checking) {
+    return (
+      <div className="home-container">
+        <div className="login-card text-center">
+          <Spinner animation="border" />
+          <p className="mt-2">Checking authentication...</p>
+        </div>
+      </div>
+    );
+  }
+
   if (!user) {
     return (
       <div className="home-container">

src/utils/backend.ts

@@ -3,7 +3,7 @@ import type { UserModel } from '../models/UserModel';
 import type { Event } from '../models/Event';
 import type { TeamMember } from '../models/teamRegModels';
 
-const BACKEND_URL =  'https://api.saturnalia.in';
+const BACKEND_URL =  import.meta.env.VITE_REACT_APP_BACKEND_URL;
 const UPLOAD_PASSWORD = import.meta.env.VITE_UPLOAD_PASSWORD;
 const EMAIL_PASSWORD = import.meta.env.VITE_EMAIL_PASSWORD;