How to Hide API Keys in Lovable
Use Lovable's built-in Secrets storage to store API keys, then access them through Supabase Edge Functions. Never paste keys directly in code or in the chat interface — Lovable will warn you if it detects an API key in chat, but the key may still be stored in your chat history.
Why this matters
API keys hardcoded in Lovable frontend code are visible to anyone who opens your app in a browser. Since Lovable generates React code that runs in the browser, any key in a component file is exposed in the JavaScript bundle.
What's at stake
An exposed API key can be used to run up charges on your accounts (OpenAI keys have generated thousands in unauthorized charges), access your user data, or abuse your connected services.
Step by step.
Open Lovable Secrets storage
In your Lovable project, navigate to the Secrets section in project settings. This is where you securely store API keys and credentials.
Add your API key as a secret
Enter a descriptive name (like OPENAI_API_KEY or STRIPE_SECRET_KEY) and paste the key value. The secret is stored securely and not visible in your code.
Create an Edge Function to use the secret
Tell Lovable to create a Supabase Edge Function that accesses the secret. For example: "Create an Edge Function that calls the OpenAI API using my OPENAI_API_KEY secret." The Edge Function runs server-side where secrets are safe.
Call the Edge Function from your frontend
Your frontend code calls the Edge Function instead of the API directly. The Edge Function handles the secret key on the server and returns only the result to the browser.
Verify the key is not in your frontend bundle
Open your deployed app, press F12, go to Sources, and search for your API key string. If it appears, the key is still exposed and needs to be moved to an Edge Function.
Automatically detect exposed API keys in your Lovable app
- Scan your deployed frontend for exposed API key patterns
- Alerts when secrets are detected in client-side code
- Step-by-step remediation guidance for each exposed key
Frequently asked questions.
Lovable detects API keys in chat and warns you, but the key may be stored in your chat history. Rotate the key immediately: go to your API provider, generate a new key, revoke the old one, and store the new key in Lovable Secrets.
Yes. The anon key is designed to be public and respects RLS policies. The key you must hide is the service role key, which bypasses all database security.
Supabase Edge Functions are included in all plans with usage limits. For most small to medium apps, the included limits are sufficient. Check Supabase pricing for current limits.
Lovable's Secrets feature is the recommended approach. Environment variables set through Lovable's UI are securely stored and accessible in Edge Functions. There is no .env file to manage manually.