How to Secure API Keys in Your Web App
Step-by-step guide for vibe coders
TL;DR
TL;DR
Never put API keys in your code. Use environment variables (.env files) and keep them out of git. Secret keys (like Stripe's sk_) should only be used server-side. If a key is leaked, rotate it immediately.
Why This Matters
Exposed API keys are the #1 security issue in vibe-coded apps. When AI generates code, it often uses placeholder keys or puts real keys directly in the code. These can end up in your git history, exposing them to anyone who can see your repository.
Step-by-Step Guide
Create a .env file
Create a file named .env.local in your project root:
# .env.local
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
STRIPE_SECRET_KEY=sk_test_xxxxx
OPENAI_API_KEY=sk-xxxxx
# Safe for client (public keys only)
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxx
Add .env files to .gitignore
Open (or create) .gitignore and add:
# Environment files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.env.production
# Keep the example file
!.env.example
Create an example file
Create .env.example with placeholder values for documentation:
# .env.example (commit this file)
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
STRIPE_SECRET_KEY=sk_test_your_key_here
OPENAI_API_KEY=sk-your_key_here
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
Use environment variables in code
Access keys using process.env:
// Server-side code
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
// Verify key exists
if (!process.env.STRIPE_SECRET_KEY) {
throw new Error('Missing STRIPE_SECRET_KEY');
}
Keep secret keys server-side only
In Next.js, don't prefix secret keys with NEXT_PUBLIC_:
# WRONG - This exposes the key to the browser
NEXT_PUBLIC_STRIPE_SECRET=sk_live_xxxxx
# CORRECT - This stays server-side only
STRIPE_SECRET_KEY=sk_live_xxxxx
Set production variables in your hosting platform
Don't deploy .env files. Instead, set variables in your hosting dashboard:
- Vercel: Project Settings > Environment Variables
- Railway: Project > Variables
- Netlify: Site Settings > Environment Variables
- Render: Service > Environment ::
If Your Key Was Exposed
If you accidentally committed a key to git:
- Immediately rotate the key in the service's dashboard
- Update your production environment with the new key
- Don't try to remove it from git history - consider it compromised
- Check logs for unauthorized usage ::
Common Mistakes to Avoid
- Hardcoding keys in source files
- Using NEXTPUBLIC prefix for secret keys
- Committing .env files to git
- Sharing production keys across development and production
- Putting keys in frontend code that gets bundled
How to Check for Exposed Keys
# Search your codebase for common key patterns
grep -r "sk_live\|sk_test\|api_key\|apiKey" --include="*.ts" --include="*.js"
# Check if .env files are tracked in git
git ls-files | grep -E "^\.env"
# Check git history for keys
git log -p | grep -E "sk_live|sk_test|api_key"
Automate this: Run npx checkyourvibe scan to automatically detect exposed API keys in your codebase.
Exposed API Keys Explained
What they are and how to fix them
How to Enable Secret Scanning
Set up automated secret detection in CI