Learning Objectives

Create registration form with validation
Build login form with error handling
Implement form state management
Use Zod for schema validation
Handle loading and error states

1. Form Validation with Zod

Zod is a TypeScript-first schema validation library that provides excellent type inference and runtime validation. We'll use it to validate user input on both client and server sides.

Install Zod

First, add Zod to your project dependencies using pnpm.

pnpm add zod

Auth Validation Schemas

The following schemas define validation rules for all authentication-related forms. Each schema uses Zod's chainable methods to add constraints like minimum length, regex patterns, and custom error messages. The refine method allows us to add custom validation logic, such as ensuring passwords match.

// lib/validations/auth.ts
import { z } from "zod";

export const signUpSchema = z
  .object({
    fullName: z
      .string()
      .min(2, "Name must be at least 2 characters")
      .max(100, "Name must be less than 100 characters"),
    email: z.string().email("Please enter a valid email address"),
    phone: z
      .string()
      .regex(/^\+?[0-9]{10,14}$/, "Please enter a valid phone number")
      .optional()
      .or(z.literal("")),
    password: z
      .string()
      .min(8, "Password must be at least 8 characters")
      .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
      .regex(/[0-9]/, "Password must contain at least one number"),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  });

export const signInSchema = z.object({
  email: z.string().email("Please enter a valid email address"),
  password: z.string().min(1, "Password is required"),
});

export const forgotPasswordSchema = z.object({
  email: z.string().email("Please enter a valid email address"),
});

export const resetPasswordSchema = z
  .object({
    password: z
      .string()
      .min(8, "Password must be at least 8 characters")
      .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
      .regex(/[0-9]/, "Password must contain at least one number"),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  });

export type SignUpInput = z.infer<typeof signUpSchema>;
export type SignInInput = z.infer<typeof signInSchema>;
export type ForgotPasswordInput = z.infer<typeof forgotPasswordSchema>;
export type ResetPasswordInput = z.infer<typeof resetPasswordSchema>;

2. Server Actions with Validation

Server Actions allow us to handle form submissions directly on the server without creating API routes. This approach provides better security since validation happens server-side, and it integrates seamlessly with React's form handling.

The following code defines server actions for authentication operations. Each action validates input using Zod schemas, interacts with Supabase Auth, and returns appropriate responses for success or error states.

// app/actions/auth.ts
"use server";

import { createClient } from "@/lib/supabase/server";
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
import {
  signUpSchema,
  signInSchema,
  forgotPasswordSchema,
  resetPasswordSchema,
  type SignUpInput,
  type SignInInput,
} from "@/lib/validations/auth";

// Types for action responses
interface ActionResponse {
  success?: boolean;
  error?: string;
  errors?: Record<string, string[]>;
  message?: string;
}

export async function signUp(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  // Parse form data
  const rawData = {
    fullName: formData.get("fullName") as string,
    email: formData.get("email") as string,
    phone: formData.get("phone") as string,
    password: formData.get("password") as string,
    confirmPassword: formData.get("confirmPassword") as string,
  };

  // Validate
  const result = signUpSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const { fullName, email, phone, password } = result.data;

  // Create Supabase client
  const supabase = await createClient();

  // Sign up user
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: {
        full_name: fullName,
        phone: phone || null,
      },
      emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
    },
  });

  if (error) {
    // Handle specific error codes
    if (error.message.includes("already registered")) {
      return { error: "An account with this email already exists" };
    }
    return { error: error.message };
  }

  // Check if email confirmation is required
  if (data.user && !data.session) {
    return {
      success: true,
      message: "Please check your email to verify your account",
    };
  }

  revalidatePath("/", "layout");
  redirect("/dashboard");
}

export async function signIn(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  const rawData = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
  };

  // Validate
  const result = signInSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const { email, password } = result.data;
  const supabase = await createClient();

  const { error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    if (error.message.includes("Invalid login credentials")) {
      return { error: "Invalid email or password" };
    }
    if (error.message.includes("Email not confirmed")) {
      return { error: "Please verify your email before signing in" };
    }
    return { error: error.message };
  }

  revalidatePath("/", "layout");
  redirect("/dashboard");
}

