Missing Supabase environment variables

Alguien puso en tu app una comprobación al arrancar: si no están la dirección y la clave de Supabase, para y avisa. Eso es lo que ha pasado. Y es buena noticia, porque este mensaje es mucho más claro que el que saldría sin esa comprobación.

Ya de paso: ¿tu app está exponiendo datos?

Analízala gratis mientras lees. Tarda treinta segundos y no toca nada.

Solo leemos lo que tu app ya le entrega a cualquier visitante.

Por qué te pasa

Las credenciales de Supabase viven en un fichero que se queda en tu ordenador y no se sube al publicar, precisamente porque contiene credenciales. El servidor donde corre tu app no lo tiene, así que hay que dárselas a mano en el panel de tu hosting. Si nunca lo hiciste, este es el resultado.

Cuando sí lo hiciste y sigue fallando, casi siempre es una de tres. La primera: el nombre no lleva el prefijo que tu proyecto necesita, VITE_ o NEXT_PUBLIC_ según con qué esté hecho, y sin ese prefijo la variable existe en el servidor pero nunca llega al navegador. La segunda: la diste de alta solo en uno de los entornos, y falla en las previsualizaciones aunque funcione en producción, o al revés. La tercera, la más frustrante: la añadiste bien pero no volviste a desplegar, y las variables se leen al construir la app, no al visitarla.

Un caso aparte: si publicas desde el propio Lovable, Bolt o Replit en vez de desde Vercel, las variables se configuran en el panel de esa herramienta. Tenerlas en Vercel no sirve de nada si quien construye tu app es otro.

Lo que este error no significa

No has perdido nada. Este error ocurre antes de conectar con Supabase: tu base de datos y tus usuarios están intactos, sin haberse tocado.
No has roto el código. Es configuración que falta en un sitio concreto, y el mismo código funciona en cuanto está.
No es un problema de seguridad. La dirección del proyecto y la clave pública están pensadas para ir en el navegador. Lo que nunca debe salir de tu servidor es la clave service_role, que es otra distinta.

Arréglalo tú, gratis

Todo esto se hace en paneles web, sin tocar una línea de código, y por eso el agente que escribió tu app no puede hacerlo por ti. Sigue el orden: cada paso descarta una de las causas.

1En Supabase, ve a Project Settings y luego Data API. Copia la URL del proyecto, y en API Keys copia la clave pública, la que pone anon o publishable. No cojas la service_role.
2Averigua qué prefijo necesita tu proyecto. Si tu app está hecha con Lovable, Bolt o cualquier cosa basada en Vite, es VITE_. Si es Next.js, NEXT_PUBLIC_. El nombre completo suele ser VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY, o los equivalentes con NEXT_PUBLIC_.
3Entra en el panel de quien construye tu app. Si publicas en Vercel, Settings y luego Environment Variables. Si publicas desde el propio Lovable o Bolt, en los ajustes del proyecto allí dentro.
4Da de alta las dos variables y marca todos los entornos que te ofrezca, no solo producción. Así no te vuelve a fallar en las previsualizaciones.
5Vuelve a desplegar. Este paso no es opcional y es donde se atasca casi todo el mundo: un despliegue anterior no va a recoger las variables nuevas por su cuenta.
6Si sigue igual, compara letra por letra el nombre que has puesto en el panel con el que aparece en el mensaje de error. Un guion bajo de más o una S de menos dan exactamente este fallo.

Truco para no perder tiempo: si en el panel puedes ver el registro del despliegue, busca ahí el nombre de la variable. Si no aparece, no le ha llegado, y no hay nada que arreglar en el código.

Y esto para la parte de código

Pégaselo tal cual al agente que escribió tu app. Está redactado para que te diga lo que ha hecho, no solo para que lo haga.

Prompt para pegarle a tu agente

Mi app da el error "Missing Supabase environment variables" al desplegarla, aunque en local funciona.

Necesito que hagas esto:
1. Busca en el proyecto la comprobación que lanza ese error y dime exactamente qué nombres de variables está esperando, escritos tal cual.
2. Comprueba que esos nombres llevan el prefijo que necesita este proyecto para llegar al navegador (VITE_ si es Vite, NEXT_PUBLIC_ si es Next.js). Si no lo llevan, corrígelo en el código y en el fichero .env.example.
3. Asegúrate de que el mensaje de error dice qué variable concreta falta, por su nombre, en vez de un mensaje genérico.
4. Comprueba que no hay ningún sitio del código donde la URL o la clave estén escritas directamente en vez de leerse de variables de entorno. Si lo hay, sácalas.

Al terminar, dame la lista exacta de variables que tengo que dar de alta en el panel de mi hosting, con el nombre literal de cada una.

¿Lo has intentado y sigue sin salir?

O el escáner de arriba ha encontrado algo y prefieres no tocarlo solo. En cualquiera de los dos casos esto ya es de los gordos y merece un humano: no es que no hayas sabido, es que has llegado al punto en que hace falta alguien que entre y lo vea por dentro.

Cita a partir de mañana

Agendar revisión

99 €

Elegimos hueco, miro tu app con calma y te digo qué pasa y cómo se arregla.

Sesión de trabajo en directo contigo
Diagnóstico del error y del riesgo real
Te quedas con el arreglo aplicado

Ver huecos disponibles

Hoy, en cola prioritaria

Rescate exprés

199 €

Entras en la cola de hoy. Reservas hueco y lo dejamos resuelto en el día.

Hueco el mismo día
Prioridad sobre las revisiones agendadas
Mismo trabajo, antes

Ver huecos de hoy

Quién lo arregla

Marc Sala

IT Manager

Analista de ciberseguridad certificado por Google

No es un rating anónimo de un marketplace: es la persona que va a entrar en tu app. Reviso el código, encuentro qué falla y lo arreglo contigo delante.