fix: log out if left inactive

Author: d-e-v-14

frontend/src/App.jsx

@@ -1,26 +1,90 @@
-import { Routes, Route } from "react-router-dom";
+import { useEffect } from "react";
+import { Routes, Route, useNavigate } from "react-router-dom";
+import { onAuthStateChanged, signOut } from "firebase/auth";
+import { auth } from "../firebase";
+
 import Login from "./pages/login";
 import Manage from "./pages/manage";
 import DashboardPage from "./pages/dashboard";
-import ResponsePage from "./pages/responses"
+import ResponsePage from "./pages/responses";
 import Admin from "./pages/rbac";
 import Schedule from "./pages/scheduling";
 import Create from "./pages/createSlot";
-import Domain from "./pages/domain"
+import Domain from "./pages/domain";
 import Sorry from "./pages/sorry";
 import Round2 from "./pages/round2";
 
 export default function App() {
+  const navigate = useNavigate();
+
+  const ACTIVITY_LIMIT = 20 * 60 * 1000;
+  const LAST_ACTIVE_KEY = "lastActiveTime";
+
+  const updateLastActive = () => {
+    localStorage.setItem(LAST_ACTIVE_KEY, Date.now().toString());
+  };
+
+  const handleLogout = async () => {
+    await signOut(auth);
+    localStorage.removeItem(LAST_ACTIVE_KEY);
+    navigate("/");
+  };
+
+  const checkInactivity = async () => {
+    const lastActive = localStorage.getItem(LAST_ACTIVE_KEY);
+    if (!lastActive) return;
+
+    if (Date.now() - Number(lastActive) >= ACTIVITY_LIMIT) {
+      await handleLogout();
+      alert("You were logged out due to inactivity.");
+    }
+  };
+
+  useEffect(() => {
+    const unsub = onAuthStateChanged(auth, async (user) => {
+      if (user) {
+        const lastActive = localStorage.getItem(LAST_ACTIVE_KEY);
+        if (
+          lastActive &&
+          Date.now() - Number(lastActive) >= ACTIVITY_LIMIT
+        ) {
+          await handleLogout();
+          return;
+        }
+        updateLastActive();
+      } else {
+        localStorage.removeItem(LAST_ACTIVE_KEY);
+      }
+    });
+
+    return () => unsub();
+  }, []);
+
+  useEffect(() => {
+    const events = ["mousemove", "keydown", "click", "touchstart"];
+    events.forEach((e) => window.addEventListener(e, updateLastActive));
+
+    const interval = setInterval(checkInactivity, 60000);
+
+    return () => {
+      events.forEach((e) =>
+        window.removeEventListener(e, updateLastActive)
+      );
+      clearInterval(interval);
+    };
+  }, []);
+
   return (
     <Routes>
       <Route path="/" element={<Login />} />
       <Route path="/admin" element={<Admin />} />
       <Route path="/response" element={<ResponsePage />} />
       <Route path="/dashboard" element={<DashboardPage />} />
       <Route path="/schedule" element={<Schedule />} />
-       <Route path="/create" element={<Create/>} />
-       <Route path="/domain" element={<Domain/>} />
+      <Route path="/create" element={<Create />} />
+      <Route path="/domain" element={<Domain />} />
       <Route path="/manage" element={<Sorry />} />
+      <Route path="/round2" element={<Round2 />} />
     </Routes>
   );
 }

frontend/src/pages/login.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { signInWithPopup, onAuthStateChanged, signOut } from "firebase/auth";
 import { auth, googleProvider } from "../../firebase";
 import { useNavigate } from "react-router-dom";
