Add auth-guard to prevent user from unauthorised back-tracking after log out

Author: FooChao

ai/usage-log.md

@@ -361,4 +361,37 @@ Request to generate email regex validation.
 
 ---
 
+## Entry 12
+
+# Date/Time:
+2025-09-16 21:00
+
+# Tool:
+GitHub Copilot (model: Claude Sonnet 4)
+
+# Prompt/Command:
+Request to create a simple client-side auth guard that prevents browser back navigation to cached protected pages after logout.
+
+# Output Summary:
+- Created AuthGuard component (/app/components/layout/AuthGuard.tsx) for layout-level protection
+- Implemented pathname-based token checking using Next.js usePathname hook
+- Added immediate redirect to login when no token found on protected routes
+- Integrated AuthGuard into root layout.tsx for automatic protection on all pages
+- Enhanced middleware with cookie clearing on redirects for complete logout state
+- Combined server-side cache control headers with client-side token verification
+
+# Action Taken:
+- [ ] Accepted as-is
+- [x] Modified
+- [ ] Rejected
+
+# Author Notes:
+- Validated AuthGuard catches browser back navigation edge case after logout
+- Confirmed minimal performance impact with simple token existence check
+- Security implications: client-side protection complements server-side middleware
+- UX improvements: immediate redirect prevents brief flash of protected content
+- Maintainability: simple, reusable component for future auth requirements
+
+---
+
 

frontend/src/app/components/auth/LoginComponent.tsx

@@ -127,7 +127,7 @@ export default function LoginForm() {
               </div>
             </div>
 
-            <div className="flex justify-center ">
+            <div className="flex justify-center mt-5">
               <Button onClick={handleLogin} className="w-full">
                 Login
               </Button>

frontend/src/app/components/layout/AuthGuard.tsx

@@ -0,0 +1,91 @@
+/**
+ * AI Assistance Disclosure:
+ * Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-16
+ * Purpose: To create a simple client-side auth guard that prevents browser back navigation to cached protected pages after logout.
+ * Author Review: I validated correctness, security, and performance of the code.
+ * 
+ */
+
+/**
+ * Simple client-side auth guard that checks for token on page navigation.
+ * This catches cases where browser back button bypasses middleware cache controls.
+ */
+
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { getToken } from "@/services/userServiceCookies";
+
+export default function AuthGuard() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // Check token immediately on mount and pathname changes
+  useEffect(() => {
+    // Skip auth routes
+    if (pathname.startsWith("/auth")) {
+      return;
+    }
+
+    // Check for token
+    const token = getToken();
+    if (!token) {
+      console.log("AuthGuard: No token found, redirecting to login");
+      // Use setTimeout to ensure this runs after render
+      setTimeout(() => {
+        router.push("/auth/login");
+      }, 0);
+    }
+  }, [pathname, router]);
+
+  // Add popstate listener specifically for browser back/forward navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      if (!pathname.startsWith("/auth")) {
+        const token = getToken();
+        if (!token) {
+          console.log("AuthGuard: No token found on popstate (back/forward), redirecting to login");
+          router.push("/auth/login");
+        }
+      }
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [pathname, router]);
+
+  // Add visibility change listener to catch tab switching scenarios
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden && !pathname.startsWith("/auth")) {
+        const token = getToken();
+        if (!token) {
+          console.log("AuthGuard: No token found on visibility change, redirecting to login");
+          router.push("/auth/login");
+        }
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [pathname, router]);
+
+  // Add focus listener for additional protection
+  useEffect(() => {
+    const handleFocus = () => {
+      if (!pathname.startsWith("/auth")) {
+        const token = getToken();
+        if (!token) {
+          console.log("AuthGuard: No token found on focus, redirecting to login");
+          router.push("/auth/login");
+        }
+      }
+    };
+
+    window.addEventListener("focus", handleFocus);
+    return () => window.removeEventListener("focus", handleFocus);
+  }, [pathname, router]);
+
+  return null; // This component renders nothing
+}

frontend/src/app/components/layout/Navbar.tsx

@@ -10,6 +10,7 @@
 
 import Link from "next/link";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { User, LogOut, ChevronDown } from "lucide-react";
 import { removeToken } from "@/services/userServiceCookies";
