clean commit

frontend/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/contexts/AuthContext"
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user, isLoading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!isLoading && !user) {
+      router.push("/login")
+    }
+  }, [user, isLoading, router])
+
+  // Show loading spinner while checking authentication
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-empire-gold"></div>
+      </div>
+    )
+  }
+
+  // If user is not authenticated, don't render anything (redirect is handled by useEffect)
+  if (!user) {
+    return null
+  }
+
+  // User is authenticated, render the protected content
+  return <>{children}</>
+}