Guide

How to hide API keys in a Lovable app

And how to check they aren't already leaked. Plain steps you can paste into Lovable.

Short answer: you can't hide a secret key in frontend code. Everything Lovable ships to the browser (React code, JS bundles, environment variables prefixed VITE_) can be read by anyone who opens DevTools. To keep a key secret, store it as a Supabase secret and call the outside API from a Supabase Edge Function. Your app calls the function, never the API directly.

1. Know which keys are fine to show

If a "No" key is in your frontend, assume it's already been copied.

2. Move the secret key into a Supabase secret

1. In Supabase, open Project Settings → Edge Functions → Secrets (or ask Lovable to "add a Supabase secret named OPENAI_API_KEY").
2. Paste the key there. Don't put it in chat prompts, code files, or a VITE_ variable.
3. Delete any copy of the key from your code and from .env files that are committed to GitHub.

3. Call the API from an Edge Function

Prompt you can paste into Lovable:

Create a Supabase Edge Function called ai-proxy that reads OPENAI_API_KEY from Deno.env, checks the user is logged in using the Authorization header, applies a simple per-user rate limit, and forwards the request to OpenAI. Update the frontend to call this function with supabase.functions.invoke instead of calling OpenAI directly. Remove every reference to the OpenAI key from frontend code.

Minimal shape of the function:

// supabase/functions/ai-proxy/index.ts
Deno.serve(async (req) => {
  const auth = req.headers.get("Authorization");
  if (!auth) return new Response("Unauthorized", { status: 401 });
  const body = await req.json();
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${Deno.env.get("OPENAI_API_KEY")}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });
  return new Response(await r.text(), {
    status: r.status,
    headers: { "Content-Type": "application/json" },
  });
});

4. Rotate any key that was ever exposed

Deleting a key from code doesn't revoke it. Old builds, Git history, and anyone who already copied it still have it.

1. Create a new key in the provider dashboard (OpenAI, Stripe, Supabase, etc.).
2. Put the new key in Supabase secrets.
3. Revoke the old key.
4. Set a spend limit or usage cap on the new key.

Supabase tip: rotate in a quiet window and update every place that uses the key (Edge Functions, Vercel env vars, CI). Rotating without updating them takes the app down.

5. Check your live app

• Open your published app, press F12 → Sources (or Network), and search the JS for sk_, sk-, service_role, AIza, and secret.
• Visit https://yourapp.com/.env. It should return 404.
• Open the app logged out in a private window. If you can see other users' data, RLS is off or too loose.
• In Supabase, open Advisors → Security Advisor and fix every "RLS disabled" warning.

FAQ