Initial Auth Flow & UI Updates

src/app/api/auth/login/route.ts

@@ -1,3 +1,4 @@
+import { validateAuthCredentials } from "@/lib/auth/validation";
 import { createServerSupabaseClient } from "@/lib/supabase/server";
 import { NextRequest, NextResponse } from "next/server";
 
@@ -10,28 +11,20 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
     }
 
-    const { email, password } = body as {
-      email?: unknown;
-      password?: unknown;
-    };
-    if (
-      typeof email !== "string" ||
-      typeof password !== "string" ||
-      !email ||
-      !password
-    ) {
+    const validation = validateAuthCredentials(body);
+
+    if (!validation.success || !validation.credentials) {
       return NextResponse.json(
-        { error: "Email and password are required" },
+        { error: validation.error ?? "Invalid credentials" },
         { status: 400 }
       );
     }
 
     const supabase = await createServerSupabaseClient();
 
-    const { data, error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    });
+    const { data, error } = await supabase.auth.signInWithPassword(
+      validation.credentials
+    );
 
     if (error) {
       return NextResponse.json({ error: error.message }, { status: 400 });

src/app/api/auth/logout/route.ts

@@ -0,0 +1,20 @@
+import { createServerSupabaseClient } from "@/lib/supabase/server";
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  try {
+    const supabase = await createServerSupabaseClient();
+    const { error } = await supabase.auth.signOut();
+
+    if (error) {
+      return NextResponse.json({ error: error.message }, { status: 400 });
+    }
+
+    return NextResponse.json({ success: true });
+  } catch {
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/auth/signup/route.ts

@@ -1,9 +1,9 @@
+import { validateAuthCredentials } from "@/lib/auth/validation";
 import { createServerSupabaseClient } from "@/lib/supabase/server";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   try {
-    // Parse request body
     let body: unknown;
     try {
       body = await request.json();
@@ -14,61 +14,18 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    // Validate body is an object
-    if (!body || typeof body !== "object") {
-      return NextResponse.json(
-        { error: "Invalid request body" },
-        { status: 400 }
-      );
-    }
-
-    const { email, password } = body as Record<string, unknown>;
-
-    // Validate email and password exist and are strings
-    if (typeof email !== "string" || email.trim().length === 0) {
-      return NextResponse.json(
-        { error: "Email is required and must be a string" },
-        { status: 400 }
-      );
-    }
-
-    if (typeof password !== "string" || password.length === 0) {
-      return NextResponse.json(
-        { error: "Password is required and must be a string" },
-        { status: 400 }
-      );
-    }
-
-    // Validate email format - simple check, Supabase will do deeper validation
-    const trimmedEmail = email.trim();
-    if (!trimmedEmail.includes("@") || !trimmedEmail.includes(".")) {
-      return NextResponse.json(
-        { error: "Invalid email format" },
-        { status: 400 }
-      );
-    }
-    const [localPart, domain] = trimmedEmail.split("@");
-    if (!localPart || !domain || localPart.length === 0 || domain.length < 3) {
-      return NextResponse.json(
-        { error: "Invalid email format" },
-        { status: 400 }
-      );
-    }
+    const validation = validateAuthCredentials(body);
 
-    // Validate password length
-    if (password.length < 8) {
+    if (!validation.success || !validation.credentials) {
       return NextResponse.json(
-        { error: "Password must be at least 8 characters" },
+        { error: validation.error ?? "Invalid credentials" },
         { status: 400 }
       );
     }
 
     const supabase = await createServerSupabaseClient();
 
-    const { data, error } = await supabase.auth.signUp({
-      email: email.trim(),
-      password,
-    });
+    const { data, error } = await supabase.auth.signUp(validation.credentials);
 
     if (error) {
       return NextResponse.json({ error: error.message }, { status: 400 });

src/app/login/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { AuthForm } from "@/components/auth/auth-form";
+import { AuthShell } from "@/components/auth/auth-shell";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    const formData = new FormData(event.currentTarget);
+    const email = formData.get("email");
+    const password = formData.get("password");
+
+    try {
+      const response = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const result = (await response.json()) as { error?: string };
+
+      if (!response.ok) {
+        setError(result.error ?? "Unable to sign in");
+        return;
+      }
+
+      router.push("/dashboard");
+      router.refresh();
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <AuthShell
+      title="Welcome back."
+      subtitle="Sign in to open your football workspace, follow live matchdays, and pick up where you left off."
+      footer={
+        <>
+          New to Swale?{" "}
+          <Link href="/signup" className="font-medium text-blue-700 hover:text-blue-800">
+            Create an account
+          </Link>
+        </>
+      }
+    >
+      <AuthForm
+        mode="login"
+        submitLabel={isSubmitting ? "Signing in..." : "Sign in"}
+        helperText="Use your email and password to access your live dashboard, saved context, and player tracking workspace."
+        isSubmitting={isSubmitting}
+        error={error}
+        onSubmit={handleSubmit}
+      />
+    </AuthShell>
+  );
+}