What if my API keys are in the front end?
If a secret key, such as a Stripe secret, an OpenAI or Anthropic key, or a Supabase service role key, is in your front-end code, assume it has been copied. Revoke and rotate it, move the call it enables to a server function, and set spending limits. Public keys designed for the browser, like the Supabase anon key or a Stripe publishable key, are fine to expose.
Which keys are safe
| Key | Safe in the browser |
|---|---|
| Supabase anon key | Yes, with row level security |
| Supabase service role key | Never |
| Stripe publishable key (pk_) | Yes |
| Stripe secret key (sk_) | Never |
| Firebase web config | Yes, with rules and domain restrictions |
| OpenAI, Anthropic and other AI provider keys | Never |
| Email and SMS provider keys | Never |
How to find them
- Open your live site, view the loaded JavaScript files and search for
sk_,service_role,sk-and your providers' key formats. - Check environment variables with public prefixes, such as
NEXT_PUBLIC_orVITE_: everything there ships to the browser. - Search your repository and its history, and run a secret scanner in CI.
- Check source maps are not published.
If one leaked
- Revoke the key at the provider and issue a new one.
- Move the call to a server or edge function that holds the new key.
- Check the provider's usage logs for calls you did not make.
- Set spending caps and alerts.
- If the key could reach personal information, assess whether it is a reportable breach. See what happens if your app leaks data.
Preventing it next time
Add a secret scanner to your repository and CI so a key committed by mistake fails the build. Keep secrets only in your host's or backend's secret store. Learn which environment variable prefixes your framework exposes to the browser, and never put a secret behind one. When you ask an AI tool to integrate a paid API, say explicitly that the call must happen in a server or edge function and the key must not reach the client.
Give every key the narrowest scope the provider allows, such as restricted Stripe keys or project-scoped AI keys, and set spending limits. A leaked key with narrow scope and a cap is an annoyance; an unrestricted one can be a breach and a large bill.
Getting it checked
TrazTech offers vibe-coding QA and security review, listed from $2,000 CAD. Get at least one other quote on the same scope; the questions to ask a testing firm help compare them.
Related questions
- What security holes do AI-built apps have?
- How do I stop my AI bill being run up?
- Pre-launch security checklist
Get a scope for your app
Tell us what you built, what it stores and who is about to use it.
Get matchedCommon questions
I deleted the key from the code. Am I safe?
No. It is still valid and may already be copied, and it remains in your git history. Rotate it.
Why did my AI tool put the key there?
Calling the provider from the browser is the shortest path to a working demo. Ask it to use a server function instead.