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

Where should secrets be stored?

Last checked 31 Aug 2026

Short answer

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.

The short answer

Any credential — API key, service-role key, webhook signing secret — belongs in a server-side secret, accessed only from Edge Functions (or equivalent server functions on a TanStack Start project). It should never appear in a React component, a client-exposed .env variable, or a hard-coded string anywhere in the front end.

Setting one up

Store this API key as a server-side secret and use it only inside an Edge Function that [describe what it does] — don't expose it to the front end.

Lovable keeps these outside the client bundle entirely, so opening dev tools or viewing page source won't reveal them.

What counts as "front-end" (unsafe)

  • React component or hook code
  • Vite environment variables with a public/browser-exposed prefix
  • Anything committed to your GitHub/GitLab repo in plain text via Git sync

What counts as safe

  • Lovable's secrets manager, referenced from Edge Functions
  • Provider-side webhook secret verification done inside a server function, not the browser

What usually goes wrong

Someone adds a secret to a .env file and assumes that's automatically safe — it's only safe if nothing client-side reads it and it's excluded from Git sync. Always check with:

Confirm this secret is only referenced inside server-side functions, not anywhere reachable by the browser bundle.

See /questions/how-do-i-protect-api-keys and /questions/how-do-i-secure-edge-functions for the rest of the pattern.

Sources

Was this answer helpful?

Related questions

Website made, maintained and hosted by PromptSites.com

PromptSites logo