export async function signOut(): Promise<void> {
  const supabase = await createClient();
  await supabase.auth.signOut();
  revalidatePath("/", "layout");
  redirect("/login");
}

export async function forgotPassword(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  const rawData = {
    email: formData.get("email") as string,
  };

  const result = forgotPasswordSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const supabase = await createClient();

  const { error } = await supabase.auth.resetPasswordForEmail(
    result.data.email,
    {
      redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback?next=/reset-password`,
    }
  );

  if (error) {
    return { error: error.message };
  }

  return {
    success: true,
    message: "Check your email for the password reset link",
  };
}

export async function resetPassword(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  const rawData = {
    password: formData.get("password") as string,
    confirmPassword: formData.get("confirmPassword") as string,
  };

  const result = resetPasswordSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const supabase = await createClient();

  const { error } = await supabase.auth.updateUser({
    password: result.data.password,
  });

  if (error) {
    return { error: error.message };
  }

  revalidatePath("/", "layout");
  redirect("/dashboard");
}

3. Registration Form Component

The registration page uses a server component for the page layout and a client component for the interactive form. This separation allows us to keep the page metadata on the server while handling user interactions on the client.

Page Component

This server component renders the registration page layout, including the logo, heading, and the registration form. It also provides navigation to the login page for existing users.

// app/(auth)/register/page.tsx
import Link from 'next/link'
import { RegisterForm } from './register-form'

export const metadata = {
  title: 'Create Account | RizPay',
  description: 'Create your RizPay account',
}

export default function RegisterPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
      <div className="max-w-md w-full space-y-8">
        {/* Logo */}
        <div className="text-center">
          <div className="mx-auto w-12 h-12 bg-primary rounded-xl flex items-center justify-center">
            <span className="text-white font-bold text-xl">R</span>
          </div>
          <h1 className="mt-4 text-3xl font-bold text-gray-900">
            Create your account
          </h1>
          <p className="mt-2 text-gray-600">
            Start managing your bills with RizPay
          </p>
        </div>

        {/* Form */}
        <RegisterForm />

        {/* Footer */}
        <p className="text-center text-sm text-gray-600">
          Already have an account?{' '}
          <Link href="/login" className="text-primary font-medium hover:underline">
            Sign in
          </Link>
        </p>
      </div>
    </div>
  )
}

Registration Form Client Component

The registration form is a client component that uses React 19's useActionState hook to manage form state and handle submissions. It displays validation errors inline with each field and shows a success message when email confirmation is required.

// app/(auth)/register/register-form.tsx
'use client'

import { useActionState } from 'react'
import { signUp } from '@/app/actions/auth'
import { Input } from '@/components/ui/Input'
import { Button } from '@/components/ui/Button'
import { Alert } from '@/components/ui/Alert'

const initialState = {
  error: undefined,
  errors: undefined,
  message: undefined,
  success: undefined,
}

export function RegisterForm() {
  const [state, formAction, isPending] = useActionState(signUp, initialState)

  // Success message - show confirmation notice
  if (state.success && state.message) {
    return (
      <div className="bg-white p-8 rounded-xl shadow-card">
        <Alert variant="success">
          <h3 className="font-semibold mb-2">Check your email</h3>
          <p>{state.message}</p>
        </Alert>
      </div>
    )
  }

  return (
    <form action={formAction} className="bg-white p-8 rounded-xl shadow-card space-y-6">
      {/* Global error */}
      {state.error && !state.errors && (
        <Alert variant="error">{state.error}</Alert>
      )}

      {/* Full Name */}
      <Input
        label="Full Name"
        name="fullName"
        type="text"
        placeholder="John Doe"
        required
        autoComplete="name"
        error={state.errors?.fullName?.[0]}
      />

      {/* Email */}
      <Input
        label="Email Address"
        name="email"
        type="email"
        placeholder="john@example.com"
        required
        autoComplete="email"
        error={state.errors?.email?.[0]}
      />

      {/* Phone (Optional) */}
      <Input
        label="Phone Number"
        name="phone"
        type="tel"
        placeholder="+234 800 000 0000"
        autoComplete="tel"
        hint="Optional - for transaction notifications"
        error={state.errors?.phone?.[0]}
      />

      {/* Password */}
      <Input
        label="Password"
        name="password"
        type="password"
        placeholder="Create a strong password"
        required
        autoComplete="new-password"
        error={state.errors?.password?.[0]}
        hint="Min 8 characters with uppercase, lowercase, and number"
      />

      {/* Confirm Password */}
      <Input
        label="Confirm Password"
        name="confirmPassword"
        type="password"
        placeholder="Confirm your password"
        required
        autoComplete="new-password"
        error={state.errors?.confirmPassword?.[0]}
      />

      {/* Terms */}
      <div className="flex items-start gap-3">
        <input
          type="checkbox"
          id="terms"
          name="terms"
          required
          className="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
        />
        <label htmlFor="terms" className="text-sm text-gray-600">
          I agree to the{' '}
          <a href="/terms" className="text-primary hover:underline">
            Terms of Service
          </a>{' '}
          and{' '}
          <a href="/privacy" className="text-primary hover:underline">
            Privacy Policy
          </a>
        </label>
      </div>

      {/* Submit */}
      <Button type="submit" className="w-full" loading={isPending}>
        Create Account
      </Button>

      {/* OAuth Divider */}
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-gray-200" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="px-4 bg-white text-gray-500">or continue with</span>
        </div>
      </div>

      {/* OAuth Buttons */}
      <div className="grid grid-cols-2 gap-3">
        <button
          type="button"
          className="flex items-center justify-center gap-2 px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          <GoogleIcon className="w-5 h-5" />
          <span className="text-sm font-medium">Google</span>
        </button>
        <button
          type="button"
          className="flex items-center justify-center gap-2 px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          <AppleIcon className="w-5 h-5" />
          <span className="text-sm font-medium">Apple</span>
        </button>
      </div>
    </form>
  )
}

function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24">
      <path
        fill="currentColor"
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
      />
      <path
        fill="currentColor"
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
      />
      <path
        fill="currentColor"
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
      />
      <path
        fill="currentColor"
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
      />
    </svg>
  )
}

function AppleIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
    </svg>
  )
}

4. Login Form Component

The login page follows a similar pattern to registration but with fewer fields. It includes a "forgot password" link and a "remember me" checkbox for user convenience.

Page Component

This server component provides the login page structure with branding elements and links to registration for new users.

// app/(auth)/login/page.tsx
import Link from 'next/link'
import { LoginForm } from './login-form'

export const metadata = {
  title: 'Sign In | RizPay',
  description: 'Sign in to your RizPay account',
}

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
      <div className="max-w-md w-full space-y-8">
        {/* Logo */}
        <div className="text-center">
          <div className="mx-auto w-12 h-12 bg-primary rounded-xl flex items-center justify-center">
            <span className="text-white font-bold text-xl">R</span>
          </div>
          <h1 className="mt-4 text-3xl font-bold text-gray-900">
            Welcome back
          </h1>
          <p className="mt-2 text-gray-600">
            Sign in to your account to continue
          </p>
        </div>

        {/* Form */}
        <LoginForm />

        {/* Footer */}
        <p className="text-center text-sm text-gray-600">
          Don't have an account?{' '}
          <Link href="/register" className="text-primary font-medium hover:underline">
            Create account
          </Link>
        </p>
      </div>
    </div>
  )
}

Login Form Client Component

The login form uses useActionState to handle form submission and display errors. It provides inline error messages for each field and includes OAuth options for alternative sign-in methods.

// app/(auth)/login/login-form.tsx
'use client'

import { useActionState } from 'react'
import Link from 'next/link'
import { signIn } from '@/app/actions/auth'
import { Input } from '@/components/ui/Input'
import { Button } from '@/components/ui/Button'
import { Alert } from '@/components/ui/Alert'

const initialState = {
  error: undefined,
  errors: undefined,
}

export function LoginForm() {
  const [state, formAction, isPending] = useActionState(signIn, initialState)

  return (
    <form action={formAction} className="bg-white p-8 rounded-xl shadow-card space-y-6">
      {/* Error Alert */}
      {state.error && (
        <Alert variant="error">{state.error}</Alert>
      )}

      {/* Email */}
      <Input
        label="Email Address"
        name="email"
        type="email"
        placeholder="john@example.com"
        required
        autoComplete="email"
        error={state.errors?.email?.[0]}
      />

      {/* Password */}
      <div className="space-y-1">
        <Input
          label="Password"
          name="password"
          type="password"
          placeholder="Enter your password"
          required
          autoComplete="current-password"
          error={state.errors?.password?.[0]}
        />
        <div className="text-right">
          <Link
            href="/forgot-password"
            className="text-sm text-primary hover:underline"
          >
            Forgot password?
          </Link>
        </div>
      </div>

      {/* Remember me */}
      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          id="remember"
          name="remember"
          className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
        />
        <label htmlFor="remember" className="text-sm text-gray-600">
          Remember me for 30 days
        </label>
      </div>

      {/* Submit */}
      <Button type="submit" className="w-full" loading={isPending}>
        Sign In
      </Button>

      {/* OAuth Divider */}
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-gray-200" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="px-4 bg-white text-gray-500">or continue with</span>
        </div>
      </div>

      {/* OAuth Buttons */}
      <div className="grid grid-cols-2 gap-3">
        <button
          type="button"
          className="flex items-center justify-center gap-2 px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          <span className="text-sm font-medium">Google</span>
        </button>
        <button
          type="button"
          className="flex items-center justify-center gap-2 px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          <span className="text-sm font-medium">Apple</span>
        </button>
      </div>
    </form>
  )
}

5. Alert Component

A reusable Alert component provides consistent styling for success, error, warning, and info messages throughout the application. It uses variant-based styling with appropriate colors and icons for each message type.

// components/ui/Alert.tsx
import { cn } from '@/lib/utils'

interface AlertProps {
  children: React.ReactNode
  variant?: 'success' | 'error' | 'warning' | 'info'
  className?: string
}

export function Alert({
  children,
  variant = 'info',
  className,
}: AlertProps) {
  const variants = {
    success: 'bg-green-50 text-green-800 border-green-200',
    error: 'bg-red-50 text-red-800 border-red-200',
    warning: 'bg-yellow-50 text-yellow-800 border-yellow-200',
    info: 'bg-blue-50 text-blue-800 border-blue-200',
  }

  const icons = {
    success: (
      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
      </svg>
    ),
    error: (
      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
      </svg>
    ),
    warning: (
      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
      </svg>
    ),
    info: (
      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
      </svg>
    ),
  }

  return (
    <div
      className={cn(
        'flex items-start gap-3 p-4 rounded-lg border',
        variants[variant],
        className
      )}
    >
      <span className="shrink-0">{icons[variant]}</span>
      <div className="text-sm">{children}</div>
    </div>
  )
}

6. Password Strength Indicator

This component provides real-time feedback on password strength as users type. It calculates a score based on various criteria (length, uppercase, lowercase, numbers, special characters) and displays a visual strength bar with a checklist of requirements.

// components/auth/PasswordStrength.tsx
'use client'

import { useMemo } from 'react'
import { cn } from '@/lib/utils'

interface PasswordStrengthProps {
  password: string
}

export function PasswordStrength({ password }: PasswordStrengthProps) {
  const strength = useMemo(() => {
    let score = 0
    const checks = {
      length: password.length >= 8,
      uppercase: /[A-Z]/.test(password),
      lowercase: /[a-z]/.test(password),
      number: /[0-9]/.test(password),
      special: /[^A-Za-z0-9]/.test(password),
    }

    if (checks.length) score++
    if (checks.uppercase) score++
    if (checks.lowercase) score++
    if (checks.number) score++
    if (checks.special) score++

    return { score, checks }
  }, [password])

  if (!password) return null

  const getStrengthLabel = () => {
    if (strength.score <= 2) return { label: 'Weak', color: 'text-red-600' }
    if (strength.score <= 3) return { label: 'Fair', color: 'text-yellow-600' }
    if (strength.score <= 4) return { label: 'Good', color: 'text-blue-600' }
    return { label: 'Strong', color: 'text-green-600' }
  }

  const { label, color } = getStrengthLabel()

  return (
    <div className="mt-2 space-y-2">
      {/* Strength bar */}
      <div className="flex gap-1">
        {[1, 2, 3, 4, 5].map((i) => (
          <div
            key={i}
            className={cn(
              'h-1 flex-1 rounded-full transition-colors',
              i <= strength.score
                ? strength.score <= 2
                  ? 'bg-red-500'
                  : strength.score <= 3
                    ? 'bg-yellow-500'
                    : strength.score <= 4
                      ? 'bg-blue-500'
                      : 'bg-green-500'
                : 'bg-gray-200'
            )}
          />
        ))}
      </div>

      {/* Label */}
      <p className={cn('text-xs font-medium', color)}>
        Password strength: {label}
      </p>

      {/* Checklist */}
      <ul className="text-xs space-y-1 text-gray-500">
        <li className={strength.checks.length ? 'text-green-600' : ''}>
          {strength.checks.length ? '✓' : '○'} At least 8 characters
        </li>
        <li className={strength.checks.uppercase ? 'text-green-600' : ''}>
          {strength.checks.uppercase ? '✓' : '○'} One uppercase letter
        </li>
        <li className={strength.checks.lowercase ? 'text-green-600' : ''}>
          {strength.checks.lowercase ? '✓' : '○'} One lowercase letter
        </li>
        <li className={strength.checks.number ? 'text-green-600' : ''}>
          {strength.checks.number ? '✓' : '○'} One number
        </li>
        <li className={strength.checks.special ? 'text-green-600' : ''}>
          {strength.checks.special ? '✓' : '○'} One special character
        </li>
      </ul>
    </div>
  )
}

7. Auth Layout

The authentication layout provides a consistent wrapper for all auth pages (login, register, forgot password, etc.). It includes a subtle background pattern and a footer with copyright information.

// app/(auth)/layout.tsx
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Background pattern */}
      <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" />

      {/* Content */}
      <div className="relative">
        {children}
      </div>

      {/* Footer */}
      <footer className="absolute bottom-0 left-0 right-0 py-4 text-center text-sm text-gray-500">
        <p>&copy; 2024 RizPay. All rights reserved.</p>
      </footer>
    </div>
  )
}

8. Form with Password Toggle

The PasswordInput component extends the base Input component to add a visibility toggle button. This allows users to reveal their password while typing to verify accuracy.

// components/ui/PasswordInput.tsx
'use client'

import { useState, forwardRef } from 'react'
import { Input, InputProps } from './Input'
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'

interface PasswordInputProps extends Omit<InputProps, 'type'> {
  showStrength?: boolean
}

export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
  ({ showStrength = false, ...props }, ref) => {
    const [visible, setVisible] = useState(false)

    return (
      <div className="relative">
        <Input
          ref={ref}
          type={visible ? 'text' : 'password'}
          rightIcon={
            <button
              type="button"
              onClick={() => setVisible(!visible)}
              className="p-1 hover:bg-gray-100 rounded"
            >
              {visible ? (
                <EyeSlashIcon className="w-5 h-5" />
              ) : (
                <EyeIcon className="w-5 h-5" />
              )}
            </button>
          }
          {...props}
        />
      </div>
    )
  }
)

PasswordInput.displayName = 'PasswordInput'

9. Testing Auth Forms

Testing ensures our validation schemas work correctly before integrating with the UI. These unit tests verify that valid inputs pass validation and invalid inputs are properly rejected with appropriate error messages.

Test Scenarios

// __tests__/auth/login.test.ts
import { describe, it, expect } from "vitest";
import { signInSchema } from "@/lib/validations/auth";

describe("Login Validation", () => {
  it("validates correct credentials", () => {
    const result = signInSchema.safeParse({
      email: "test@example.com",
      password: "password123",
    });
    expect(result.success).toBe(true);
  });

  it("rejects invalid email", () => {
    const result = signInSchema.safeParse({
      email: "invalid-email",
      password: "password123",
    });
    expect(result.success).toBe(false);
  });

  it("rejects empty password", () => {
    const result = signInSchema.safeParse({
      email: "test@example.com",
      password: "",
    });
    expect(result.success).toBe(false);
  });
});

Additional Resources

Next Lesson: Session Management & Protected Routes