Fixed authentication and added log out

src/client/components/navigation/Header.tsx

@@ -43,7 +43,7 @@ const Header: React.FC = () => {
   const location = useLocation();
   const isHomePage = location.pathname === "/";
   const [menuOpen, setMenuOpen] = useState(false);
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, logout } = useAuth();
   const menuRef = useRef<HTMLDivElement>(null);
   const hamburgerRef = useRef<HTMLButtonElement>(null);
 
@@ -85,14 +85,14 @@ const Header: React.FC = () => {
           <div className="ml-auto flex items-center gap-4">
             <DesktopMenu navItems={navItems} isHomePage={isHomePage} />
             <SearchBar />
-            <UserButton isLoggedIn={isAuthenticated} />
+            <UserButton isLoggedIn={isAuthenticated} onLogout={logout} />
           </div>
         </div>
 
         {/* Mobile Navigation */}
         <div className="flex items-center gap-4 md:hidden">
           <SearchBar className="w-32 focus:w-64" />
-          <UserButton isLoggedIn={isAuthenticated} />
+          <UserButton isLoggedIn={isAuthenticated} onLogout={logout} />
           <button ref={hamburgerRef} className="focus:outline-none">
             <Hamburger toggled={menuOpen} toggle={setMenuOpen} color={isHomePage ? "#fff" : "#000"} size={22} />
           </button>

src/client/components/navigation/UserButton.tsx

@@ -3,9 +3,10 @@ import React from "react";
 
 interface UserButtonProps {
   isLoggedIn: boolean;
+  onLogout: () => void;
 }
 
-export const UserButton: React.FC<UserButtonProps> = ({ isLoggedIn }) =>
+export const UserButton: React.FC<UserButtonProps> = ({ isLoggedIn, onLogout }) =>
   isLoggedIn ? (
     <Link to="/profile">
       <button className="transform rounded-full text-gray-600 duration-300 hover:scale-105 hover:text-[#000000]">
@@ -14,7 +15,10 @@ export const UserButton: React.FC<UserButtonProps> = ({ isLoggedIn }) =>
     </Link>
   ) : (
     <Link to="/login">
-      <button className="inline-block transform rounded-full bg-[#0f6cb6] px-5 py-2 text-white duration-300 hover:scale-105 hover:bg-[#8dc63f] hover:text-[#000000]">
+      <button
+        className="inline-block transform rounded-full bg-[#0f6cb6] px-5 py-2 text-white duration-300 hover:scale-105 hover:bg-[#8dc63f] hover:text-[#000000]"
+        onClick={onLogout}
+      >
         Log In
       </button>
     </Link>

src/client/router.tsx

@@ -1,7 +1,7 @@
 import { dehydrate, hydrate, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { SuperJSON } from "superjson";
-import { AuthProvider } from "./auth";
+import { AuthProvider } from "./AuthContext";
 import { DefaultCatchBoundary } from "./components/DefaultCatchBoundary";
 import { NotFound } from "./components/NotFound";
 import { routeTree } from "./routeTree.gen";

src/client/routes/profile.tsx

@@ -1,21 +1,26 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import { useAuth } from "../AuthContext";
+import { Button } from "../components/ui/button";
 
 export const Route = createFileRoute("/profile")({
   component: () => {
     const [profile, setProfile] = useState<{ username: string } | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
+    const { logout } = useAuth();
+    const navigate = useNavigate();
 
+    console.log("Profile component rendered");
     useEffect(() => {
+      if (!isLoading) return;
       const fetchProfile = async () => {
         try {
           const response = await fetch("/api/profile", { credentials: "include" });
 
           if (!response.ok) {
             throw new Error("Failed to fetch profile");
           }
-
           const result = (await response.json()) as { data: { username: string } };
           console.log("Profile API Response:", result);
           setProfile(result.data);
@@ -29,6 +34,20 @@ export const Route = createFileRoute("/profile")({
       fetchProfile();
     }, []);
 
+    const handleLogout = async () => {
+      try {
+        const response = await fetch("/api/auth/logout", { method: "POST", credentials: "include" });
+        if (response.ok) {
+          logout();
+          navigate({ to: "/" });
+        } else {
+          throw new Error("Logout failed");
+        }
+      } catch (error) {
+        console.error("Logout error:", error);
+      }
+    };
+
     if (isLoading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
 
@@ -44,6 +63,9 @@ export const Route = createFileRoute("/profile")({
               <span className="text-4xl font-bold">{profile?.username?.charAt(0).toUpperCase()}</span>
             </div>
             <h2 className="text-xl font-semibold">Welcome, {profile?.username}!</h2>
+            <Button variant="destructive" className="mt-4" onClick={handleLogout}>
+              Log Out
+            </Button>
           </div>
         </div>
       </div>

src/server/api/auth.ts

@@ -14,14 +14,13 @@ authRoutes.post("/auth/signup", async (c) => {
   const formUsername = formData["username"];
   const formPassword = formData["password"];
 
-  //TODO VALIDATE USERNAME
+  //validate username
   if (!formUsername || typeof formUsername !== "string") {
     return new Response("Invalid username", {
       status: 400,
     });
   }
 
-  //TODO VALIDATE PASSWORD
   if (!formPassword || typeof formPassword !== "string") {
     return new Response("Invalid password", {
       status: 400,
@@ -49,7 +48,7 @@ authRoutes.post("/auth/signup", async (c) => {
   } catch (error) {
     console.log(error);
     // db error, email taken, etc
-    return new Response("Username already used", {
+    return new Response("Username already taken", {
       status: 400,
     });
   }
@@ -95,6 +94,29 @@ authRoutes.post("/auth/login", async (c) => {
   }
 });
 
+authRoutes.post("/auth/logout", async (c) => {
+  const sessionId = c.req.header("Cookie")?.match(/sessionId=([^;]*)/)?.[1];
+
+  if (!sessionId) {
+    return new Response("No active session found", { status: 401 });
+  }
+
+  try {
+    // delete the session id row from the table
+    await db.delete(Schema.sessions).where(eq(Schema.sessions.id, sessionId));
+
+    return new Response("Successfully logged out", {
+      status: 200,
+      headers: {
+        "Set-Cookie": "sessionId=; Path=/; HttpOnly; Secure; Max-Age=0; SameSite=Strict",
+      },
+    });
+  } catch (error) {
+    console.log(error);
+    return new Response("Error logging out", { status: 500 });
+  }
+});
+
 async function createSession(sessionID: string, userID: string) {
   try {
     await db.insert(Schema.sessions).values({

src/server/api/profile.ts

@@ -8,9 +8,13 @@ const profileRoutes = new Hono();
 profileRoutes.get("/profile", async (c) => {
   try {
     const cookie = c.req.header("Cookie") || "";
-    const sessionID = cookie.startsWith("sessionId=") ? cookie.slice("sessionId=".length) : null;
-
-    if (!sessionID) return c.json({ error: { code: 400, message: "Missing or invalid session ID" } }, 400);
+    console.log(cookie);
+    const sessionIDMatch = cookie.match(/sessionId=([^;]*)/);
+    if (!sessionIDMatch) {
+      return c.json({ error: { code: 400, message: "Missing or invalid session ID" } }, 400);
+    }
+    const sessionID = sessionIDMatch[1];
+    console.log(cookie, sessionID);
 
     const result = await db
       .select({ username: Schema.users.username })