@@ -27,16 +28,28 @@ import {
 export default function Navbar() {
   const [activeTab, setActiveTab] = useState("Dashboard");
   const { user, setUser } = useUser();
+  const router = useRouter();
 
   const navItems = [
     { name: "Dashboard", href: "/home" },
     { name: "Find Partner", href: "/match" },
   ];
 
   const handleLogout = () => {
-    removeToken();
+    // Clear user context first
     setUser(null);
-    window.location.href = "/auth/login";
+    
+    // Clear token from cookies
+    removeToken();
+    
+    // Clear all localStorage and sessionStorage
+    if (typeof window !== 'undefined') {
+      localStorage.clear();
+      sessionStorage.clear();
+    }
+    
+  // Use Next.js router.push for client-side navigation
+  router.push("/auth/login");
   };
 
   return (

frontend/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { Toaster } from "sonner";
 import { UserProvider } from "@/contexts/UserContext";
 import NavbarWrapper from "./components/layout/NavbarWrapper";
+import AuthGuard from "./components/layout/AuthGuard";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -38,6 +39,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <UserProvider>
+          <AuthGuard />
           <NavbarWrapper />
           {children}
         </UserProvider>

frontend/src/app/match/page.tsx

@@ -1,12 +1,3 @@
-import { IoIosSettings } from "react-icons/io";
-import { CiBookmark } from "react-icons/ci";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import TopicsComponent from "../components/match/TopicsComponent";
 import DifficultyComponent from "../components/match/DifficultyComponent";

frontend/src/app/page.tsx

@@ -1,7 +1,6 @@
-export default function Home() {
-  return (
-    <main>
-      <h1>hi</h1>
-    </main>
-  );
+import { redirect } from "next/navigation";
+
+export default function RootRedirect() {
+  redirect("/home");
+  return null;
 }

frontend/src/middleware.ts

@@ -1,3 +1,10 @@
+/**
+ * AI Assistance Disclosure:
+ * Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-16
+ * Purpose: To fix a bug where users can navigate back to protected pages after logout by implementing cache control headers in middleware.
+ * Author Review: I validated correctness, security, and performance of the code.
+ */
+
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { verifyToken } from "@/services/userServiceApi";
@@ -22,7 +29,15 @@ export async function middleware(request: NextRequest) {
   // If no token, redirect to login
   if (!token) {
     const loginUrl = new URL("/auth/login", request.url);
-    return NextResponse.redirect(loginUrl);
+    const response = NextResponse.redirect(loginUrl);
+    
+    // Clear any existing token cookie to ensure clean state
+    response.cookies.set("token", "", {
+      path: "/",
+      expires: new Date(0),
+    });
+    
+    return response;
   }
 
   try {
@@ -32,15 +47,39 @@ export async function middleware(request: NextRequest) {
     if (response.status !== 200) {
       // Token is invalid, redirect to login
       const loginUrl = new URL("/auth/login", request.url);
-      return NextResponse.redirect(loginUrl);
+      const redirectResponse = NextResponse.redirect(loginUrl);
+      
+      // Clear invalid token cookie
+      redirectResponse.cookies.set("token", "", {
+        path: "/",
+        expires: new Date(0),
+      });
+      
+      return redirectResponse;
     }
 
-    return NextResponse.next();
+    // Token is valid, allow access but add cache control headers
+    const response_next = NextResponse.next();
+    
+    // Prevent browser caching of protected pages to avoid back navigation issues
+    response_next.headers.set('Cache-Control', 'no-cache, no-store, must-revalidate');
+    response_next.headers.set('Pragma', 'no-cache');
+    response_next.headers.set('Expires', '0');
+    
+    return response_next;
   } catch (error) {
     console.error("Token verification failed:", error);
     // On error, redirect to login
     const loginUrl = new URL("/auth/login", request.url);
-    return NextResponse.redirect(loginUrl);
+    const redirectResponse = NextResponse.redirect(loginUrl);
+    
+    // Clear potentially corrupted token cookie
+    redirectResponse.cookies.set("token", "", {
+      path: "/",
+      expires: new Date(0),
+    });
+    
+    return redirectResponse;
   }
 }