v0 Security Patterns: When Fast UI Meets Vulnerable Code

// SECURE: Service keys should only be server-side
// lib/supabase-server.ts (server only)
import { createClient } from '@supabase/supabase-js'

export const supabaseAdmin = createClient(
  process.env.SUPABASE_URL!, // No NEXT_PUBLIC_ = server only
  process.env.SUPABASE_SERVICE_KEY!
)

// lib/supabase-client.ts (client)
import { createBrowserClient } from '@supabase/ssr'

export const supabase = createBrowserClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! // Only anon key to client
)

// SECURE: Server-side validation with Zod
// app/api/contact/route.ts
import { z } from 'zod'
import { NextResponse } from 'next/server'

const schema = z.object({
  email: z.string().email().max(255),
})

export async function POST(request: Request) {
  const body = await request.json()

  // Server-side validation - cannot be bypassed
  const result = schema.safeParse(body)
  if (!result.success) {
    return NextResponse.json(
      { error: 'Invalid input' },
      { status: 400 }
    )
  }

  await saveContact(result.data.email)
  return NextResponse.json({ success: true })
}

// SECURE: Server Actions with auth + authorization
'use server'

import { auth } from '@/lib/auth'
import { z } from 'zod'

export async function deleteUser(userId: string) {
  const session = await auth()

  // Auth check
  if (!session?.user) {
    throw new Error('Unauthorized')
  }

  // Authorization: only admins can delete users
  if (session.user.role !== 'admin') {
    throw new Error('Forbidden')
  }

  await db.user.delete({ where: { id: userId } })
  return { success: true }
}

export async function updateProfile(formData: FormData) {
  const session = await auth()
  if (!session?.user) throw new Error('Unauthorized')

  // Only update the current user's profile (prevents IDOR)
  await db.user.update({
    where: { id: session.user.id }, // Use session, not form input
    data: { name: formData.get('name') as string }
  })
}

// SECURE: Server Component with auth
import { auth } from '@/lib/auth'
import { redirect } from 'next/navigation'

export async function UserDashboard() {
  const session = await auth()

  if (!session?.user) {
    redirect('/login')
  }

  // Fetch only the current user's data - no IDOR possible
  const data = await db.user.findUnique({
    where: { id: session.user.id }
  })

  return <div>{/* render data */}</div>
}

// SECURE: Production-safe error handling
export async function POST(request: Request) {
  const body = await request.json()

  try {
    const user = await authenticateUser(body.email, body.password)
    return NextResponse.json({ token: user.token })
  } catch (error) {
    // Log sanitized info internally
    console.error('Auth failed for:', body.email?.substring(0, 3) + '***')

    // Return generic error to client - no details
    return NextResponse.json(
      { error: 'Authentication failed' },
      { status: 401 }
    )
  }
}