Phase 6: Building With Real Data · 25 min · Any vibe coding tool · Vercel · Netlify

Environment Variables and Secrets

Secrets in code = secrets leaked. Environment variables are the only safe way.

Hiring signal: What changes when you use this: you can manage secrets safely — which means you don't leak API keys or database passwords.

What you will learn

Understand what environment variables are and why they matter
Use the .env file pattern correctly
Know what goes in .env (secrets) vs. what goes in code (logic)
Gitignore .env files — never commit secrets
Distinguish safe-to-expose keys from dangerous ones
Set environment variables on deployment platforms

Your Mission

Find all hardcoded secrets in your project, move them to .env, and verify .gitignore is correct. Output: secrets_audit.md.

You need: A project with API keys, database credentials, or any secrets.

Time: 20 minutes.

Step 1: Learn the Pattern (3 min)

BAD — hardcoded:

const supabase = createClient('https://xxxxx.supabase.co', 'eyJhbGciOi...')

If pushed to GitHub, anyone can see your keys. Bots scan repos within minutes.

GOOD — environment variables:

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

Naming: Vite apps use VITE_ prefix. Next.js uses NEXT_PUBLIC_. Check your framework's docs.

Safe vs. dangerous keys: | Key | Safe in Frontend? | Why | |-----|-------------------|-----| | Supabase anon key | Yes | Restricted by RLS | | Supabase service_role | NO | Bypasses all security | | Stripe publishable key | Yes | Client-side only | | Stripe secret key | NO | Full account access | | OpenAI API key | NO | Full account + billing |

Rule of thumb: "publishable," "public," or "anon" = usually safe. "secret," "service," or "private" = server only.

The .env commit mistake
The most common secret leak in vibe-coded apps: the AI creates .env but doesn't add it to .gitignore. The user pushes to GitHub. Secrets are now public. ALWAYS check that .env is in .gitignore before pushing. If you've already pushed, rotate the keys immediately.

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Step 2: Search for Hardcoded Secrets (5 min), Secrets Found, Step 3: Move Secrets to .env (5 min), .env Created, Step 4: Verify .gitignore (3 min), .gitignore Check, Step 5: Verify the App Still Works (2 min), Verification, Step 6: If Deploying — Set Env Vars on Platform (2 min), Deployment Env Vars, You're Done — plus a hands-on lab, quiz, and project artifact.

Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.