How to Store API Keys Securely
Which keys are safe in code, which must be secrets, and how to tell the difference.
Published 24 Aug 2026 · Tested with Lovable as of 24 Aug 2026
Overview
Some keys are designed to be public. Most are not. Getting this wrong is the most common security mistake in AI-built projects.
Beginner explanation: A publishable key is like a shop address. A secret key is like the shop keys. One is fine on a sign; the other is not.
Technical explanation: Publishable and anon keys can live in frontend code because they are protected by access rules. Secret and service-role keys must be stored as server secrets and read only inside server code.
Steps
- List every key your project uses.
- Classify each as publishable or secret.
- Move every secret key into server-side secret storage.
- Confirm no secret appears in the browser bundle.
- Rotate any key that was ever exposed.
:::tip If a secret was ever committed or shipped to the browser, rotate it. Removing it later does not un-expose it. :::
What to check afterwards
- Searching the built frontend for your secrets finds nothing
- Server functions read secrets inside the handler
- Exposed keys have been rotated
Common problems
- Assuming a key is safe because the project is small. Bots scan constantly.
- Reading secrets at module scope so they are undefined at runtime.
- Never rotating an exposed key.
Where people get stuck
If you have followed the steps and the result still is not right, the fastest path is usually to describe the exact behaviour you expected, the behaviour you got, and any error text, then ask for a fix in one focused follow-up prompt. If that loop is not converging, hand it over.
