Feature/auth security route protection refactor

Frontendd/package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@playwright/test": "^1.60.0",
+    "@rolldown/pluginutils": "^1.0.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.2.0",
@@ -51,6 +52,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "ms": "^2.1.3",
     "postcss": "^8.4.47",
     "vite": "^6.0.0",
     "vite-plugin-pwa": "^1.3.0"

Frontendd/src/App.jsx

@@ -3,6 +3,7 @@ import {
   Routes,
   Route,
   Navigate,
+  useLocation,
 } from "react-router-dom";
 import { useEffect, useState } from "react";
 import "./index.css";
@@ -33,6 +34,7 @@ import QRScanner from "./pages/dashboard/QRScanner";
 // Protected Route Component
 const ProtectedRoute = ({ children, allowedRoles }) => {
   const { user, loading } = useAuth();
+  const location = useLocation();
 
   if (loading) {
     return (
@@ -46,10 +48,16 @@ const ProtectedRoute = ({ children, allowedRoles }) => {
   }
 
   if (!user) {
-    return <Navigate to="/login" replace />;
+    return <Navigate to="/login" state={{ from: location }} replace />;
   }
 
-  if (allowedRoles && !allowedRoles.includes(user.role)) {
+  const hasAccess = !allowedRoles || allowedRoles.some(r => {
+    if (r === 'customer' && user.role === 'attendee') return true;
+    if (r === 'attendee' && user.role === 'customer') return true;
+    return r === user.role;
+  });
+
+  if (!hasAccess) {
     return <Navigate to="/" replace />;
   }
 

Frontendd/src/context/AuthContext.jsx

@@ -1,5 +1,6 @@
 import React, { createContext, useState, useEffect, useContext, useRef } from 'react';
 import { API_BASE_URL } from '../config';
+import toast from 'react-hot-toast';
 
 const AuthContext = createContext(null);
 
@@ -18,25 +19,24 @@ export const AuthProvider = ({ children }) => {
             if (response.ok && mountedRef.current) {
                 const userData = await response.json();
                 setUser(userData.user);
-            } else if (!response.ok) {
+            } else if (response.status === 401 || response.status === 403) {
                 localStorage.removeItem('token');
                 if (mountedRef.current) {
                     setUser(null);
                 }
+                toast.error('Session expired. Please log in again.');
             }
         } catch (error) {
-            console.error('Failed to fetch user', error);
-            localStorage.removeItem('token');
-            if (mountedRef.current) {
-                setUser(null);
-            }
+            console.error('Failed to fetch user due to network issue', error);
+            // Do not delete token on network error to allow reconnection
         } finally {
             if (mountedRef.current) {
                 setLoading(false);
             }
         }
     };
 
+
     useEffect(() => {
         let mounted = true;
 

Frontendd/src/context/SocketContext.jsx

@@ -11,31 +11,67 @@ export const useSocket = () => {
 
 export const SocketProvider = ({ children }) => {
   const [socket, setSocket] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [connectionError, setConnectionError] = useState(null);
   const { user } = useAuth();
 
   useEffect(() => {
     let newSocket;
     if (user) {
       newSocket = io(API_BASE_URL, {
         withCredentials: true,
+        transports: ['websocket', 'polling'],
+        reconnection: true,
+        reconnectionAttempts: Infinity,
+        reconnectionDelay: 1000,
+        reconnectionDelayMax: 5000,
+        timeout: 20000,
       });
 
-      newSocket.on('connect', () => {
+      const handleConnect = () => {
+        setIsConnected(true);
+        setConnectionError(null);
         newSocket.emit('user:join', { userId: user._id || user.id });
-      });
+      };
+
+      const handleDisconnect = (reason) => {
+        setIsConnected(false);
+        console.warn('[SocketContext] Disconnected:', reason);
+      };
+
+      const handleConnectError = (error) => {
+        setIsConnected(false);
+        setConnectionError(error.message);
+        console.error('[SocketContext] Connection Error:', error);
+      };
+
+      newSocket.on('connect', handleConnect);
+      newSocket.on('disconnect', handleDisconnect);
+      newSocket.on('connect_error', handleConnectError);
+
+      if (newSocket.connected) {
+        setIsConnected(true);
+      }
 
       setSocket(newSocket);
+    } else {
+      setIsConnected(false);
+      setConnectionError(null);
+      setSocket(null);
     }
 
     return () => {
       if (newSocket) {
+        newSocket.off('connect', handleConnect);
+        newSocket.off('disconnect', handleDisconnect);
+        newSocket.off('connect_error', handleConnectError);
         newSocket.disconnect();
       }
     };
   }, [user]);
 
   return (
-    <SocketContext.Provider value={{ socket }}>
+    <SocketContext.Provider value={{ socket, isConnected, connectionError }}>
       {children}
     </SocketContext.Provider>
   );

Frontendd/src/pages/SignIn.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { motion } from "framer-motion";
 import { Eye, EyeOff } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
@@ -14,6 +14,7 @@ export default function SignIn() {
     const [password, setPassword] = useState('');
     const { login } = useAuth();
     const navigate = useNavigate();
+    const location = useLocation();
 
     const toggleVisibility = () => setIsVisible(!isVisible);
 
@@ -39,7 +40,9 @@ const handleSubmit = async (e) => {
                 id: loadingToast,
             });
 
-            navigate('/');
+            const from = location.state?.from?.pathname || '/';
+            navigate(from, { replace: true });
+
         } else {
             toast.error(data.message || 'Login failed', {
                 id: loadingToast,

Frontendd/src/pages/dashboard/CustomerDashboard.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Calendar, MapPin, Ticket, X, Download, Search, Heart, Calendar, MapPin, Ticket } from 'lucide-react';
+import { Calendar, MapPin, Ticket, X, Download, Search, Heart } from 'lucide-react';
 import { io } from 'socket.io-client';
 import  {Calendar as BigCalendar,momentLocalizer,} from 'react-big-calendar';
 import moment from 'moment';
@@ -47,9 +47,9 @@ export default function CustomerDashboard() {
   const [viewMode, setViewMode] = useState('grid');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedRegistrationId, setSelectedRegistrationId] = useState(null);
-  const [selectedRegistrationId, setSelectedRegistrationId] = useState(null);
   const [highlightedEvents, setHighlightedEvents] = useState({});
   const [searchQuery, setSearchQuery] = useState(() => searchParams.get('q') || '');
+  const debouncedSearch = useDebounce(searchQuery, 500);
   const [selectedCategory, setSelectedCategory] = useState(() => searchParams.get('category') || '');
   const [isFetching, setIsFetching] = useState(false);
   const [registrationsError, setRegistrationsError] = useState('');
@@ -130,34 +130,6 @@ export default function CustomerDashboard() {
     }
   }, [searchParams]);
 
-  const fetchAvailableEvents = useCallback(async () => {
-    try {
-      if (mountedRef.current) setLoading(true);
-      const token = localStorage.getItem('token');
-      const res = await fetch(`${API_BASE_URL}/api/registrations/me`, {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      if (res.ok && mountedRef.current) {
-        const data = await res.json();
-
-        const upcoming = (data.events || []).filter(
-            (evt) => new Date(evt.date) >= new Date()
-        );
-
-      if (mountedRef.current) {
-        setAvailableEvents(upcoming);
-      }
-    }
-    } catch (error) {
-      console.error("Failed to fetch events:", error);
-    } finally {
-      if (mountedRef.current) {
-        setIsFetching(false);
-        setLoading(false);
-      }
-    }
-  }, [searchParams]);
-
   const fetchSavedEvents = useCallback(async () => {
     try {
       const token = localStorage.getItem("token");