AppInspected

Fix guides

Your OpenAI API key is in your frontend. Anyone can spend your credits.

Last reviewed October 15, 2026 against the providers' current documentation.

The short version

Create a new key, put it on a server, and have your app call that server instead of OpenAI directly. Then revoke the old key and set a hard monthly spend limit. The same applies to Anthropic, Gemini and other AI provider keys.

Why it matters

Any key in browser code can be copied in seconds from the browser's developer tools. People actively look for AI keys because they can resell the usage or run their own projects on your bill. A leaked key can cost hundreds of dollars before you notice.

Fix it, in this order

  1. Create a new key and set a spend limit

    On the OpenAI platform's API keys page, create a new key, ideally scoped to one project. In your organization's limits, set a monthly budget with hard enforcement; spend alerts alone don't stop traffic.

  2. Add a small server endpoint

    Create one server-side route (a Next.js API route, a Supabase Edge Function, a Cloudflare Worker) that receives the user's request, calls OpenAI with the key from a server-only environment variable named OPENAI_API_KEY, and returns the result.

  3. Protect that endpoint

    Require a logged-in user, limit how many requests each user can make per minute, and only accept the inputs your app actually uses. Otherwise your new endpoint becomes a free AI proxy for anyone who finds it.

  4. Switch the app over and revoke the old key

    Point the frontend at your endpoint, deploy, and confirm it works. Then delete the old key on the API keys page.

  5. Check your usage

    Look at the Usage page for spikes that don't match your app's traffic. If you see abuse, contact OpenAI support.

Or ask your AI tool to do it

Paste this into Lovable, Bolt, Cursor, Claude Code or whichever tool built your app. Review what it changes before you deploy.

My OpenAI API key is exposed in frontend code. Create a server-side endpoint that calls the OpenAI API using a key read from a server-only environment variable OPENAI_API_KEY. The endpoint must require an authenticated user, rate-limit each user, and only accept the specific inputs the app needs. Update the frontend to call this endpoint instead of OpenAI directly, and remove the key from all client code and from any VITE_ or NEXT_PUBLIC_ variables.

How this happens

Demo code often calls the AI API straight from the page because it's the fastest way to see a result. When the demo becomes the product, the key goes live with it.

Check that it's really fixed

After you deploy, run the free check. It reads your live site the way an attacker would and tells you if any secret key is still visible.

Check my app free

Questions

I put the key in a .env file. Isn't that hidden?

Not if the variable name starts with VITE_, NEXT_PUBLIC_ or similar. Those prefixes tell the build tool to copy the value into the browser code.

Can I just obfuscate the key?

No. If the browser can use it, anyone can extract it.

Sources

Related guides