How to Fix Vercel API Key Exposure (2026)

Vercel's CI pipeline clones your git repository and runs your build. If a secret is in that repo, it ends up in the build logs. If it has a NEXT_PUBLIC_ prefix, it ends up in every visitor's browser. In our scans of Next.js apps deployed to Vercel, exposed API keys are the most common critical finding, and the majority trace back to one of two mistakes: a misnamed environment variable or a committed .env file.

This guide covers both root causes, plus the Vercel-specific risks that other platforms don't have.

Step 1: Find the Exposed Key

Start by confirming exactly what is out and how it got there.

# Search for variables with the public prefix
grep -r "NEXT_PUBLIC_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js"

# Also check for hardcoded key values directly in component files
grep -rE "(sk_proj_|sk_live_|AKIA|Bearer ey)" . --include="*.ts" --include="*.tsx" --include="*.js"

git log --all --full-history -- .env
git log --all --full-history -- .env.local
git log --all --full-history -- .env.production
git log --all --full-history -- .env.production.local

Step 2: Rotate the Exposed Key Immediately

Rotate before you fix anything else. The key is already out.

Step 3: Remove from Git History (if committed)

If your audit found secrets in git history, scrubbing the current file is not enough. The secret exists in every previous commit.

# Install git-filter-repo
pip install git-filter-repo

# Remove all .env variants from history
git filter-repo --path .env --invert-paths
git filter-repo --path .env.local --invert-paths
git filter-repo --path .env.production --invert-paths

Force-push to all remotes after scrubbing and ask any collaborators to re-clone. If the repo was public at any point during the exposure, treat the key as compromised regardless of whether you can confirm access.

Add the env files to .gitignore before your next commit:

echo ".env" >> .gitignore
echo ".env*.local" >> .gitignore
echo ".env.production" >> .gitignore
git add .gitignore && git commit -m "chore: gitignore .env files"

Step 4: Fix the Root Cause (NEXT_PUBLIC_ Prefix)

Rotating stops the immediate bleeding. This step stops it from happening again.

Why NEXT_PUBLIC_ Exposes Your Key

Next.js statically replaces process.env.NEXT_PUBLIC_* references at build time. The value gets embedded literally in the JavaScript output. Even if Vercel stores the variable in encrypted storage, the NEXT_PUBLIC_ prefix instructs Next.js to copy it into the bundle.

Wrong (key ends up in every visitor's browser):

// pages/index.tsx or app/page.tsx (runs in the browser)
const response = await fetch("https://api.openai.com/v1/chat/completions", {
  headers: {
    Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`, // visible to anyone
  },
});

Right (key stays server-side via a Route Handler):

// app/api/chat/route.ts (server-side only)
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const { message } = await req.json();
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, // no NEXT_PUBLIC_ prefix
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "gpt-4o",
      messages: [{ role: "user", content: message }],
    }),
  });
  const data = await response.json();
  return NextResponse.json({ reply: data.choices[0].message.content });
}

Your React component calls /api/chat on your own domain. Your Route Handler calls OpenAI. The key never reaches the browser.

Variable Naming in Vercel

In Vercel's environment variables panel, store secrets without any public prefix:

Variables without NEXT_PUBLIC_ are available only in server-side code: Route Handlers, Server Actions, getServerSideProps, and API routes.

If You're Using Vite on Vercel (not Next.js)

Vite uses the VITE_ prefix instead. The same rule applies: any VITE_-prefixed secret ends up in the client bundle. Move the secret call to a Vercel Serverless Function (a file in /api/):

// api/chat.ts (Vercel Serverless Function)
import type { VercelRequest, VercelResponse } from "@vercel/node";

export default async function handler(req: VercelRequest, res: VercelResponse) {
  // process.env.OPENAI_API_KEY is safe here, no VITE_ prefix needed
  const apiKey = process.env.OPENAI_API_KEY;
  // ... call OpenAI, return result
}

Step 5: Fix Supabase service_role Misuse

AI tools sometimes generate Supabase clients in frontend code using the service_role key. That key bypasses every Row Level Security policy in your database.

// Wrong: service_role in a React component
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY! // full DB access to every visitor
);

// Right: anon key in components, service_role only in Route Handlers
// Component:
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! // safe, controlled by RLS
);

// app/api/admin/route.ts (server only):
const adminClient = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY! // no NEXT_PUBLIC_ prefix
);

Enable RLS on every Supabase table. The anon key is safe to expose precisely because RLS restricts what it can do.

Step 6: Lock Down Preview Deploys

Every git branch push to Vercel creates a preview deployment at a public URL like your-app-git-branch-yourteam.vercel.app. By default, that URL is accessible to anyone without authentication, including all your environment variables.

Go to Project Settings > Deployment Protection and enable:

• Vercel Authentication: requires a Vercel account login to access preview URLs
• Password Protection: prompts for a password on all preview deployments

Set Preview environment variables to dummy values (different from production) so leaked preview builds don't expose production keys:

OPENAI_API_KEY = sk_preview_dummy_value_that_wont_drain_credits

This limits blast radius when a preview URL leaks.

Step 7: Prevent Future Leaks

Pre-commit Hook with Gitleaks

# Install gitleaks (macOS)
brew install gitleaks

# Test your current repo
gitleaks detect --source . --verbose

# Add pre-commit hook
cat > .git/hooks/pre-commit << 'HOOKEOF'
#!/bin/sh
gitleaks protect --staged --verbose
if [ $? -ne 0 ]; then
  echo "Gitleaks found potential secrets. Commit blocked."
  exit 1
fi
HOOKEOF
chmod +x .git/hooks/pre-commit

Where Secrets Go on Vercel