Integración con Clerk

Descubre cómo integrar Clerk en tu aplicación de Lovable

​

¿Por qué Clerk?

Clerk 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:

1. Configura tu app de Clerk
2. Activar el modo de lista de espera (opcional)

   ¿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.
3. Gestión de usuarios y equipos en Clerk

   Configura acceso basado en equipos en tu app.
4. Modo de suplantación de identidad (para administradores)

   ¿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.
5. Integración con Supabase (avanzado)

   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:
6. Agregar un dominio personalizado (opcional)

   ¿Por qué usar un dominio personalizado?

   Aumenta el reconocimiento de tu marca y la confianza

   Más información aquí.
7. Conclusiones y próximos pasos

   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)

¿Puedo cambiar fácilmente de Supabase Auth a Clerk?

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.

¿Necesito configurar proveedores OAuth como Google o GitHub?

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

¿Cuál es la diferencia entre Organizations y Users?

• 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

¿Qué es «Impersonation Mode»?

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).

¿Puedo personalizar los componentes de UI de Clerk?

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.

¿Puedo enviar correos a los usuarios de mi lista de espera desde Clerk?

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.

¿Clerk es gratuito?

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.

¿Clerk ofrece compatibilidad con normativas (SOC2, HIPAA, GDPR)?

Sí. Clerk es:

• Certificado SOC 2
• Compatible con HIPAA
• Preparado para GDPR

Es ideal para equipos que trabajan en sectores regulados.

¿Puedo usar Clerk con Stripe para la facturación?

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 en X para recibir novedades.

¿Quieres que agreguemos una pregunta a este FAQ? Cuéntanoslo en Discord!

​

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