first round of review

frontend/app/page.tsx

@@ -4,9 +4,11 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "./auth-context";
 
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
 export default function Home() {
   const [count, setCount] = useState<number | null>(null);
-  const { user, token, isLoading, logout } = useAuth();
+  const { user, isLoading, logout } = useAuth();
   const router = useRouter();
 
   useEffect(() => {
@@ -16,26 +18,30 @@ export default function Home() {
   }, [isLoading, user, router]);
 
   useEffect(() => {
-    if (token) {
-      fetch("http://localhost:8000/api/counter", {
-        headers: { Authorization: `Bearer ${token}` },
+    if (user) {
+      fetch(`${API_URL}/api/counter`, {
+        credentials: "include",
       })
         .then((res) => res.json())
         .then((data) => setCount(data.value))
         .catch(() => setCount(null));
     }
-  }, [token]);
+  }, [user]);
 
   const increment = async () => {
-    if (!token) return;
-    const res = await fetch("http://localhost:8000/api/counter/increment", {
+    const res = await fetch(`${API_URL}/api/counter/increment`, {
       method: "POST",
-      headers: { Authorization: `Bearer ${token}` },
+      credentials: "include",
     });
     const data = await res.json();
     setCount(data.value);
   };
 
+  const handleLogout = async () => {
+    await logout();
+    router.push("/login");
+  };
+
   if (isLoading) {
     return (
       <main style={styles.main}>
@@ -53,7 +59,7 @@ export default function Home() {
       <div style={styles.header}>
         <div style={styles.userInfo}>
           <span style={styles.userEmail}>{user.email}</span>
-          <button onClick={logout} style={styles.logoutBtn}>
+          <button onClick={handleLogout} style={styles.logoutBtn}>
             Sign out
           </button>
         </div>