NEXT_PUBLIC_ Prefixed API Key — $8,000 OpenAI Bill Before Anyone Noticed

# ============================================
# Find NEXT_PUBLIC_ variables that look like secrets
# ============================================

# === Check all .env files for NEXT_PUBLIC_ with suspicious names ===
grep -rn 'NEXT_PUBLIC_' .env* 2>/dev/null | grep -i 'key\|secret\|token\|password\|auth\|api'

# === Check if secrets are exposed in the built bundle ===
# Look for common API key patterns in the compiled JS
rg 'sk-[A-Za-z0-9]{20,}' .next/static/ 2>/dev/null || echo 'No OpenAI keys found in bundle'
rg 'AKIA[0-9A-Z]{16}' .next/static/ 2>/dev/null || echo 'No AWS keys found in bundle'

# === Check all .env.{environment} files ===
ls -la .env*

# === Verify which env vars are set ===
node -e "console.log(process.env.NEXT_PUBLIC_API_KEY || 'NOT SET')"

# === List all NEXT_PUBLIC_ references in source ===
grep -rn 'NEXT_PUBLIC_' src/ app/ lib/ --include='*.ts' --include='*.tsx' --include='*.js' --include='*.jsx'

// ============================================
// Server-Only Environment Variables
// ============================================

// ---- WRONG: Accessing server-only env in client component ----
// This file has 'use client' — process.env.OPENAI_KEY is undefined here

'use client'

function WrongComponent() {
  // process.env.OPENAI_KEY is undefined in the browser
  return null
}

// ---- CORRECT: Server Action handles the secret ----

// File: app/actions/generate.ts
'use server'

import OpenAI from 'openai'

export async function generateDescription(
  prompt: string
): Promise<string> {
  // This runs on the server — OPENAI_KEY is available here
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_KEY,
  })

  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: prompt }],
  })

  return response.choices[0]?.message?.content || ''
}

// ---- CORRECT: Server Component fetches, client renders ----

// File: app/products/[slug]/page.tsx (Server Component)
export default async function ProductPage({
  params,
}: {
  params: { slug: string }
}) {
  // Server Component has access to all env vars
  const apiUrl = process.env.API_URL
  const product = await fetch(`${apiUrl}/products/${params.slug}`).then(
    r => r.json()
  )

  return <ProductDetails product={product} />
}

// ---- CORRECT: lib/env.ts validates at startup ----

export function getServerConfig() {
  return {
    openaiKey: process.env.OPENAI_KEY,
    databaseUrl: process.env.DATABASE_URL,
    redisUrl: process.env.REDIS_URL,
  }
}

// ============================================
// Runtime Environment Variable Validation
// ============================================

import { z } from 'zod'

// ---- Schema for all required environment variables ----

const envSchema = z.object({
  // Database
  DATABASE_URL: z
    .string()
    .url('DATABASE_URL must be a valid URL'),

  // Auth
  AUTH_SECRET: z
    .string()
    .min(32, 'AUTH_SECRET must be at least 32 characters'),
  AUTH_ORIGIN: z
    .string()
    .url('AUTH_ORIGIN must be a valid URL'),

  // External APIs
  OPENAI_KEY: z
    .string()
    .min(1, 'OPENAI_KEY is required'),
  STRIPE_SECRET_KEY: z
    .string()
    .startsWith('sk_', 'STRIPE_SECRET_KEY must start with sk_'),

  // Optional with defaults
  NODE_ENV: z
    .enum(['development', 'production', 'test'])
    .default('development'),
  LOG_LEVEL: z
    .enum(['debug', 'info', 'warn', 'error'])
    .default('info'),

  // Public-facing values (safe for NEXT_PUBLIC_)
  NEXT_PUBLIC_GA_ID: z
    .string()
    .regex(/^G-[A-Z0-9]+$/, 'GA_ID must be a valid Google Analytics ID')
    .optional(),
  NEXT_PUBLIC_API_URL: z
    .string()
    .url('API_URL must be a valid URL')
    .optional(),
})

export type Env = z.infer<typeof envSchema>

// ---- Parse and validate at module load ----

const parsed = envSchema.safeParse(process.env)

if (!parsed.success) {
  console.error('❌ Invalid environment variables:')
  for (const issue of parsed.error.issues) {
    console.error(`  - ${issue.path.join('.')}: ${issue.message}`)
  }
  console.error('\nFix the above missing/misconfigured variables before starting.')
  process.exit(1)
}

export const env: Env = parsed.data

// ---- Use in your app ----

import { env } from '@/lib/env'

// Type-safe, validated access
const db = new Pool({ connectionString: env.DATABASE_URL })

