How do I protect API keys?
Last checked 31 Aug 2026
Short answer
Never put API keys in front-end code — store them as secrets used only inside server functions (Edge Functions), where the browser never sees them.
The rule
Anything shipped to the browser — including environment variables prefixed for the front end — is visible to anyone who opens dev tools. API keys for services like Stripe (secret key), Resend, or third-party REST APIs must only be used inside server-side code: Edge Functions in Lovable Cloud or your connected Supabase project.
How this works in Lovable
- Ask Lovable to add the key as a secret:
Add my [service] API key as a server-side secret and create an Edge Function that uses it — don't reference it anywhere in front-end code.
- Lovable stores the secret outside the client bundle and makes it available only to server functions.
- The front end calls your Edge Function (which knows nothing sensitive to the client), and the function calls the third-party API using the protected key.
What "front-end code" includes
- React components and hooks
- Any
.envvariable exposed to Vite with a public prefix - Client-side query strings or local storage
None of these are safe places for a secret key, even temporarily during testing.
Checking for leaks
Search the entire codebase for API keys, tokens or secrets that might be hard-coded or referenced in front-end files, and list anything found.
What usually goes wrong
A key gets pasted directly into a component "just to test it quickly" and is forgotten — once it's been in a public GitHub repo, even briefly, treat it as compromised and rotate it with the provider. See /questions/where-should-secrets-be-stored and /questions/how-do-i-secure-edge-functions for the rest of this pattern.
Sources
Was this answer helpful?
Next step
Related questions
- AnswerWhere should secrets be stored?In your project's server-side secrets store, used only inside Edge Functions — never in front-end code, client-side environment variables, or committed to your Git repository.
- AnswerHow do I make Lovable perform a security review without changing anything?Explicitly tell Lovable to run in read-only review mode — ask it to report findings only and not touch any code, then decide what to fix yourself.
- AnswerHow do I prevent spam registrations?Verify email addresses on sign-up, add a CAPTCHA to the registration form, rate-limit sign-up attempts per IP, and check the token server-side before creating an account.
- AnswerHow do I check Supabase RLS?Ask Lovable to list every table and its row-level security status and policies in plain language — Lovable Cloud users don't have Supabase dashboard access, so this has to go through chat.