Never Pass Secrets or Sensitive Data to Client Components

// app/page.tsx (Server Component)
export default async function Page() {
  const config = {
    apiKey: process.env.STRIPE_SECRET_KEY,   // ❌ Secret key!
    dbUrl: process.env.DATABASE_URL,          // ❌ Connection string!
    internalUserId: 'usr_admin_29384',        // ❌ Internal ID!
  }
 
  return <Dashboard config={config} />
}
 
// components/Dashboard.tsx
'use client'
export function Dashboard({ config }) {
  // All of config is now in the browser HTML and RSC payload
}

// ❌ Passing entire user record to client
async function Page() {
  const user = await db.user.findUnique({
    where: { id: userId },
  }) // Returns 30+ fields including passwordHash, ssn, etc.
 
  return <Profile user={user} />
}

// app/page.tsx (Server Component)
export default async function Page() {
  // ✅ Keep secrets server-side, pass only public config
  const publishableKey = process.env.NEXT_PUBLIC_STRIPE_KEY
 
  return <Dashboard stripeKey={publishableKey} />
}

// ✅ Select only the fields the client needs
async function Page() {
  const user = await db.user.findUnique({
    where: { id: userId },
    select: {
      name: true,
      email: true,
      avatarUrl: true,
      // Only fields the UI actually renders
    },
  })
 
  return <Profile user={user} />
}

// lib/secrets.ts
import 'server-only'
 
export const config = {
  stripeSecret: process.env.STRIPE_SECRET_KEY!,
  dbUrl: process.env.DATABASE_URL!,
}
// Importing this file in a Client Component will now cause a build error

# Find env vars being passed as props (potential leaks)
grep -rn "process\.env\." src/ --include="*.tsx" | grep -v "NEXT_PUBLIC"
# Find large objects being passed to client components
grep -rn "findUnique\|findFirst\|findMany" src/ --include="*.tsx" | grep -v "select:"