@@ -7,63 +7,85 @@ export default function Login() {
   const [loggedIn, setLoggedIn] = useState(false);
   const [userInfo, setUserInfo] = useState({ name: "", email: "" });
   const navigate = useNavigate();
+
   const ACTIVITY_LIMIT = 20 * 60 * 1000;
-  const inactivityTimer = useRef(null);
+  const LAST_ACTIVE_KEY = "lastActiveTime";
 
-  const resetTimer = () => {
-    if (!loggedIn) return;
-    clearTimeout(inactivityTimer.current);
-    inactivityTimer.current = setTimeout(
-      () => handleLogout(true),
-      ACTIVITY_LIMIT
-    );
+  const updateLastActive = () => {
+    if (loggedIn) {
+      localStorage.setItem(LAST_ACTIVE_KEY, Date.now().toString());
+    }
   };
 
-  useEffect(() => {
-    const events = ["mousemove", "keydown", "click", "touchstart"];
-    events.forEach((e) => window.addEventListener(e, resetTimer));
-    return () =>
-      events.forEach((e) => window.removeEventListener(e, resetTimer));
-  }, [loggedIn]);
+  const handleLogout = async (auto) => {
+    await signOut(auth);
+    localStorage.removeItem(LAST_ACTIVE_KEY);
+    setLoggedIn(false);
+    if (auto) alert("You were logged out dude.");
+    navigate("/");
+  };
+
+  const checkInactivity = async () => {
+    const lastActive = localStorage.getItem(LAST_ACTIVE_KEY);
+    if (!lastActive) return;
+
+    if (Date.now() - Number(lastActive) >= ACTIVITY_LIMIT) {
+      await handleLogout(true);
+    }
+  };
 
   useEffect(() => {
-    const unsub = onAuthStateChanged(auth, (user) => {
+    const unsub = onAuthStateChanged(auth, async (user) => {
       if (user) {
+        const lastActive = localStorage.getItem(LAST_ACTIVE_KEY);
+        if (
+          lastActive &&
+          Date.now() - Number(lastActive) >= ACTIVITY_LIMIT
+        ) {
+          await signOut(auth);
+          localStorage.removeItem(LAST_ACTIVE_KEY);
+          return;
+        }
+
         setUserInfo({
           name: user.displayName || "",
           email: user.email || ""
         });
         setLoggedIn(true);
-        resetTimer();
+        updateLastActive();
       } else {
         setLoggedIn(false);
         setUserInfo({ name: "", email: "" });
+        localStorage.removeItem(LAST_ACTIVE_KEY);
       }
     });
+
     return () => unsub();
   }, []);
 
+  useEffect(() => {
+    if (!loggedIn) return;
+    const interval = setInterval(checkInactivity, 60000);
+    return () => clearInterval(interval);
+  }, [loggedIn]);
+
+  useEffect(() => {
+    const events = ["mousemove", "keydown", "click", "touchstart"];
+    events.forEach((e) => window.addEventListener(e, updateLastActive));
+    return () =>
+      events.forEach((e) =>
+        window.removeEventListener(e, updateLastActive)
+      );
+  }, [loggedIn]);
 
   const loginWithGoogle = async () => {
-    try {
-      const result = await signInWithPopup(auth, googleProvider);
-      setUserInfo({
-        name: result.user.displayName,
-        email: result.user.email
-      });
-      setLoggedIn(true);
-      resetTimer();
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const handleLogout = async (auto) => {
-    await signOut(auth);
-    setLoggedIn(false);
-    clearTimeout(inactivityTimer.current);
-    if (auto) alert("You were logged out dude.");
-    navigate("/");
+    const result = await signInWithPopup(auth, googleProvider);
+    setUserInfo({
+      name: result.user.displayName,
+      email: result.user.email
+    });
+    setLoggedIn(true);
+    updateLastActive();
   };
 
   const goToDashboard = () => navigate("/dashboard");
@@ -109,67 +131,46 @@ export default function Login() {
                   height="28"
                   viewBox="0 0 48 48"
                 >
-                  <path
-                    fill="#FFC107"
-                    d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
-                  />
-                  <path
-                    fill="#FF3D00"
-                    d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
-                  />
-                  <path
-                    fill="#4CAF50"
-                    d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
-                  />
-                  <path
-                    fill="#1976D2"
-                    d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
-                  />
+                  <path fill="#FFC107" d="M43.611,20.083H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20c0-1.341-0.138-2.65-0.389-3.917z"/>
+                  <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4c-7.682,0-14.344,4.337-17.694,10.691z"/>
+                  <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
+                  <path fill="#1976D2" d="M43.611,20.083H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571l6.19,5.238C36.971,39.205,44,34,44,24c0-1.341-0.138-2.65-0.389-3.917z"/>
                 </svg>
-                <span className="text-base sm:text-lg">
-                  Continue with Google
-                </span>
+                <span className="text-base sm:text-lg">Continue with Google</span>
               </div>
             </button>
           )}
 
           {loggedIn && (
-            <div className="mt-7 bg-black/60 border border-yellow-700/30 p-4 rounded-2xl flex items-center gap-4">
-              <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-yellow-400 flex items-center justify-center text-black font-bold">
-                {userInfo.name
-                  ? userInfo.name.charAt(0).toUpperCase()
-                  : "U"}
-              </div>
-              <div className="text-left">
-                <div className="text-white font-semibold">
-                  {userInfo.name}
+            <>
+              <div className="mt-7 bg-black/60 border border-yellow-700/30 p-4 rounded-2xl flex items-center gap-4">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-yellow-400 flex items-center justify-center text-black font-bold">
+                  {userInfo.name
+                    ? userInfo.name.charAt(0).toUpperCase()
+                    : "U"}
                 </div>
-                <div className="text-xs sm:text-sm text-yellow-100/70 break-all">
-                  {userInfo.email}
+                <div className="text-left">
+                  <div className="text-white font-semibold">{userInfo.name}</div>
+                  <div className="text-xs sm:text-sm text-yellow-100/70 break-all">
+                    {userInfo.email}
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
 
-          <button
-            onClick={goToDashboard}
-            disabled={!loggedIn}
-            className={`mt-6 w-full py-3 rounded-xl text-base sm:text-lg font-semibold transition shadow-lg ${
-              loggedIn
-                ? "bg-black/80 border border-yellow-400 text-white hover:bg-black/70"
-                : "bg-neutral-800 text-neutral-400 cursor-not-allowed"
-            }`}
-          >
-            Go to Dashboard
-          </button>
+              <button
+                onClick={goToDashboard}
+                className="mt-6 w-full py-3 rounded-xl text-base sm:text-lg font-semibold bg-black/80 border border-yellow-400 text-white hover:bg-black/70 transition shadow-lg"
+              >
+                Go to Dashboard
+              </button>
 
-          {loggedIn && (
-            <button
-              onClick={() => handleLogout(false)}
-              className="mt-4 w-full py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold text-base sm:text-lg shadow-md transition"
-            >
-              Logout
-            </button>
+              <button
+                onClick={() => handleLogout(false)}
+                className="mt-4 w-full py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold text-base sm:text-lg shadow-md transition"
+              >
+                Logout
+              </button>
+            </>
           )}
 
           <div className="mt-6 text-xs sm:text-sm text-yellow-100/60">