Is it safe to put my ElevenLabs API key in the frontend?

No. ElevenLabs says never expose your API key in client-side code. Use a signed URL or a single-use token from your server instead. Steps and FAQ.

No. ElevenLabs' docs say your API key is a secret and must not be exposed in any client-side code, including browsers and apps (ElevenLabs API authentication).

To talk to ElevenLabs from the browser, have your server create a short-lived credential: a signed URL for voice agents, or a single-use token for supported endpoints. Both expire after 15 minutes, and your real key never leaves the server (ElevenLabs agent authentication, ElevenLabs single-use tokens).

Not sure your ElevenLabs key is already in your live JavaScript? Scan free, no signup.

Why it's a problem

• Every request is authenticated with your key and counted against your usage quota (ElevenLabs API authentication). If the key is in your JavaScript, anyone can copy it and spend your credits.
• A .env file doesn't hide it. Vite bundles any VITE_ variable into client code at build time (Vite docs), so VITE_ELEVENLABS_API_KEY is public.

How to fix it (plain steps)

1. Move the key to your server (an API route, or a Supabase Edge Function reading it with Deno.env.get) (Supabase docs).
2. Pick the browser-safe method:
   • Voice agents: your server requests a signed URL with your agent ID; the browser connects with that URL. ElevenLabs calls signed URLs the recommended approach for client-side apps; a signed URL must be used to start a conversation within 15 minutes (ElevenLabs agent authentication).
   • Text to speech websocket or Scribe transcription: your server creates a single-use token (token_type of tts_websocket, realtime_scribe or batch_scribe). It expires after 15 minutes and is consumed on use (ElevenLabs single-use tokens).
   • Everything else: call ElevenLabs from your server and return only the audio or result.
3. Limit the key. ElevenLabs lets you restrict a key's scope (which endpoints), set a credit quota, and allowlist IP addresses (ElevenLabs API keys).
4. If the key was ever in your deployed site, rotate it: create a new key, switch your app over, delete the old one (ElevenLabs API keys). Removing it from the code doesn't make the old key safe.

Remove the ElevenLabs API key from all frontend code and any VITE_/NEXT_PUBLIC_ variable. Create a server-side function that reads ELEVENLABS_API_KEY from server secrets, checks the user is signed in, and returns either a signed URL (for agents) or a single-use token (for TTS websocket / Scribe). The browser should only receive that short-lived value. List every file you changed.

FAQ

I use the ElevenLabs agent widget. Do I need a key in the page?
For a private agent, no. Use a signed URL from your server. ElevenLabs also offers allowlists that restrict which domains can connect to your agent (ElevenLabs agent authentication).

My key has a small credit quota. Is it OK to expose then?
A quota limits the damage, but ElevenLabs still says not to expose the key client-side (ElevenLabs API keys).

Will ElevenLabs disable a leaked key for me?
Only in some cases: if the key is committed to a public GitHub repo, GitHub notifies ElevenLabs and the key is automatically disabled when third-party disabling is allowed (ElevenLabs API keys). A key sitting in your live website's JavaScript is a different leak path. Rotate it yourself.

I fixed it and redeployed. Am I done?
Rotate the old key too. A re-scan proves the key is gone from your site, not that it was rotated.

Related: Can I call the OpenAI API from my frontend? · How to hide API keys when an AI builder writes your app

Sources (all fetched 2026-10-28)

1. ElevenLabs, API Authentication: https://elevenlabs.io/docs/api-reference/authentication
2. ElevenLabs, Agent authentication: https://elevenlabs.io/docs/eleven-agents/customization/authentication
3. ElevenLabs, Create Single Use Token: https://elevenlabs.io/docs/api-reference/tokens/create
4. Vite, Env Variables and Modes: https://vite.dev/guide/env-and-mode
5. Supabase, Edge Function secrets: https://supabase.com/docs/guides/functions/secrets
6. ElevenLabs, API Keys: https://elevenlabs.io/docs/overview/administration/workspaces/api-keys

Want the whole pre-launch process in one place? Get App Security for Vibe Coders, our $9 PDF playbook. See what's inside.

More guides

• Is my Lovable app secure?
• How to enable Supabase Row Level Security (RLS)
• Exposed Supabase service_role key: what to do now
• Lovable security checklist