Is it safe to put API keys in my frontend code?

Matt Turley, Continuum. Updated November 5, 2026.

Which keys may sit in the browser, which must never, and what to do if one already did.

The short answer

Is it safe to put API keys in my frontend code?

Only keys designed to be public, such as a Supabase anon key or a Stripe publishable key. Never a secret key, a service role key, or an AI provider key: anything in the browser code is visible to every visitor. Secret keys belong on a server, and a leaked one must be replaced.

Public by design, and never public

A browser app is code that every visitor downloads and can read. So the rule is not about hiding a key well; it is about whether the key is designed to be seen.

May be public: a Supabase anon key, a Stripe publishable key, a map or analytics key restricted to your domain. These can only do what your rules allow.
Never public: a Stripe secret key, a Supabase service role key, a database connection string, or any AI provider key. These grant real power or cost real money.
Easy mistake: in Next.js, a variable whose name starts with NEXT_PUBLIC_ is bundled into the page code on purpose, so a secret placed there is published.

How an AI tool ends up exposing one

When a generated app needs to call a paid service, the quickest working version calls it straight from the browser, key included. It runs on the first try, so nothing prompts anyone to move it behind a server. Our post on why the key ends up in the bundle shows how it happens and how to catch it.

Check your own app by opening the live site, viewing the page source and the loaded script files, and searching for the names of your providers. The free Leak Check automates part of that search for common key patterns.

If a secret key was exposed

Replace the key at the provider first, then update your server settings with the new one. Deleting it from the code does not help, because copies and history remain.
Look at the provider’s usage and billing for activity you do not recognize.
Move the call behind your own server, so the browser asks your server and your server holds the key.
Set spending limits at the provider so a future leak has a ceiling.

Want a free read on your own app?

Paste your live URL and seven automated checks run in about a minute with no signup: reachability, SSL, sign-in, the payment path, secrets in the browser code, broken links and speed. It is a surface scan, not a full audit.

Run the free Leak Check. Or book a call and talk it through.

Book a call →See all services and prices →

FAQ

Straight answers

Is my Supabase anon key being visible a problem?

Not by itself. It is meant to be public. What protects your data is row level security on each table, so check those rules rather than trying to hide the key.

Does hiding the key in an environment variable fix it?

Only if the variable is read on a server. A variable read by browser code, or one with the public prefix, is still bundled into what visitors download.

Can I restrict a key instead of moving it?

For keys built to be public, yes: limit them to your domain or to read-only actions. For secret keys, restriction is a backup, not a substitute for keeping them on a server.

How would I know if someone used my leaked key?

Check the provider’s usage log and bill for requests or spend you did not make. Absence of signs is weak comfort, so replace the key regardless.

Keep reading

Run the free Leak CheckFree. Seven checks, no signup.Why your API key ends up in the frontendHow it happens and how to catch it.How a Stripe secret key leaksAnd how to check yours.Free launch checklistThe launch items AI tools skip, each linked to the vendor docs.What is row level security and do I need it?The rule on each table that decides who sees which rows.Leak CheckFree automated scan of a live app, seven checks, no signup.How do I know if my AI-built app is safe to launch?Five checks to run before real users arrive.

Sources

1. Next.js: bundling environment variables for the browser, Next.js: Used for the point that variables prefixed NEXT_PUBLIC_ are bundled into the JavaScript every visitor downloads.
2. Supabase: API keys and the service role, Supabase: Used for the point that the service role key bypasses row level security and belongs on a server only, never in the browser.
3. The free launch checklist for AI-built apps, Continuum: Used for the key-handling and row level security points, each of which links to the vendor documentation on that page.