OpenAI or Anthropic API key exposed in your app: how to fix it
Critical
AI provider keys (sk-proj-…, sk-ant-…, gsk_…, sk-or-v1-…, xai-…, r8_…) in browser code can be copied by anyone and used at your expense until you revoke them.
Why it matters
Calling an AI API straight from React is the fastest way to get a demo working, so it's a common shortcut in AI-generated apps. Leaked keys get abused for free inference, and you pay for it.
Quick fix
- Revoke the key in your provider's dashboard and create a new one.
- Set a monthly spend limit at the provider.
- Call the AI API from a server function that keeps the key in a server-only env variable.
- Add authentication and per-user rate limits to that function so it can't become a free proxy.
Step by step
1. Revoke and replace
OpenAI: platform.openai.com → API keys. Anthropic: console.anthropic.com → API Keys. Delete the exposed key, create a new one, and set usage limits.
2. Proxy through your server
Move the call that needs the key to server-side code (a Supabase Edge Function, a Vercel/Netlify function, or a Next.js API route / server action) and store the key as a server-only environment variable. In Vite apps, any variable starting with VITE_ is bundled into the browser; in Next.js, anything starting with NEXT_PUBLIC_ is.
// app/api/chat/route.js (Next.js)
export async function POST(req) {
// 1) check the user is logged in 2) rate-limit per user
const { messages } = await req.json();
const r = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json" },
body: JSON.stringify({ model: "gpt-4o-mini", messages: messages.slice(-20) }),
});
return new Response(r.body, { status: r.status });
}3. Rate-limit
Without auth and limits, your new endpoint is just a free AI proxy for strangers. Require a logged-in user and cap requests per user per minute/day.
Prompt for your AI builder
Paste this into Lovable, Bolt, v0, Cursor or Replit, then review the changes before deploying.
My AI provider API key is exposed in the front-end bundle. Remove it from all client code and VITE_/NEXT_PUBLIC_ variables. Create a server-side endpoint (or Supabase Edge Function) that calls the AI API using a server-only environment variable, requires an authenticated user, validates and truncates the input, and enforces a per-user rate limit. Update the front end to call this endpoint instead of the provider directly.FAQ
I deleted the key from my code. Am I safe now?
No. Once a key has shipped to browsers it should be treated as public. It is in old deployments, caches and anyone's saved copy of your JavaScript. Revoke it at the provider and create a new one; removing it from code only stops future leaks.