> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Integración con Clerk
> Descubre cómo integrar Clerk en tu aplicación de Lovable
## ¿Por qué Clerk?
[Clerk](https://clerk.com) gestiona la autenticación y la administración de usuarios para que no tengas que desarrollarlas desde cero. Con solo unas pocas indicaciones y pasos de configuración, obtienes:
* Inicio de sesión y registro seguros (social, contraseña, MFA)
* Componentes de UI preconstruidos: perfiles de usuario, administración de organizaciones, suplantación de identidad
* Soporte para aplicaciones B2B (equipos, roles, invitaciones)
* Integración con Supabase, Stripe (próximamente) y más
* Modo lista de espera para gestionar el acceso anticipado
* Generoso plan gratuito: 10 000 usuarios activos mensuales (MAU)
## Guía paso a paso para la integración
Aquí encontrarás una guía paso a paso:
Crea una cuenta en Clerk → [Clerk.com](https://clerk.com)
En el panel de control de Clerk, crea una nueva app
Inicia sesión en Clerk y crea una nueva app
Habilita los proveedores de autenticación que quieras (p. ej., Google, GitHub)
Habilita “Waitlist” en **Configure > Restrictions**
Copia tu **Public API Key**
**Agrega Clerk a tu app de Lovable**
En **Lovable**, agrega Clerk como tu proveedor de autenticación.
Dale a Lovable esta instrucción:
Construyamos una hermosa app de gestión de proyectos y tareas al estilo de Asana. Los usuarios deben poder iniciar sesión y registrarse usando Clerk para la autenticación y gestión de usuarios. Comencemos creando una página de inicio con un gran diseño y usemos el componente de lista de espera (waitlist) de Clerk para que los usuarios se unan mientras construimos el resto de la app.
Pega tu **Public API Key** cuando se te solicite
Lovable genera las páginas de inicio de sesión y registro
Despliega y haz pruebas: ahora ya estás usando Clerk para la autenticación
**¿Por qué usar una lista de espera?** – ¡Consigue tus primeros usuarios antes de lanzar tu aplicación!
Usa la lista de espera integrada de Clerk para recopilar usuarios antes del lanzamiento.
En el panel de control de Clerk: **Configure > Restrictions > Waitlist**
Los nuevos registros aparecerán como **pending**
* Los usuarios que se registren ahora estarán **pending approval**
* Los administradores pueden aprobar usuarios desde el panel de control de Clerk
Personaliza los correos de la lista de espera (marca, contenido)
Configura acceso basado en equipos en tu app.
En el panel de Clerk, habilita **Organizations**
Define roles (Administrador, Miembro, Lector, etc.)
Invita a usuarios a tu organización por correo electrónico
Asigna roles y permisos desde el panel
Indica a Lovable que:
Pida a los usuarios que creen o se unan a una organización después de registrarse
**Uso del componente User Profile de Clerk**
* Proporciona un panel de gestión de usuarios preconstruido
* Permite inicios de sesión con redes sociales y autenticación mediante contraseña
* Los usuarios pueden gestionar sus propias cuentas y 2FA (autenticación en dos pasos)
**¿Qué es el modo de suplantación?**
Los administradores pueden iniciar sesión como cualquier usuario para solucionar incidencias
Soluciona problemas de tu app como si fueras un usuario concreto.
En el panel de Clerk > Users, haz clic en un usuario
Haz clic en **Impersonate**
Ve tu app desde su perspectiva
Seguridad: quienes suplantan no pueden realizar acciones sensibles (por ejemplo, cambiar la contraseña)
Combina Clerk Auth con el backend de Supabase.
**¿Por qué integrar con Supabase?**
* Almacenar los datos de usuario en una base de datos
* Autenticación segura mediante tokens JWT
* Conectar la autenticación con las funciones de la app
**Cómo integrar:**
En Supabase, ve a **Settings > API > JWT Secret (**[**documentation**](https://clerk.com/docs/integrations/databases/supabase)**)**
En Clerk: **JWT Templates > Add Supabase**, pega el secreto JWT
Habilita **Clerk como proveedor de autenticación**
Actualiza las políticas RLS para usar `auth.uid()` de Clerk
Pídele a Lovable que:
Vamos a configurar Supabase para integrarlo con Clerk. Clerk ya se ha configurado con un secreto de Supabase. Aquí tienes un ejemplo de cómo implementar el cliente de Supabase usando Clerk. Úsalo como referencia.
*\[Supabase client configuration import]*
Confirma que Supabase acepta los tokens emitidos por Clerk
**¿Por qué usar un dominio personalizado?**
Aumenta el reconocimiento de tu marca y la confianza
[Más información aquí](https://docs.lovable.dev/tips-tricks/custom-domain).
En Lovable: **Project > Settings > Custom Domain**
Introduce el dominio que compraste (p. ej. `app.yourcompany.com`)
Lovable configura el DNS automáticamente (no necesitas salir de Lovable)
Despliega y prueba tu app con el nuevo dominio.
Listo ✅ — tu app ahora es de marca blanca
**Tu app ahora tiene:**
* Autenticación segura con Clerk
* Una lista de espera para captar a tus primeros usuarios
* Funciones de gestión de usuarios y equipos
* Integración de base de datos con Supabase
* Un dominio personalizado profesional
## Extra: crea funcionalidades B2B en minutos
Clerk ofrece:
* Acceso basado en roles para organizaciones
* Flujos de invitación (por correo electrónico, interfaz de usuario preconstruida)
* Personalización del perfil de la organización (logotipo, nombre)
* Cambio entre múltiples organizaciones (por ejemplo, al estilo Slack)
**Pídele a Lovable que:**
Agregar la interfaz para cambiar de organización
Permitir que los usuarios inviten a sus compañeros de equipo
## Consejos y resolución de problemas
* **¿Ya usas Supabase Auth?** Puedes cambiar a Clerk sin reescribir la lógica de tu app. Solo tienes que configurar correctamente el JWT y cambiar el proveedor de autenticación.
* **Personalización del correo electrónico:** Clerk te permite editar todas las plantillas de correos transaccionales (lista de espera, invitaciones, aprobaciones).
* **Inicio de sesión móvil**: Clerk es compatible con passkeys, códigos OTP y SMS; no necesitas configuración adicional en Dev Mode.
* **Cumplimiento normativo**: Clerk cumple con SOC2, HIPAA y GDPR.
## Preguntas frecuentes (FAQ)
Sí. Clerk y Supabase funcionan bien juntos. Solo necesitas:
* Configurar Clerk para que emita JWT
* Agregar el secreto JWT de Supabase en Clerk
* Actualizar las políticas RLS de Supabase para usar `auth.uid()` de Clerk
Esto te permite conectar Clerk a una app existente basada en Supabase con cambios mínimos.
Solo para producción. En modo de desarrollo, Clerk proporciona credenciales compartidas para pruebas. Para producción:
* Configura tus propias credenciales de Google/GitHub/etc.
* Agrégalas en Clerk en **Configuración de OAuth**
* **Users**: Personas individuales que pueden iniciar sesión en tu app
* **Organizations**: Grupos de usuarios (equipos, empresas)
Usa organizaciones cuando quieras:
* Acceso basado en roles (Admin, Member, etc.)
* Que los usuarios inviten a compañeros de equipo
* Flujos de tipo B2B SaaS
Permite que los administradores inicien sesión como cualquier usuario; es muy útil para:
* Depurar problemas de usuarios
* Entender su experiencia
* Proporcionar soporte en vivo
Clerk limita lo que los suplantadores pueden hacer (por ejemplo, no pueden cambiar contraseñas).
Sí. Clerk ofrece:
* Soporte completo de CSS mediante props de `appearance`
* La opción de crear interfaces totalmente personalizadas usando los hooks de React de Clerk
Puedes mantener el aspecto predeterminado o hacer que coincida por completo con la marca de tu app.
Actualmente:
* Los usuarios reciben notificaciones automáticas cuando se les aprueba desde la lista de espera
* El soporte para envío masivo de correos electrónicos llegará **pronto**
Por ahora, exporta las direcciones de correo y usa tu herramienta de email preferida.
Sí. Clerk tiene un generoso plan gratuito:
* Hasta **10.000 usuarios activos mensuales (MAU)**
* Los planes de pago comienzan en **\$25/mes**, con precios basados en el uso a partir de ahí
Puedes usarlo en producción sin pagar hasta que escales.
Sí. Clerk es:
* **Certificado SOC 2**
* **Compatible con HIPAA**
* **Preparado para GDPR**
Es ideal para equipos que trabajan en sectores regulados.
Próximamente. Pronto podrás:
* Definir planes (por ejemplo, Free, Pro, Enterprise)
* Permitir que usuarios/organizaciones gestionen sus suscripciones desde la UI de Clerk
* Sincronizar datos automáticamente con Stripe
Sigue a [@clerkdev](https://x.com/clerkdev?lang=en) en X para recibir novedades.
¿Quieres que agreguemos una pregunta a este FAQ? [Cuéntanoslo en Discord](https://discord.gg/lovable-dev)!
## Reflexiones finales
Clerk convierte la autenticación en una instrucción. No necesitas implementarla por tu cuenta.
**Con solo unos cuantos clics e indicaciones, tu app ahora tiene:**
* Autenticación segura y escalable
* Gestión de equipos y organizaciones
* Herramientas de suplantación de identidad para depuración
* Datos y control de acceso respaldados por Supabase
* Compatibilidad con dominios personalizados para una experiencia de usuario pulida
[Clerk](https://clerk.com) gestiona la autenticación y la administración de usuarios para que no tengas que desarrollarlas desde cero. Con solo unas pocas indicaciones y pasos de configuración, obtienes:
* Inicio de sesión y registro seguros (social, contraseña, MFA)
* Componentes de UI preconstruidos: perfiles de usuario, administración de organizaciones, suplantación de identidad
* Soporte para aplicaciones B2B (equipos, roles, invitaciones)
* Integración con Supabase, Stripe (próximamente) y más
* Modo lista de espera para gestionar el acceso anticipado
* Generoso plan gratuito: 10 000 usuarios activos mensuales (MAU)