API keys are visible in your app code

Why it happens

Try this first

1. 01

   Replace the exposed keys first

   Go to each service, create a new key and delete the old one. Do this before anything else. The old key may already be copied.

2. 02

   Move the call to a server function

   Create a small server function that holds the key and talks to the service. Your app calls your function instead of the service. Supabase Edge Functions, Netlify Functions and Next.js route handlers all work. Here is a Next.js example:

   // app/api/chat/route.ts
   export async function POST(req: Request) {
     const { message } = await req.json()
   
     const res = await fetch('https://api.openai.com/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
       },
       body: JSON.stringify({
         model: 'your-model-name',
         messages: [{ role: 'user', content: message }],
       }),
     })
   
     return Response.json(await res.json())
   }

3. 03

   Store the key without a public prefix

   Call it OPENAI_API_KEY, not VITE_OPENAI_API_KEY or NEXT_PUBLIC_OPENAI_API_KEY. Those prefixes send the value to the browser.

4. 04

   Set spending limits

   Most paid APIs let you set a monthly limit or an alert. Turn it on, so a future leak cannot turn into a huge bill.

5. 05

   Check your git history

   If a key was ever saved in a public repository, treat it as leaked, even if you deleted the file later. The old version is still in the history.

Related fixes