How to Configure Environment Variables and Secrets in Lovable

Why environment variables and secrets need careful setup in Lovable

Environment variables store sensitive data like API keys, database URLs, and third-party tokens outside of your source code. In Lovable, these are managed through the Secrets panel inside the Cloud tab — not through .env files you edit by hand. The most common mistake is hardcoding API keys directly into your React components or utility files. This is dangerous because Lovable projects can be public by default on the Free plan, meaning anyone viewing your project code can see those keys. Even on paid plans, keys in source code get committed to GitHub when you connect your repository. Another frequent issue is the VITE_ prefix requirement. Lovable uses Vite as its build tool, and Vite only exposes environment variables that start with VITE_ to your frontend code. If you name a variable SUPABASE_URL instead of VITE_SUPABASE_URL, your React components cannot access it. Meanwhile, Edge Functions receive all secrets automatically without any prefix requirement. When you deploy outside of Lovable (to Vercel, Netlify, or another host), the Secrets you configured in Lovable do not transfer automatically. You must manually set each environment variable on the hosting platform, using the exact same names and values.

• API keys hardcoded in source code instead of stored in Secrets
• Missing VITE_ prefix on variables that need to be accessible in frontend code
• Secrets not copied to external hosting platform (Vercel, Netlify) during deployment
• Referencing process.env instead of import.meta.env in Vite-based projects
• Build-time vs runtime confusion — VITE_ variables are baked in during build, not read at runtime
• Auto-added Supabase secrets deleted or overwritten accidentally

Error messages you might see

Before you start

• A Lovable project open in the editor
• The API keys or tokens you need to configure (from Stripe, OpenAI, or other services)
• If deploying externally: access to your Vercel or Netlify project dashboard
• If using Supabase: your project URL and anon key from the Supabase dashboard

How to fix it

// WRONG: API key hardcoded in source code
const stripe = new Stripe('sk_live_abc123realkey');

// CORRECT: Key stored in Secrets, accessed via Edge Function
// In your Edge Function (supabase/functions/create-payment/index.ts):
const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!);

// WRONG: Missing VITE_ prefix — this will be undefined in the browser
const supabaseUrl = import.meta.env.SUPABASE_URL;

// CORRECT: VITE_ prefix makes it available to frontend code
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;

// WRONG: Scattered import.meta.env calls across many files
// src/components/Dashboard.tsx
const url = import.meta.env.VITE_SUPABASE_URL;
// src/lib/api.ts
const url = import.meta.env.VITE_SUPABASE_URL; // duplicated

// src/config/env.ts — single source of truth
export const ENV = {
  supabaseUrl: import.meta.env.VITE_SUPABASE_URL ?? '',
  supabaseKey: import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY ?? '',
  supabaseProjectId: import.meta.env.VITE_SUPABASE_PROJECT_ID ?? '',
} as const;
// Warn in development if any required variable is missing
if (!ENV.supabaseUrl || !ENV.supabaseKey) {
  console.warn('Missing required environment variables. Check Cloud tab → Secrets.');
}

// Variable might be undefined but you don't know
const client = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY);

// Temporary check — remove after verifying
console.log('Supabase URL defined:', !!import.meta.env.VITE_SUPABASE_URL);
console.log('Supabase Key defined:', !!import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY);
// Never log the actual values — only log whether they exist
const client = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY);

Complete code example

1/**
2 * Centralized environment variable configuration.
3 * All components should import from this file
4 * instead of accessing import.meta.env directly.
5 *
6 * VITE_ prefix = available in browser (public).
7 * Non-VITE_ secrets = only available in Edge Functions.
8 */
9
10export const ENV = {
11  // Supabase connection (auto-added by Lovable Cloud)
12  supabaseUrl: import.meta.env.VITE_SUPABASE_URL ?? '',
13  supabaseAnonKey: import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY ?? '',
14  supabaseProjectId: import.meta.env.VITE_SUPABASE_PROJECT_ID ?? '',
15
16  // App configuration
17  appUrl: import.meta.env.VITE_APP_URL ?? window.location.origin,
18  isProduction: import.meta.env.PROD,
19  isDevelopment: import.meta.env.DEV,
20} as const;
21
22// Type-safe environment variable access
23export type EnvConfig = typeof ENV;
24
25// Validation: warn if required variables are missing
26const requiredVars = [
27  ['VITE_SUPABASE_URL', ENV.supabaseUrl],
28  ['VITE_SUPABASE_PUBLISHABLE_KEY', ENV.supabaseAnonKey],
29] as const;
30
31for (const [name, value] of requiredVars) {
32  if (!value) {
33    console.warn(
34      `Missing environment variable: ${name}. ` +
35      'Add it in Cloud tab → Secrets (Lovable) or ' +
36      'in your hosting platform environment settings.'
37    );
38  }
39}

Best practices to prevent this

• Never hardcode API keys in source code — always store them in Cloud tab → Secrets, where they are encrypted
• Use the VITE_ prefix only for variables that the browser needs to read; keep private keys prefix-free and access them only from Edge Functions
• Create a centralized env.ts config file so every component imports variables from one place
• Add validation that warns when required variables are missing — this surfaces configuration problems immediately
• When deploying to Vercel or Netlify, copy every VITE_ variable manually — Lovable Secrets do not auto-export
• Use import.meta.env (not process.env) in all frontend code — Lovable projects use Vite, not webpack
• Keep a .env.example file in your repo listing all required variable names (without values) as documentation for your team
• After changing secrets, trigger a new build — VITE_ variables are embedded at build time, not read at runtime

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns