Refactor authentication flows and improve logout handling

Split authentication logic into a reusable `MainLayout` component for better structure and consistency. Enhanced logout functionality to ensure proper state resetting and added minor delays for reliable redirect behavior. Improved safeguards for unauthenticated access, reducing potential edge case errors.

frontend/src/app/(main)/dashboard/layout.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useAuth } from "@/context/auth-context";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="h-8 w-8 mx-auto border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+          <p className="mt-2">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        Redirecting to login...
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

frontend/src/app/(main)/dashboard/page.tsx

@@ -6,16 +6,29 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export default function DashboardPage() {
-  const { user, isLoading, isAuthenticated } = useAuth();
+  const { user, isLoading, isAuthenticated, logout } = useAuth();
   const router = useRouter();
 
   // Redirect to login if not authenticated
   useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      router.push("/login");
-    }
+    // Add a small delay to ensure context is fully updated
+    const checkAuth = setTimeout(() => {
+      if (!isLoading && !isAuthenticated) {
+        console.log("Not authenticated, redirecting to login");
+        router.push("/login");
+      }
+    }, 100);
+
+    return () => clearTimeout(checkAuth);
   }, [isLoading, isAuthenticated, router]);
 
+  // Handle logout with explicit redirect
+  const handleLogout = () => {
+    logout();
+    // Force redirection to login
+    router.push("/login");
+  };
+
   // Show loading state
   if (isLoading) {
     return (
@@ -28,6 +41,12 @@ export default function DashboardPage() {
     );
   }
 
+  // Extra safeguard - if we somehow get here without authentication, redirect
+  if (!isAuthenticated) {
+    router.push("/login");
+    return <div>Redirecting...</div>;
+  }
+
   return (
     <div className="container mx-auto px-4 py-12">
       <div className="max-w-7xl mx-auto">
@@ -57,10 +76,7 @@ export default function DashboardPage() {
           <div className="mt-8">
             <button
               className="px-4 py-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors"
-              onClick={() => {
-                const auth = useAuth();
-                auth.logout();
-              }}
+              onClick={handleLogout}
             >
               Sign Out
             </button>