API key exposed in the frontend bundle

The provider call lives in a client component

If the function that calls OpenAI, Stripe, or GitHub runs in the browser, the key it uses is in the browser too. A file with "use client", a Vite page, a Replit frontend script, and a Bolt component are all browser code. A comment that says the file is server-only does not change where it runs.

How to check. Search the repo for api.openai.com, api.stripe.com, and api.github.com. A match in a component that renders JSX, or in a file that component imports, is on its way into the bundle.

A public env prefix inlined the secret

Vite replaces import.meta.env.VITE_* when it builds. Next.js replaces process.env.NEXT_PUBLIC_* the same way. The string in the built JavaScript is the value, not the variable name. Restarting the old deployment does not remove a value that was inlined. The site has to be built again after the name changes.

How to check. Open the deployed script and search for the key prefix. Then find that same value on the env screen under a VITE_ or NEXT_PUBLIC_ name. A server-only name has neither prefix.

The chat paste was written into source

Pasting sk-proj- or sk_live_ into a generator chat is a common way a const ends up in a source file. The preview works because the const is right there. The deploy publishes it.

How to check. Search the source, not only the env screen, for sk-proj-, sk_live_, AKIA, and ghp_. A hit in a file the client imports is the leak, even when the env screen is clean.

A production source map republishes the key

A .map file next to the script can contain the original line. Some hosts serve that map to anyone who requests it. Minified JavaScript that hides the key can still point at a map that contains it.

How to check. If the script ends with a sourceMappingURL, open that URL. Search the map for the same prefix. A map that contains the key is another public copy. Remove the map from the public host, or rebuild without publishing it.

1. Search the deployed site

The repo can be clean while the last build is not. Run this in the browser console on the deployed origin. It reads the HTML and the same-origin scripts. Top-level await works in the console. It prints the file URL and the first characters of each hit. A full key in your console is still a secret. Rotate it.

const html = await fetch(location.href).then((response) => response.text());
const urls = [location.href];
for (const match of html.matchAll(/<script[^>]+src=["']([^"']+)["']/gi)) {
  const url = new URL(match[1], location.href);
  if (url.origin === location.origin) urls.push(url.toString());
}
const pattern = /sk_live_[A-Za-z0-9]+|sk_test_[A-Za-z0-9]+|rk_live_[A-Za-z0-9]+|sk-(?:proj|live|test)-[A-Za-z0-9_-]{16,}|sk-ant-[A-Za-z0-9_-]+|AKIA[0-9A-Z]{16}|ghp_[A-Za-z0-9]{20,}/g;
for (const url of urls) {
  const body = url === location.href ? html : await fetch(url).then((response) => response.text());
  pattern.lastIndex = 0;
  for (const hit of body.matchAll(pattern)) console.log(url, hit[0].slice(0, 12));
}

2. Sort publishable keys from secrets

Stripe pk_ keys are publishable. The Supabase anon key is meant to be in the browser. Keep those. Stripe sk_ and rk_ keys, OpenAI keys, Anthropic keys, AWS access key ids, and GitHub personal access tokens are secrets. A Supabase JWT whose role is service_role is a secret too. That case has its own page, linked below. Older OpenAI keys are a bare sk- plus a long random string, with no proj, live, or test in the prefix. Search for those by hand. The pattern above looks for the prefixed forms.

3. Call your server from the component

The button can stay in the client. The provider call cannot. From the browser, call a route on your origin, or a Supabase function, and send the user's text. The key stays on the server. Reject signed-out callers when the feature is not public. An open route spends the key for anyone who finds the URL, which is the next bug.

// Supabase client, when the app already uses Supabase.
const { data, error } = await supabase.functions.invoke("complete", {
  body: { prompt },
});

// Same-origin Next.js route. Use one of these, not both.
await fetch("/api/complete", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ prompt }),
});

4. Put the provider call where the key is not bundled

Lovable and Bolt apps that already use Supabase can put the call in an Edge Function. Set the secret with supabase secrets set, which stores it for the function, not for the client. Leave verify_jwt on so the function requires the user's Supabase JWT. That is the opposite of a Stripe webhook function, which has to turn JWT verification off because Stripe does not send a Supabase user JWT. A Cursor or Replit app on Next.js can use a route handler instead. The route file has no "use client". The env name has no NEXT_PUBLIC_ prefix. Use whichever server your app actually deploys.

// supabase/functions/complete/index.ts
// supabase secrets set OPENAI_API_KEY=...
// Leave verify_jwt on. It is the default.
Deno.serve(async (request) => {
  const { prompt } = await request.json();
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      authorization: "Bearer " + Deno.env.get("OPENAI_API_KEY"),
      "content-type": "application/json",
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: String(prompt).slice(0, 4000) }],
    }),
  });
  return new Response(response.body, {
    status: response.status,
    headers: { "content-type": "application/json" },
  });
});

// app/api/complete/route.ts
// No VITE_ or NEXT_PUBLIC_ prefix. No "use client".
export async function POST(request: Request) {
  const { prompt } = await request.json();
  const response = 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: [{ role: "user", content: String(prompt).slice(0, 4000) }],
    }),
  });
  return Response.json(await response.json());
}

5. Rotate the key, then rebuild

Removing the key from the next source file does not un-copy the old one. In the provider's dashboard, revoke or roll the key that appeared in the bundle. OpenAI, Stripe, GitHub, and AWS each have a revoke or roll action on that key. Put the new value only in the server environment. Redeploy the function or the server. Rebuild the frontend so the client bundle is produced again. If a CDN is still serving the old asset name, wait until the HTML points at the new files, or purge that cache. Search the new HTML, scripts, and any source map for the old prefix.