Skip to content
Every tutorial here is 100% free — and always will be
LSLovableStudent

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

  1. 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.

  1. Lovable stores the secret outside the client bundle and makes it available only to server functions.
  2. 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 .env variable 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?

Related questions

Website made, maintained and hosted by PromptSites.com

PromptSites logo