security-patterns

Security Patterns

Input Validation

Always validate user input:

import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

// Validate before using
const result = schema.safeParse(userInput);
if (!result.success) {
  throw new Error('Invalid input');
}

XSS Prevention

Escape user-generated content:

// ✅ React escapes by default
<div>{userInput}</div>

// ❌ Dangerous - only use with trusted content
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ✅ If you must use HTML, sanitize first
import DOMPurify from 'isomorphic-dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />

Authentication

Server-side auth checks:

// ✅ Check on server
export default async function ProtectedPage() {
  const session = await getServerSession();
  if (!session) redirect('/login');
  return <div>Protected content</div>;
}

// ❌ Don't rely only on client
'use client';
export function Page() {
  if (!user) return <LoginPrompt />; // Can be bypassed
}

API Security

Validate and authenticate API routes:

export async function POST(request: Request) {
  // 1. Authenticate
  const session = await getServerSession();
  if (!session) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }

  // 2. Validate input
  const body = await request.json();
  const validated = schema.parse(body);

  // 3. Authorize (check permissions)
  if (!canUserPerformAction(session.user, validated)) {
    return Response.json({ error: 'Forbidden' }, { status: 403 });
  }

  // 4. Process request
  const result = await processRequest(validated);
  return Response.json(result);
}

Sensitive Data

Never expose secrets:

// ❌ Never
const API_KEY = 'sk_live_12345';
console.log(process.env.SECRET_KEY);

// ✅ Use server-only variables
// Server Component or API Route only
const apiKey = process.env.SECRET_KEY;