Vibe Coding · Lesson

Handling Secrets and Keys

Keep API keys safe, not in your prompts.

Handling Secrets and Keys is a free Vibe Coding lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vibe Coding learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Some Things Must Stay Secret

Many services give you an API key — a secret password that proves your app is allowed to use them. Payment tools, AI models, and email services all use keys.

If a key leaks, strangers can run up your bill or abuse your account. So a core vibe-coding habit is knowing how to keep secrets out of the wrong places — including out of your prompts.

What a Key Looks Like

An API key is usually a long random string. You include it with requests so the service knows it's you.

The danger: it's just text, so it's easy to accidentally paste it somewhere public. Treat a key like a house key — you wouldn't tape it to your front door.

sk_live_8f2a91c4d7e0b36a55f1c9a...
(a real key is long, random, and SECRET)

The Golden Rule: Never Hardcode Keys

The most common mistake is pasting a key directly into your code. AI sometimes does this too. If that code goes public (like on GitHub), your key is exposed to the world within minutes.

Instead, keys live in a separate, private place. Tell AI explicitly to never put the key in the code itself.

Never put my API key directly in the code. Read it
from an environment variable instead, and add the
key name to a .env file that is ignored by git.

Environment Variables

The standard safe home for secrets is an environment variable — a value stored outside your code that the app reads at runtime. Your code refers to it by name, not by the actual secret.

This snippet shows how code reads a key by name rather than containing the secret itself.

// The code only references the NAME, not the secret
const apiKey = process.env.WEATHER_API_KEY;

if (!apiKey) {
  console.log('No key found — set it in .env');
} else {
  console.log('Key loaded safely (length:', apiKey.length, ')');
}

The .env File and .gitignore

Secrets go in a file usually named .env. Crucially, you add .env to your .gitignore so it's never uploaded or shared. The code reads from it; the file stays on your machine.

Whenever you set up keys, double-check the .env file is ignored. Ask AI to confirm it for you.

Show me my .gitignore and confirm that .env is
listed in it. If it isn't, add it so my secret keys
never get committed to git.

Don't Paste Secrets into Prompts

It's tempting to paste a real key into a chat with AI so it 'just works.' Don't. Your prompts may be logged, and the key could end up in shared history.

Instead, use a placeholder. Tell AI the variable name and let it write code that reads the real value from your .env locally.

Use an environment variable called
OPENAI_API_KEY for the key. I'll add the real
value to my .env file myself — just write the code
to read it from there.

Frontend Keys Are Visible

Here's a trap: any key in code that runs in the user's browser can be seen by anyone who looks. Browser code is never truly secret.

So secret keys (like payment or AI keys) must be used from a server or serverless function, not directly in the page. Ask AI to route sensitive calls through the backend.

This AI feature needs my secret key, but the call
is currently in the browser where users could see
it. Move the request to a serverless function so
the key stays on the server and is never exposed to
the frontend.

Setting Secrets on Hosting Platforms

When you deploy to hosts like Vercel, Netlify or Replit, you don't upload your .env file. Instead, each platform has a settings page where you add environment variables securely.

Your code reads them the same way — by name. The platform keeps the actual values safe.

I'm deploying this to Vercel. Tell me exactly which
environment variables I need to add in the Vercel
dashboard, and confirm the code reads each one by
name so deployment works.

What to Do If a Key Leaks

If a key ever ends up somewhere public, don't panic — rotate it. Go to the service's dashboard, delete the old key, and generate a new one. The leaked key instantly stops working.

Then update your .env and hosting settings with the new value. Treat leaked keys as compromised, always.

A Simple Secrets Checklist

Make these habits automatic on every project:

Keys live in .env, never in code
.env is listed in .gitignore
Secret keys run on the server, not in the browser
Never paste real keys into AI prompts
On hosting, add keys in the dashboard, not the repo

Tell your AI tool to follow this checklist and it will set things up safely by default.

Limit What a Key Can Do

Many services let you restrict a key so a leak does less damage: cap its spending, limit it to certain domains, or give it read-only access.

Setting these limits is a smart safety net. When a service offers it, ask AI to walk you through adding usage caps and domain restrictions in the dashboard.

Walk me through adding a monthly spending limit and
a domain restriction to my API key in this
service's dashboard, so that even if the key leaks,
the damage is capped.

Quick Check

You're adding a paid AI feature that needs a secret key. Where should that key live so it stays safe?

Recap: Handling Secrets and Keys

You learned that API keys are secret passwords that must never be hardcoded or pasted into prompts. Safe keys live in environment variables via a .env file that's git-ignored, and secret keys run on the server, not in the browser.

You saw how to set secrets on hosts like Vercel, and how to rotate a leaked key. Follow the checklist and AI will set things up safely. You've now covered files, APIs, and data — the building blocks of real apps.

Frequently asked questions

Is the “Handling Secrets and Keys” lesson free?

Yes — the full text of “Handling Secrets and Keys” is free to read here on the web, and the Vibe Coding course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vibe Coding course, upgrade to CoddyKit PRO.

What will I learn in “Handling Secrets and Keys”?

Keep API keys safe, not in your prompts. You practise Vibe Coding with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vibe Coding?

No prior experience is required. Vibe Coding on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Handling Secrets and Keys” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vibe Coding lesson?

Yes. Every Vibe Coding lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vibe Coding