How to Fix Netlify API Key Exposure (2026)

Netlify's CI pipeline clones your git repository and runs your build. If a secret ends up in that build with the wrong variable prefix, it ends up in your JavaScript bundle and every visitor can read it. In our scans of apps deployed to Netlify, VITE_-prefixed secrets and REACT_APP_-prefixed secrets are the two most common sources of API key exposure.

The fix is the same regardless of which prefix caused it: rotate the key, move the API call server-side, and store the secret without any public prefix.

Step 1: Find the Exposed Key

Confirm exactly what is out and how it got there before rotating.

# Vite projects (React, Vue, Svelte with Vite)
grep -r "VITE_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.vue"

# Create React App projects
grep -r "REACT_APP_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js"

# Next.js on Netlify
grep -r "NEXT_PUBLIC_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js"

# Hardcoded key values 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

Step 2: Rotate the Exposed Key Immediately

Rotate before you touch the code. The key is already out.

Step 3: Remove from Git History (if committed)

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. If the repo was public at any point, treat the key as compromised regardless of whether you can confirm access.

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 (Public Variable Prefixes)

Different build tools use different prefixes, but they all do the same thing: copy the variable value into the client JavaScript bundle.

The Vite Case (Most Common on Netlify)

Wrong (key baked into the browser bundle):

// src/api/chat.ts (runs in the browser)
const client = new OpenAI({
  apiKey: import.meta.env.VITE_OPENAI_API_KEY, // visible to any visitor
  dangerouslyAllowBrowser: true,
});

Right (key stays server-side in a Netlify Function):

// netlify/functions/chat.ts (runs only on the server)
import { Handler } from "@netlify/functions";
import OpenAI from "openai";

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }); // no VITE_ prefix

export const handler: Handler = async (event) => {
  const { message } = JSON.parse(event.body || "{}");
  const response = await client.chat.completions.create({
    model: "gpt-4o",
    messages: [{ role: "user", content: message }],
  });
  return {
    statusCode: 200,
    body: JSON.stringify({ reply: response.choices[0].message.content }),
  };
};

Your React component calls /.netlify/functions/chat on your own domain. The Netlify Function calls OpenAI. The key never reaches the browser.

The Create React App Case

Same pattern, different prefix. Remove REACT_APP_ from any secret variable name and move the API call to a Netlify Function. Name the server-side variable without any prefix: OPENAI_API_KEY instead of REACT_APP_OPENAI_API_KEY.

Variable Naming in Netlify

Variables without a public prefix are available only in Netlify Functions. The Netlify dashboard injects them at function runtime, never into the client build.

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(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY // full DB access to every visitor
);

// Right: anon key in components, service_role only in Netlify Functions
// Component:
const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY // safe, controlled by RLS
);

// netlify/functions/admin-task.ts (server only):
const adminClient = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY! // no VITE_ prefix
);

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

Step 6: Protect Deploy Previews

Netlify generates a public URL for every branch push and pull request. Any VITE_ or REACT_APP_ variables in those preview builds are visible to anyone with the URL.

Go to Site Settings > Build & Deploy > Deploy contexts:

• Restrict access to deploy previews: enable password protection or authentication
• Set preview-specific env var values: use test keys or dummy values for the Deploy Previews context so a leaked preview URL doesn't expose production credentials

In Netlify's environment variable panel, you can scope each variable to specific contexts:

OPENAI_API_KEY = sk-prod-real-key    (Production only)
OPENAI_API_KEY = sk-test-safe-key   (Deploy Previews + Branch deploys)

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 Netlify