How to Find Leaked API Keys in Your Next.js App

TL;DR: To find leaked API keys in a Next.js app, check your client-side bundles for hardcoded secrets, scan your Git history with tools like truffleHog, and use automated scanners like OverMCP to detect exposed keys in your codebase. Fix them by moving secrets to environment variables and using a .env.local file that's never committed.

---

Why Leaked API Keys Are Dangerous

API keys are the keys to your kingdom. When leaked, attackers can use them to access your services, rack up bills, or steal data. In Next.js apps, common leaks happen because developers accidentally put secrets in client components or forget to add .env.local to .gitignore. Once pushed to a public repo, these keys are scraped within minutes by automated bots.

How to Find Leaked API Keys in Your Next.js App

1. Audit Your Client-Side Bundles

Next.js bundles all code imported into client components. If you accidentally import a server-only secret into a component, it ends up in the browser bundle. To check:

Example: If you have this in a client component:

// pages/index.js (client component)
import { someApiKey } from '../config' // ❌ Bad!

export default function Home() {
  // key ends up in browser
}

Fix: Move API calls to API routes or server components and use environment variables via NEXT_PUBLIC_ prefix only for public keys.

2. Scan Your Git History

Leaked keys often linger in Git history even after you remove them. Use truffleHog to scan:

# Install truffleHog
pip install trufflehog

# Scan your repo
trufflehog git file:///path/to/your/repo --json

This will output any high-entropy strings (likely secrets) found in commits. Also check for keys in commit messages or branch names.

3. Use Automated Scanners

Manual audits are tedious. Tools like OverMCP can automatically scan your Next.js app for leaked API keys, environment variable exposure, and other security issues. OverMCP integrates with your CI/CD pipeline to catch leaks before deployment.

4. Check Environment Variables

Ensure you're not accidentally exposing NEXT_PUBLIC_* variables that shouldn't be public. In Next.js, variables prefixed with NEXT_PUBLIC_ are inlined into the client bundle at build time. If you have a secret like:

NEXT_PUBLIC_STRIPE_SECRET_KEY=sk_test_...

This will be visible to anyone who opens your website's source code. Instead, use non-prefixed variables for secrets and access them only in server components or API routes via process.env.STRIPE_SECRET_KEY.

5. Search for Common Patterns

Use grep or IDE search for patterns like:

grep -r "sk_live" . --include="*.{js,ts,jsx,tsx}" --exclude-dir=node_modules

6. Review Your `.gitignore`

Make sure .env.local is in .gitignore. Also, check for any .env files that might have been committed. Use git log --all --full-history -- '*.env*' to see if any env files were ever tracked.

Step-by-Step Fix for Leaked Keys

# Install BFG
java -jar bfg.jar --delete-files .env.local

npx husky add .husky/pre-commit "npx --no-install secretlint **/*"

Preventing Future Leaks

FAQ

How do I check if my API key is exposed in a Next.js client bundle?

Build your app, then inspect the generated JavaScript files in .next/static/chunks/ for any hardcoded secrets. Alternatively, use a security scanner like OverMCP that automatically checks client-side code for exposed keys.

Can I recover a leaked API key?

No, you must revoke the leaked key immediately and generate a new one. Even if you remove it from the code, attackers who already scraped it can still use it.

What tools can automatically find leaked API keys in a Next.js app?

Tools like truffleHog, GitLeaks, and OverMCP can scan your Git history and codebase for leaked secrets. OverMCP is specifically designed for vibe-coded apps and integrates with your deployment pipeline.

---

Don't let a leaked API key ruin your app. Scan your Next.js project today with OverMCP to find and fix exposures before attackers do.