--- title: "My OpenAI key was in the frontend and I got a surprise bill" description: "An OpenAI key in the frontend is public and bots will run up your bill. How to revoke it, cap spend, and move the calls to a server with per-user limits." url: https://whocanfixmyapp.com/problems/openai-key-in-the-frontend-surprise-bill --- [Home](https://whocanfixmyapp.com/) / [Problems](https://whocanfixmyapp.com/problems) / [AI APIs and integrations](https://whocanfixmyapp.com/problems#ai-apis-and-integrations) # My OpenAI key was in the frontend and I got a surprise bill VC-58 · OpenAI · Lovable · Bolt · Updated October 2026 · By [Nathaniel Kelley](https://whocanfixmyapp.com/authors/nathaniel-kelley) Quick verdict Get an engineer for this one. Revoke the key yourself now, then get the calls moved server-side. - **How serious**: Critical - **Fix it yourself?**: No, get an engineer - **Typical cost**: €99–$990 for a single fix ([prices](https://whocanfixmyapp.com/pricing)) - **Top rated for Lovable**: [Afterbuild Labs](https://whocanfixmyapp.com/companies/afterbuild-labs) · **10.0**/10 **What you see.** OpenAI usage jumped overnight, and the API key sits in the browser code or in a NEXT_PUBLIC_ or similar public variable. ## Why it happens Everything the browser downloads is public. If the AI put your OpenAI key into the frontend, into a `NEXT_PUBLIC_` variable, or into any file the browser loads, anyone can open the page source and copy it. Bots scan live sites for exactly this. They then run their own workloads on your account until the key is revoked or your spend limit stops them. OpenAI's guidance is plain: never deploy your key in client-side environments like browsers or mobile apps, and route requests through your own backend server. Builders reach this state because calling OpenAI straight from the browser is the shortest code path, and the preview works. There is no way to hide a key in a frontend. Rotating to a new key and leaving the code as it is just leaks the new key. ## Fix it yourself 1. Revoke the key right now on the OpenAI **API keys** page. Your AI feature stops until step four. Do not create the replacement until the code is fixed. 2. On the OpenAI **Limits** page set a hard spend limit and a spend alert. The hard limit stops traffic when the cap is reached. Review the usage page to see how much was taken. 3. Search your repository, including old commits, for the key string. A key that was ever committed stays in the history, so treat it as leaked even after removal. 4. Have the call moved to a server: a Supabase Edge Function, a Lovable Cloud function, a Next.js route handler, or a Netlify or Vercel function. The new key lives in that host's secret settings with no public prefix. 5. Add per-user limits before switching it back on: require sign-in and cap requests per user per day. This is check COST-01. 6. Check your other keys the same way, especially the Supabase secret key and the Stripe secret key. See [Stripe secret key in my frontend](https://whocanfixmyapp.com/problems/stripe-secret-key-in-the-frontend). ## When to get an engineer This is not a do-it-yourself code fix. Moving the call to a server, adding auth checks, and setting per-user limits touches several files and needs testing. Tell the engineer which features use the key, which host you deploy to, and that the key was leaked. Expect €99–$990 and two to four days. Ask them to also scan the bundle for any other secret, which is check DATA-02 on the [checklist](https://whocanfixmyapp.com/checklist). ## Top-rated companies for Lovable apps Ranked by our score: published prices, scope of work, AI tools named, timing and a low-risk first step. [How we score](https://whocanfixmyapp.com/methodology#score). - 1 · [Afterbuild Labs](https://whocanfixmyapp.com/companies/afterbuild-labs) · **10.0**/10 · Best for: A check before launch · Free first step · from $49 - 2 · [Redlab](https://whocanfixmyapp.com/companies/redlab) · **10.0**/10 · Best for: A full rescue by one team that keeps building · Free first step · from $490 - 3 · [Vibe Code Rescue (Lev Arakelyan)](https://whocanfixmyapp.com/companies/vibe-code-rescue-lev-arakelyan) · **9.0**/10 · Best for: A one-off check and a cleanup · From $299 [All 59 Lovable companies, ranked](https://whocanfixmyapp.com/best/lovable-developers) ## Check these DATA-02 · Critical No secret keys reach the browser Open your live app, then DevTools, Sources, and search the loaded JavaScript for `sb_secret_`, `sk_live_`, `sk-proj-` and `sk-ant-`. Older Supabase keys are long tokens starting with `eyJ`: decode the middle part of each on your own machine, and if it contains `"role":"service_role"`, your secret key is public. A publishable or anon key in the browser is expected. OPS-04 · Medium Secrets live in the host's environment settings Keys belong in environment variables on the server, not in the repository or in front-end code. COST-01 · High AI and paid API calls have per-user limits Without a cap, one user or one bot loop can spend your monthly budget in an hour. AUTH-03 · Medium Sign-in and sign-up are rate limited Without limits, bots create thousands of accounts and run up your email and AI bills. ## Questions ### Can I keep the code and just make a new key? No. The new key ends up in the same public place. The call has to move to a server you control before any key goes back in. ### Is the Supabase anon or publishable key the same problem? No. That key is designed to be public, and row level security does the protecting. The Supabase secret key and the OpenAI key must never reach the browser. Sources: [OpenAI: best practices for API key safety](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety); [OpenAI: rate limits and spend limits](https://developers.openai.com/api/docs/guides/rate-limits); [OpenAI: production best practices](https://developers.openai.com/api/docs/guides/production-best-practices). **Lovable guide** What Lovable builds, where it breaks and how to check it: [Lovable app rescue: what breaks and how to check it](https://whocanfixmyapp.com/guides/lovable). **Same category** - [OpenAI 429 rate limit errors in my app](https://whocanfixmyapp.com/problems/openai-429-rate-limit-errors) - [AI API costs are spiking](https://whocanfixmyapp.com/problems/ai-api-costs-are-spiking) - [Serverless or edge function timed out](https://whocanfixmyapp.com/problems/serverless-or-edge-function-timeout) - [Transactional emails not sending from my app](https://whocanfixmyapp.com/problems/transactional-emails-not-sending) - [Integration works locally but fails in production](https://whocanfixmyapp.com/problems/integration-works-locally-fails-in-production) [All ai apis and integrations problems](https://whocanfixmyapp.com/problems#ai-apis-and-integrations) **Run every check** The [production checklist](https://whocanfixmyapp.com/checklist) has all 24 checks with a verdict.