tests passing

frontend/app/page.tsx

@@ -1,40 +1,177 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "./auth-context";
 
 export default function Home() {
   const [count, setCount] = useState<number | null>(null);
+  const { user, token, isLoading, logout } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
-    fetch("http://localhost:8000/api/counter")
-      .then((res) => res.json())
-      .then((data) => setCount(data.value));
-  }, []);
+    if (!isLoading && !user) {
+      router.push("/login");
+    }
+  }, [isLoading, user, router]);
+
+  useEffect(() => {
+    if (token) {
+      fetch("http://localhost:8000/api/counter", {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then((res) => res.json())
+        .then((data) => setCount(data.value))
+        .catch(() => setCount(null));
+    }
+  }, [token]);
 
   const increment = async () => {
+    if (!token) return;
     const res = await fetch("http://localhost:8000/api/counter/increment", {
       method: "POST",
+      headers: { Authorization: `Bearer ${token}` },
     });
     const data = await res.json();
     setCount(data.value);
   };
 
+  if (isLoading) {
+    return (
+      <main style={styles.main}>
+        <div style={styles.loader}>Loading...</div>
+      </main>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
   return (
-    <main style={{ padding: "2rem", fontFamily: "system-ui", textAlign: "center" }}>
-      <h1 style={{ fontSize: "6rem", margin: "2rem 0" }}>
-        {count === null ? "..." : count}
-      </h1>
-      <button
-        onClick={increment}
-        style={{
-          fontSize: "1.5rem",
-          padding: "1rem 2rem",
-          cursor: "pointer",
-        }}
-      >
-        +1
-      </button>
+    <main style={styles.main}>
+      <div style={styles.header}>
+        <div style={styles.userInfo}>
+          <span style={styles.userEmail}>{user.email}</span>
+          <button onClick={logout} style={styles.logoutBtn}>
+            Sign out
+          </button>
+        </div>
+      </div>
+
+      <div style={styles.content}>
+        <div style={styles.counterCard}>
+          <span style={styles.counterLabel}>Current Count</span>
+          <h1 style={styles.counter}>{count === null ? "..." : count}</h1>
+          <button onClick={increment} style={styles.incrementBtn}>
+            <span style={styles.plusIcon}>+</span>
+            Increment
+          </button>
+        </div>
+      </div>
     </main>
   );
 }
 
+const styles: Record<string, React.CSSProperties> = {
+  main: {
+    minHeight: "100vh",
+    background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
+    display: "flex",
+    flexDirection: "column",
+  },
+  loader: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    color: "rgba(255, 255, 255, 0.5)",
+    fontSize: "1.125rem",
+  },
+  header: {
+    padding: "1.5rem 2rem",
+    borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
+  },
+  userInfo: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "1rem",
+  },
+  userEmail: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    color: "rgba(255, 255, 255, 0.6)",
+    fontSize: "0.875rem",
+  },
+  logoutBtn: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    background: "rgba(255, 255, 255, 0.05)",
+    color: "rgba(255, 255, 255, 0.7)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "all 0.2s",
+  },
+  content: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+  },
+  counterCard: {
+    background: "rgba(255, 255, 255, 0.03)",
+    backdropFilter: "blur(10px)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: "32px",
+    padding: "4rem 5rem",
+    textAlign: "center",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+  },
+  counterLabel: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    display: "block",
+    color: "rgba(255, 255, 255, 0.4)",
+    fontSize: "0.875rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    marginBottom: "1rem",
+  },
+  counter: {
+    fontFamily: "'Instrument Serif', Georgia, serif",
+    fontSize: "8rem",
+    fontWeight: 400,
+    color: "#fff",
+    margin: 0,
+    lineHeight: 1,
+    background: "linear-gradient(135deg, #fff 0%, #a78bfa 100%)",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text",
+  },
+  incrementBtn: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    marginTop: "2.5rem",
+    padding: "1rem 2.5rem",
+    fontSize: "1.125rem",
+    fontWeight: 600,
+    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+    color: "#fff",
+    border: "none",
+    borderRadius: "16px",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    transition: "transform 0.2s, box-shadow 0.2s",
+    boxShadow: "0 4px 14px rgba(99, 102, 241, 0.4)",
+  },
+  plusIcon: {
+    fontSize: "1.5rem",
+    fontWeight: 400,
+  },
+};