Environment variables undefined after deploy

Works locally, breaks on Vercel or Netlify with undefined API keys. Why env vars go missing in AI-built apps and how to fix them safely.

What you are seeing

process.env.SOMETHING is undefined in production but fine locally.
Supabase or Firebase says "supabaseUrl is required" or similar on the live site.
The value works on the server but is empty in the browser.

Why it happens

The variable is in your local .env file but was never added in the host's dashboard. .env is usually gitignored, so it does not deploy.
It was added after the last build. Client-side variables are baked in at build time, so you need to redeploy.
Browser code needs a public prefix: NEXT_PUBLIC_ for Next.js, VITE_ for Vite. Without it the value is stripped.
It was set for Preview but not Production (or the reverse).
A typo or a different name between local and hosted settings.

How to fix it

1. List every variable the code reads

grep -rhoE "process\.env\.[A-Z0-9_]+|import\.meta\.env\.[A-Z0-9_]+" src app lib 2>/dev/null | sort -u

2. Compare with what the host has (Vercel example)

vercel env ls

3. Add what is missing, then rebuild

vercel env add NEXT_PUBLIC_SUPABASE_URL production
vercel --prod

4. Make sure no secret got a public prefix

Anything named NEXT_PUBLIC_ or VITE_ ends up in the JavaScript bundle anyone can download. Service role keys, Stripe secret keys, and webhook secrets must never have that prefix.

How to know it is fixed

Open the live site, then check the browser console and your host's function logs. No undefined errors, and searching the built JS for sk_live, whsec_, or service_role finds nothing.