{"slug": "are-vite-environment-variables-secret-no-and-here-s-how-keys-leak-from-lovable", "title": "Are VITE_ environment variables secret? No, and here's how keys leak from Lovable and Bolt apps", "summary": "A developer published a guide explaining that Vite's VITE_-prefixed environment variables are embedded into client-side JavaScript bundles at build time and are therefore publicly readable, with the same applying to Next.js's NEXT_PUBLIC_ and Create React App's REACT_APP_ prefixes. The writeup details how secret keys leak from AI-built apps such as Lovable, Bolt and Cursor frontends, lists which key types are safe to expose (Supabase publishable keys with Row Level Security, Stripe pk_ keys, PostHog phc_ keys) versus which must stay server-side (OpenAI sk-proj-, Anthropic sk-ant-, Supabase sb_secret_, Stripe sk_live_), and recommends moving secret-key calls into Supabase Edge Functions using supabase secrets set.", "body_md": "Short answer: **no.** In a Vite app, every environment variable that starts with `VITE_` is written into your JavaScript bundle at build time. That bundle is downloaded by every visitor, so anyone can read the value in DevTools.\n\nThe same is true of `NEXT_PUBLIC_` in Next.js and `REACT_APP_` in Create React App.\n\nVite hides variables *without* the `VITE_` prefix from your frontend code on purpose. The prefix is how you tell Vite \"this value is safe to publish\".\n\nHere's how secret keys usually end up public in AI-built apps:\n\n`import.meta.env.OPENAI_API_KEY`.` undefined` in the browser, so the feature breaks.`VITE_OPENAI_API_KEY`.\nLovable, Bolt and most Cursor-built frontends are Vite apps, so this comes up a lot.\n\n`VITE_` variable\n`sb_publishable_`) key, as long as Row Level Security is on for every table` pk_live_`, `pk_test_`)` phc_`, Sentry DSNs)` sk-proj-`), Anthropic (` sk-ant-`), Groq, Replicate` sk_live_`) and webhook secrets (` whsec_`)` sb_secret_` key, which bypasses RLS entirely`re_`, SendGrid `SG.`), AWS keys, database URLs with a password\nNot sure which kind a key is? I made a [free key checker](https://www.getleakpatrol.com/api-key-checker.html?ref=devto) that tells you what a key is and whether it's allowed in the browser. It runs entirely client-side, so the key never leaves the page.\n\n`supabase secrets set OPENAI_API_KEY=...`.\nA prompt that works in Lovable, Bolt or Cursor:\n\n```\nMove every call that uses a secret API key out of the frontend into a\nSupabase Edge Function that reads the key from Supabase secrets. Remove\nthe VITE_ variable for it and call the function instead. Only allow\nlogged-in users to call it. Don't print any keys in your reply.\n```\n\nYour `.env` file isn't what matters. What matters is what ended up in the **built** JavaScript. Two ways to check:\n\n`sk-`, `sk_live`, `service_role` and `.env` files, source maps and missing headers.\n*The full version of this guide, with a FAQ, is [here](https://www.getleakpatrol.com/vite-env-variables-secret.html).*", "url": "https://wpnews.pro/news/are-vite-environment-variables-secret-no-and-here-s-how-keys-leak-from-lovable", "canonical_source": "https://dev.to/leakpatrol/are-vite-environment-variables-secret-no-and-heres-how-keys-leak-from-lovable-and-bolt-apps-3io1", "published_at": "2026-10-24 08:38:25+00:00", "updated_at": "2026-10-24 08:44:05.943492+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-products"], "entities": ["Vite", "Lovable", "Bolt", "Cursor", "Supabase", "OpenAI", "Anthropic", "Stripe"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/are-vite-environment-variables-secret-no-and-here-s-how-keys-leak-from-lovable", "markdown": "https://wpnews.pro/news/are-vite-environment-variables-secret-no-and-here-s-how-keys-leak-from-lovable.md", "text": "https://wpnews.pro/news/are-vite-environment-variables-secret-no-and-here-s-how-keys-leak-from-lovable.txt", "jsonld": "https://wpnews.pro/news/are-vite-environment-variables-secret-no-and-here-s-how-keys-leak-from-lovable.jsonld"}}