シークレットとキーを扱う

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.