Merge pull request #17 from LocalineServices/fix/authentication-check

Centralize Auth Redirect Logic in AuthLayout Component

Author: itzmxritz

src/app/(auth)/layout.tsx

@@ -1,12 +1,55 @@
+"use client";
+
 import { Icons } from "@/components/icons";
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const router = useRouter();
+  const [isChecking, setIsChecking] = useState(true);
+
+  // Redirect if already logged in
+  useEffect(() => {
+    async function checkAuth() {
+      try {
+        const response = await fetch('/api/users/me', {
+          credentials: 'include',
+        });
+        
+        if (response.ok) {
+          // User is already authenticated, redirect to projects
+          router.push('/projects');
+          return;
+        }
+
+        setIsChecking(false);
+      } catch {
+        // User is not authenticated, stay on auth page
+        setIsChecking(false);
+      }
+    }
+
+    checkAuth();
+  }, [router]);
+
+  // Show loading state while checking authentication
+  if (isChecking) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="flex flex-col items-center gap-2">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+          <p className="text-sm text-muted-foreground">Verifying authentication...</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen grid lg:grid-cols-2">
       {/* Left side - Branding */}

src/app/(auth)/login/page.tsx

@@ -34,26 +34,6 @@ export default function LoginPage() {
     checkConfig();
   }, []);
 
-  // Redirect if already logged in
-  React.useEffect(() => {
-    async function checkAuth() {
-      try {
-        const response = await fetch('/api/users/me', {
-          credentials: 'include',
-        });
-        
-        if (response.ok) {
-          // User is already authenticated, redirect to projects
-          router.push('/projects');
-        }
-      } catch {
-        // User is not authenticated, stay on login page
-      }
-    }
-
-    checkAuth();
-  }, [router]);
-
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setIsLoading(true);

src/app/(auth)/signup/page.tsx

@@ -37,26 +37,6 @@ export default function SignupPage() {
     checkConfig();
   }, []);
 
-  // Redirect if already logged in
-  React.useEffect(() => {
-    async function checkAuth() {
-      try {
-        const response = await fetch('/api/users/me', {
-          credentials: 'include',
-        });
-        
-        if (response.ok) {
-          // User is already authenticated, redirect to projects
-          router.push('/projects');
-        }
-      } catch {
-        // User is not authenticated, stay on signup page
-      }
-    }
-
-    checkAuth();
-  }, [router]);
-
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setIsLoading(true);