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

How do I use environment variables?

Last checked 31 Aug 2026

Short answer

Use `VITE_`-prefixed variables only for non-sensitive, public values baked into the front-end build; use Secrets for anything sensitive that a server/edge function needs.

Two different mechanisms, easy to confuse

Lovable projects distinguish between:

  • VITE_ environment variables — bundled directly into the front-end code at build time. Visible to anyone who opens dev tools. Fine for public values like a feature flag or a public API base URL.
  • Secrets — encrypted, stored in your backend (Lovable Cloud/Supabase), and only accessible from server/edge functions. Used for API keys, tokens, and anything that shouldn't be public.

When to use which

Use case Use
Public config value (e.g. a public Mapbox style URL) VITE_ variable
Third-party API key Secret
Feature flag shown in the UI VITE_ variable
Database credentials, service-role keys Secret
Anything with billing implications Secret

How to set them up

  • For a VITE_ variable, ask Lovable to add it and reference it in the relevant component — it'll be included at build time.
  • For a secret, ask Lovable to add the integration or secret directly; it's stored server-side and used inside an edge function, not the client.

Add a VITE_SITE_NAME variable for the site's display name, and separately store our Mailgun API key as a secret used only inside an edge function.

What usually goes wrong

  • Putting a sensitive key in a VITE_ variable because it "looks like" the right place — the VITE_ prefix is precisely what makes Vite expose it to the browser.
  • Forgetting that changing a VITE_ variable requires a rebuild/redeploy to take effect, unlike some secrets which can be read live by an edge function.
  • Expecting environment variables to differ automatically between test and live without checking your project's environment setup.

Related: /questions/how-do-i-safely-store-api-keys, /questions/what-are-supabase-edge-functions.

Sources

Was this answer helpful?

Related questions

Website made, maintained and hosted by PromptSites.com

PromptSites logo