Add auth

src/components/auth/LoginForm.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const next = searchParams.get("next") ?? "/";
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [pending, setPending] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setPending(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/auth/sign-in/email", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        setError(data?.message ?? "Invalid email or password");
+        return;
+      }
+
+      // Successful login → redirect back
+      router.replace(next);
+      router.refresh();
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          autoComplete="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          autoComplete="current-password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      <Button type="submit" className="w-full" disabled={pending}>
+        {pending ? "Signing in…" : "Sign in"}
+      </Button>
+    </form>
+  );
+}

src/components/auth/LogoutButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+
+export function LogoutButton() {
+  const router = useRouter();
+
+  async function logout() {
+    await fetch("/api/auth/sign-out", { method: "POST" });
+    router.replace("/login");
+    router.refresh();
+  }
+
+  return (
+    <Button variant="secondary" onClick={logout}>
+      Sign out
+    </Button>
+  );
+}

src/components/global/Header.tsx

@@ -1,16 +1,13 @@
-// import { auth } from "@/auth";
-// import { SignInOutButton } from "../auth/SignInOutButton";
+import { LogoutButton } from "../auth/LogoutButton";
 import ModeToggle from "./ModeToggle";
 import TopNav from "./TopNav";
 
 export default async function Header() {
-  // const session = await auth()
-
   return (
     <div className="flex items-center justify-between">
       <TopNav />
       <div className="flex items-center justify-between gap-4">
-        {/* <SignInOutButton session={session} /> */}
+        <LogoutButton />
         <ModeToggle />
       </div>
     </div>