// ============================================
// API Key Security Utility
// ============================================

import { env } from '@/lib/env'

// ---- Verify IP restrictions (run before using the key) ----

export function verifyServerIP(): boolean {
  // This runs on the server — check if we're calling from the expected IP
  // Implementation depends on your hosting platform
  return true
}

// ---- Usage monitoring wrapper ----

interface APIUsage {
  endpoint: string
  tokens: number
  cost: number
  timestamp: number
}

async function trackAPIUsage(usage: APIUsage) {
  // Log usage to your monitoring system
  console.log('API_USAGE', usage)

  // Check against budget
  const dailyCost = await getDailyCost()
  const DAILY_LIMIT = 50 // $50 daily limit

  if (dailyCost + usage.cost > DAILY_LIMIT) {
    throw new Error(
      'API budget limit reached. Please try again tomorrow.'
    )
  }
}

// ---- Wrapped OpenAI client with budget checks ----

import OpenAI from 'openai'

const openai = new OpenAI({ apiKey: env.OPENAI_KEY })

export async function generateWithBudget(
  prompt: string
): Promise<string> {
  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [{ role: 'user', content: prompt }],
  })

  const usage = {
    tokens: response.usage?.total_tokens || 0,
    cost: (response.usage?.total_tokens || 0) * 0.00001, // gpt-4o pricing
    endpoint: 'chat.completions',
    timestamp: Date.now(),
  }

  // Non-blocking tracking — don't fail the request on tracking error
  trackAPIUsage(usage).catch(console.error)

  return response.choices[0]?.message?.content || ''
}

# ============================================
# .env File Resolution Order
# ============================================

# === File hierarchy (highest priority first) ===
# 1. .env.local              — Local overrides, NEVER committed
# 2. .env.development        — Development-specific
# 3. .env.production         — Production defaults (values for reference)
# 4. .env.test               — Test environment
# 5. .env                    — Shared defaults, committed

# === When each is loaded ===
# next dev     → .env.development + .env.local
# next build   → .env.production + .env.local
# next start   → .env.production + .env.local
# npm test     → .env.test + .env.local

# === Production environments ===
# On Vercel: variables set in Vercel Dashboard > Environment Variables
# NEVER put production secrets in .env.production — it's in your repo

# === Example .env file setup ===

# .env (committed — public defaults):
NEXT_PUBLIC_APP_NAME=MyApp
NEXT_PUBLIC_CONTACT_EMAIL=hello@example.com

# .env.local (gitignored — secrets):
DATABASE_URL=postgres://localhost:5432/myapp
OPENAI_KEY=sk-...
SESSION_SECRET=local-dev-secret

# .env.production (committed — reference values, no real secrets):
DATABASE_URL=postgres://production:5432/myapp
NEXT_PUBLIC_API_URL=https://api.production.com

# === Check which file is overriding your value ===
grep -rn 'MY_VAR' .env* 2>/dev/null

// ============================================
// NEXT_PUBLIC_ Decision Guide
// ============================================

/*
SAFE for NEXT_PUBLIC_:
  - Google Analytics ID (G-XXXXXXXX)
  - Public API base URL
  - Sentry DSN (public DSN)
  - Feature flags (client-side)
  - Environment name (production/staging)
  - Contact email
  - App version/commit SHA
  - Public keys for client-side crypto (not private keys)

NEVER use NEXT_PUBLIC_ for:
  - API keys (OpenAI, Stripe, AWS, Twilio, etc.)
  - Database connection strings
  - Auth secrets and JWT signing keys
  - Internal service URLs
  - Admin credentials
  - Any value with a monetary cost per use
  - Any value that grants access to user data
*/

// ---- Good NEXT_PUBLIC_ usage ----

export function GoogleAnalytics() {
  return (
    <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
    />
  )
}

// ---- Bad NEXT_PUBLIC_ usage ----

// DON'T: process.env.NEXT_PUBLIC_OPENAI_KEY
// DON'T: process.env.NEXT_PUBLIC_STRIPE_KEY
// DON'T: process.env.NEXT_PUBLIC_DATABASE_URL

// ---- Pre-commit hook to catch NEXT_PUBLIC_ secrets ----

// Add to .husky/pre-commit:
// #!/bin/sh
// grep -rn 'NEXT_PUBLIC_' .env* src/ app/ --include='*.ts' --include='*.tsx' \
//   | grep -iE '(key|secret|token|password|auth)' && \
//   echo 'ERROR: NEXT_PUBLIC_ contains a secret! Remove the prefix or rename the variable.' \
//   && exit 1 || exit 0