← All posts
API keysvibe-codingsecuritysecrets managementAI coding

Prevent Leaked API Keys in Vibe-Coded Apps: A Practical Guide

O

OverMCP Team

Quick answer

To prevent leaked API keys in a vibe-coded app, you need to (1) centralize secrets management using environment variables and a secrets manager, (2) enforce key rotation and scoping so that even if a key leaks, the damage is limited, and (3) run automated secret scanning on every commit and before deployment. Most leaks happen because AI coding tools inadvertently hardcode keys or commit .env files, so a combination of technical controls and workflow habits is essential.

What to check first

Before you start fixing anything, run through this checklist to identify potential leak points:

  • Scan your codebase for hardcoded secrets: Search for patterns like sk-, api_key, secret, password, or token followed by a string of characters. Use grep -r or a tool like OverMCP's secret leak scanner.
  • Check your `.gitignore`: Ensure .env, .env.local, *.env, and similar files are ignored. Look for accidental commits of .env in your Git history.
  • Review your deployed environment: Log into your hosting provider (Vercel, Netlify, etc.) and verify that all API keys are stored as environment variables, not in the code.
  • Inspect client-side JavaScript: Open your browser's dev tools and look for any API keys bundled in the frontend code. If you see a secret key in the network tab or sources, it's exposed.
  • Check your build artifacts: After a build, inspect the output folder (e.g., .next, dist) for any .env files or hardcoded secrets.
  • Audit your public repositories: If your repo is public, use GitHub's secret scanning or a third-party tool to see if any keys have already been exposed.
  • Step-by-step fix

    Now, let's walk through a practical workflow to prevent leaked API keys in your vibe-coded app. This assumes you're using a Next.js app (common with Cursor, Bolt, v0), but the principles apply to any stack.

    1. Use environment variables for all secrets

    Never hardcode API keys in your source code. Instead, put them in environment variables. In Next.js, you'll use .env.local for local development, and set environment variables in your hosting dashboard for production.

    Example `.env.local`:

    STRIPE_SECRET_KEY=sk_live_...
    OPENAI_API_KEY=sk-proj-...
    DATABASE_URL=postgresql://...

    Then in your code, access them via process.env:

    const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

    Important: Never prefix a secret with NEXT_PUBLIC_ because that exposes it to the client. Only use that for non-sensitive config like NEXT_PUBLIC_ANALYTICS_ID.

    2. Centralize secrets with a secrets manager

    For a production app, consider using a secrets manager like Vercel's built-in environment variables, AWS Secrets Manager, or Doppler. This gives you versioning, rotation, and audit logs. With Vercel, you can add environment variables in the dashboard or via CLI:

    vercel env add STRIPE_SECRET_KEY

    3. Scope and rotate keys

    Every API key should have the least privilege needed. For example, if you're using Stripe, create a restricted key that only has permissions for the operations your app performs. If a key leaks, you can revoke it without affecting other services.

    Set up automatic rotation where possible. For AWS, use IAM roles and rotating credentials. For OpenAI, you can generate multiple keys and rotate them periodically.

    4. Implement secret scanning in CI/CD

    Add a secret scanning step to your CI/CD pipeline. Tools like gitleaks, trufflehog, or OverMCP's continuous security monitoring can detect secrets before they reach production. For GitHub Actions, you can use the gitleaks action:

    name: Secret Scanning
    on: [push, pull_request]
    jobs:
      scan:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - name: Run gitleaks
            uses: gitleaks/gitleaks-action@v2

    5. Monitor and alert on leaks

    Even with prevention, leaks can happen. Set up alerts for any exposed keys. OverMCP's secret leak scanner can continuously monitor your GitHub repos and notify you if a new commit includes a secret.

    6. Rotate keys immediately if a leak is detected

    If you find a leaked key, rotate it immediately. For example, if an OpenAI key is exposed, go to the dashboard, revoke that key, and create a new one. Update your environment variables accordingly.

    Common mistakes

    Vibe-coded apps often have these specific mistakes that lead to leaked API keys:

  • Hardcoded keys in components: AI tools may generate code with API keys directly in the component, especially if you asked it to integrate a service. Always check for apiKey or secret in your frontend code.
  • Committing .env to Git: AI coding assistants sometimes create .env files and don't add them to .gitignore. This is the most common cause of leaks.
  • Using `NEXT_PUBLIC_` for secrets: As mentioned, this exposes the key to the client. Double-check that you haven't accidentally prefixed a secret with NEXT_PUBLIC_.
  • Not rotating keys: Many developers use the same API key for years. If it leaks, the damage is extensive. Regular rotation limits the blast radius.
  • Ignoring client-side exposure: Some services (like Firebase) have public API keys that are meant to be exposed, but others (like Stripe secret keys) should never be exposed. Know the difference.
  • Why this matters for vibe-coded apps

    AI coding tools are great at generating code quickly, but they often skip security best practices. They might not know that a key is secret, or they might hardcode it to make the code run quickly. That's why you need to be extra vigilant. Using a free AI app security scanner can help you catch these issues before they become a problem.

    Final thoughts

    Preventing leaked API keys is not a one-time fix but an ongoing practice. By using environment variables, scoping keys, scanning for secrets, and rotating them regularly, you can protect your vibe-coded app from data breaches and unexpected bills. Start with the checklist above, implement the step-by-step fixes, and avoid the common mistakes. Your future self will thank you.

    FAQ

    What is the most common way API keys leak in vibe-coded apps?

    The most common way is committing .env files or hardcoding keys directly in source code, often because AI coding tools generate these patterns without proper security awareness.

    How often should I rotate my API keys?

    It's good practice to rotate keys at least every 90 days, or immediately if you suspect a leak. For high-security apps, consider more frequent rotation.

    Can I expose an API key on the client side?

    Only if the key is explicitly designed for public use (like Firebase Web API key). Never expose secret keys for Stripe, OpenAI, AWS, or similar services, as they grant privileged access.

    ---

    Want to scan your app for leaked API keys? Use our [free secret leak scanner](https://www.overmcp.com/tools/leak) or [connect your Vercel project](https://www.overmcp.com/connect/vercel) for continuous monitoring.

    Is your app secure?

    Free scan in 30 seconds. No signup needed.

    Scan My App Free