Environment Variables · A Security Cheatsheet
Every framework has a rule for which environment variables ship to the client. Miss the rule and you leak a secret. Vite: `VITE_*` is public. Next.js: `NEXT_PUBLIC_*` is public. Create-React-App: `REACT_APP_*` is public. Nuxt: variables in `runtimeConfig.public` are public. Anything else is server-only · usually.
Common misconfigurations
- Secret behind a public prefix · Stripe secret keys, service-role tokens, or third-party API keys under `VITE_` / `NEXT_PUBLIC_` are the #1 leak pattern.
- .env committed to git · Add `.env`, `.env.local`, `.env.*.local` to `.gitignore` on day one. Rotate anything that ever got committed.
- Same key in dev and prod · Separate keys let you rotate one without breaking the other, and limit blast radius.
- Env vars in client-side error messages · Some monitoring tools capture `process.env` in crash reports · scrub before send.
Example
Find leaked secrets in your build
# After a production build:
rm -rf dist && npm run build
grep -r "sk_live\|service_role\|AKIA\|xoxb-" dist/ && echo "LEAK" || echo "clean"Frequently asked
Is the Supabase anon key a secret?
No · it's designed to be public. RLS is what protects your data.
What if I accidentally committed a secret?
Rotate it immediately. Removing from git history doesn't help; assume it's been scraped.
Where should server-only secrets live?
Your host's secret manager (Vercel, Netlify, Cloudflare) · never in the repo, never in the client bundle.