Lesson 912 of 2116
Secrets, Env Vars, And The Frontend Trap
API keys in browser code are public. Learn the difference between public configuration and private secrets before connecting payments or AI APIs.
Lesson map
What this lesson covers
Learning path
The main moves in order
- 1Secrets, Env Vars, And The Frontend Trap
- 2environment variables
- 3secrets
- 4frontend
Concept cluster
Terms to connect while reading
Section 1
Secrets, Env Vars, And The Frontend Trap
API keys in browser code are public. Learn the difference between public configuration and private secrets before connecting payments or AI APIs.
- 1Name the job before naming the tool.
- 2Write the smallest useful scope the agent can finish.
- 3Run the result as a user, not as a fan of the tool.
- 4Inspect the diff, data access, and failure path before sharing.
Use this as the working prompt or checklist for the lesson.
Move the AI provider key out of client code. Create a server route that receives a prompt, validates length, calls the provider with the secret key, and returns only the safe response.- What should the user be able to do when this is finished?
- What data should the app or agent never expose?
- What test proves the change works?
- What rollback path exists if the output is wrong?
Key terms in this lesson
End-of-lesson quiz
Check what stuck
15 questions · Score saves to your progress.
Tutor
Curious about “Secrets, Env Vars, And The Frontend Trap”?
Ask anything about this lesson. I’ll answer using just what you’re reading — short, friendly, grounded.
Progress saved locally in this browser. Sign in to sync across devices.
Related lessons
Keep going
Creators · 13 min
Security Review of AI-Generated Code
AI happily writes code with classic vulnerabilities. Learn the OWASP-aligned review checklist for AI output, the prompts that catch issues early, and the tools that automate the rest.
Creators · 35 min
Letting AI Wire Up APIs You Don't Fully Understand
Stripe, Resend, Twilio used to take a weekend to integrate. Now you describe what you want and read the result — safely.
Creators · 14 min
The 10-Minute Security Check
Before a vibe-coded app leaves your laptop, check auth, database policies, secrets, file uploads, admin routes, rate limits, and public pages. Write the smallest useful scope the agent can finish.