feat(login): implement login and signup schemas with validation

Author: Jxl-s

.gitignore

@@ -57,4 +57,6 @@ drizzle/meta/
 .supabase/
 
 
-.agents/
+.agents/
+.playwright-mcp/
+.mcp.json

app/login/actions.ts

@@ -2,43 +2,66 @@
 
 import { redirect } from "next/navigation";
 import { createClient } from "@/utils/supabase/server";
+import { loginSchema, signupSchema } from "./schema";
 
-export async function login(formData: FormData) {
-  const supabase = await createClient();
+export type ActionState = {
+  errors: Partial<Record<string, string[]>>;
+} | null;
 
-  const { error } = await supabase.auth.signInWithPassword({
-    email: formData.get("email") as string,
-    password: formData.get("password") as string,
+export async function login(
+  _prevState: ActionState,
+  formData: FormData
+): Promise<ActionState> {
+  const result = loginSchema.safeParse({
+    email: formData.get("email"),
+    password: formData.get("password"),
   });
 
+  if (!result.success) {
+    return { errors: result.error.flatten().fieldErrors };
+  }
+
+  const supabase = await createClient();
+  const { error } = await supabase.auth.signInWithPassword(result.data);
+
   if (error) {
-    redirect(`/login?error=${encodeURIComponent(error.message)}`);
+    return { errors: { email: [error.message] } };
   }
 
   redirect("/");
 }
 
-export async function signup(formData: FormData) {
-  const supabase = await createClient();
+export async function signup(
+  _prevState: ActionState,
+  formData: FormData
+): Promise<ActionState> {
+  const result = signupSchema.safeParse({
+    firstName: formData.get("first_name"),
+    lastName: formData.get("last_name"),
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+
+  if (!result.success) {
+    return { errors: result.error.flatten().fieldErrors };
+  }
 
+  const { firstName, lastName, email, password } = result.data;
+
+  const supabase = await createClient();
   const { error } = await supabase.auth.signUp({
-    email: formData.get("email") as string,
-    password: formData.get("password") as string,
+    email,
+    password,
     options: {
-      data: {
-        first_name: formData.get("first_name") as string,
-        last_name: formData.get("last_name") as string,
-      },
+      data: { first_name: firstName, last_name: lastName },
     },
   });
 
   if (error) {
-    redirect(`/login?error=${encodeURIComponent(error.message)}`);
+    return { errors: { email: [error.message] } };
   }
 
-  redirect(
-    `/login?message=${encodeURIComponent("Check your email to confirm your account.")}`
-  );
+  redirect("/login?message=Check+your+email+to+confirm+your+account.");
 }
 
 export async function signout() {

app/login/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { login, signup } from "./actions";
+import { useActionState, useState, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
-import { Suspense, useState } from "react";
+import { login, signup, type ActionState } from "./actions";
 import {
   Card,
   CardContent,
@@ -14,12 +14,28 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 
+function FieldError({ errors }: { errors?: string[] }) {
+  if (!errors?.length) return null;
+  return <p className="text-sm text-destructive">{errors[0]}</p>;
+}
+
 function LoginForm() {
   const searchParams = useSearchParams();
   const message = searchParams.get("message");
-  const error = searchParams.get("error");
   const [mode, setMode] = useState<"login" | "signup">("login");
 
+  const [loginState, loginAction] = useActionState<ActionState, FormData>(
+    login,
+    null
+  );
+  const [signupState, signupAction] = useActionState<ActionState, FormData>(
+    signup,
+    null
+  );
+
+  const state = mode === "login" ? loginState : signupState;
+  const action = mode === "login" ? loginAction : signupAction;
+
   return (
     <div className="flex min-h-screen items-center justify-center p-4">
       <Card className="w-full max-w-md">
@@ -34,67 +50,61 @@ function LoginForm() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          {error && (
-            <div className="mb-4 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          )}
           {message && (
             <div className="mb-4 rounded-md bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400">
               {message}
             </div>
           )}
 
-          <form className="space-y-4">
+          <form action={action} className="space-y-4" noValidate>
             {mode === "signup" && (
               <div className="flex gap-3">
-                <div className="space-y-2 flex-1">
+                <div className="space-y-1 flex-1">
                   <Label htmlFor="first_name">First name</Label>
                   <Input
                     id="first_name"
                     name="first_name"
                     type="text"
-                    required
                     placeholder="Jane"
                   />
+                  <FieldError errors={signupState?.errors?.firstName} />
                 </div>
-                <div className="space-y-2 flex-1">
+                <div className="space-y-1 flex-1">
                   <Label htmlFor="last_name">Last name</Label>
                   <Input
                     id="last_name"
                     name="last_name"
                     type="text"
-                    required
                     placeholder="Doe"
                   />
+                  <FieldError errors={signupState?.errors?.lastName} />
                 </div>
               </div>
             )}
-            <div className="space-y-2">
+            <div className="space-y-1">
               <Label htmlFor="email">Email</Label>
               <Input
                 id="email"
                 name="email"
                 type="email"
-                required
                 placeholder="you@example.com"
               />
+              <FieldError errors={state?.errors?.email} />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-1">
               <Label htmlFor="password">Password</Label>
               <Input
                 id="password"
                 name="password"
                 type="password"
-                required
-                minLength={6}
                 placeholder="••••••••"
               />
+              <FieldError errors={state?.errors?.password} />
             </div>
             <div className="flex flex-col gap-2 pt-2">
               {mode === "login" ? (
                 <>
-                  <Button formAction={login}>Log in</Button>
+                  <Button type="submit">Log in</Button>
                   <Button
                     type="button"
                     variant="outline"
@@ -105,7 +115,7 @@ function LoginForm() {
                 </>
               ) : (
                 <>
-                  <Button formAction={signup}>Sign up</Button>
+                  <Button type="submit">Sign up</Button>
                   <Button
                     type="button"
                     variant="outline"

app/login/schema.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+export const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+});
+
+export const signupSchema = z.object({
+  firstName: z.string().min(1, "First name is required"),
+  lastName: z.string().min(1, "Last name is required"),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+});

package.json

@@ -29,7 +29,8 @@
     "react-dom": "19.2.4",
     "shadcn": "^4.1.0",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "zod": "^3.24.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",