Input Validation | Bootspring Docs

Battle-tested patterns for secure input handling and validation using Zod.

Overview#

Input validation is your first line of defense against malicious data. This pattern covers:

Schema validation with Zod
Server action integration
Input sanitization
Environment variable validation

Prerequisites#

npm install zod isomorphic-dompurify

Code Example#

Zod Schema Validation#

// lib/validations/user.ts
import { z } from 'zod'

export const CreateUserSchema = z.object({
  email: z.string().email('Invalid email address'),
  name: z.string()
    .min(1, 'Name is required')
    .max(100, 'Name too long')
    .regex(/^[a-zA-Z\s'-]+$/, 'Invalid characters in name'),
  password: z.string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/[A-Z]/, 'Password must contain uppercase letter')
    .regex(/[a-z]/, 'Password must contain lowercase letter')
    .regex(/[0-9]/, 'Password must contain number')
    .regex(/[^A-Za-z0-9]/, 'Password must contain special character'),
  age: z.number()
    .int('Age must be a whole number')
    .min(13, 'Must be at least 13 years old')
    .max(120, 'Invalid age')
    .optional()
})

export const UpdateProfileSchema = z.object({
  name: z.string().min(1).max(100).optional(),
  bio: z.string().max(500).optional(),
  website: z.string().url().optional().or(z.literal(''))
})

export type CreateUserInput = z.infer<typeof CreateUserSchema>
export type UpdateProfileInput = z.infer<typeof UpdateProfileSchema>

Server Action with Validation#

// actions/user.ts
'use server'

import { CreateUserSchema } from '@/lib/validations/user'
import { prisma } from '@/lib/db'

type ActionResult =
  | { success: true; data: { id: string } }
  | { success: false; error: string; fieldErrors?: Record<string, string[]> }

export async function createUser(formData: FormData): Promise<ActionResult> {
  // Parse and validate
  const raw = {
    email: formData.get('email'),
    name: formData.get('name'),
    password: formData.get('password'),
    age: formData.get('age') ? Number(formData.get('age')) : undefined
  }

  const result = CreateUserSchema.safeParse(raw)

  if (!result.success) {
    return {
      success: false,
      error: 'Validation failed',
      fieldErrors: result.error.flatten().fieldErrors
    }
  }

  // Hash password before storing
  const hashedPassword = await hashPassword(result.data.password)

  const user = await prisma.user.create({
    data: {
      ...result.data,
      password: hashedPassword
    }
  })

  return { success: true, data: { id: user.id } }
}

Input Sanitization#

// lib/sanitize.ts
import DOMPurify from 'isomorphic-dompurify'

// Sanitize HTML content (for rich text)
export function sanitizeHtml(dirty: string): string {
  return DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li'],
    ALLOWED_ATTR: ['href', 'target', 'rel']
  })
}

// Strip all HTML (for plain text fields)
export function stripHtml(input: string): string {
  return DOMPurify.sanitize(input, { ALLOWED_TAGS: [] })
}

// URL validation and sanitization
export function sanitizeUrl(url: string): string | null {
  try {
    const parsed = new URL(url)
    // Only allow http/https
    if (!['http:', 'https:'].includes(parsed.protocol)) {
      return null
    }
    return parsed.toString()
  } catch {
    return null
  }
}

Environment Variable Validation#

// lib/env.ts
import { z } from 'zod'

const envSchema = z.object({
  DATABASE_URL: z.string().url(),
  STRIPE_SECRET_KEY: z.string().startsWith('sk_'),
  STRIPE_WEBHOOK_SECRET: z.string().startsWith('whsec_'),
  NEXT_PUBLIC_URL: z.string().url(),
  NODE_ENV: z.enum(['development', 'production', 'test'])
})

// Validate at build/startup time
export const env = envSchema.parse(process.env)

Usage Instructions#

Define schemas for all user input in a dedicated validations directory
Use safeParse for graceful error handling
Return field-level errors to the client for better UX
Sanitize any HTML content before storage or display
Validate environment variables at startup to fail fast

Best Practices#

Always validate on the server - Client-side validation is for UX only
Use strict typing - Leverage TypeScript with z.infer<> for type safety
Sanitize output - Even validated data should be escaped when rendered
Fail fast - Validate environment variables at startup, not runtime
Keep schemas DRY - Share validation logic between client and server
Test edge cases - Include malicious input in your test suite

CSRF Protection - Protect against cross-site request forgery
Security Headers - HTTP security headers
Server Actions - Server action patterns
Forms - Form handling with react-hook-form