01 Por qué no programar el login a mano
Registro, verificación de correo, recuperación de contraseña, sesiones que caducan, protección frente a ataques de fuerza bruta, segundo factor… Cada pieza es sencilla por separado, pero un solo descuido abre una brecha de seguridad. Además, es trabajo que no diferencia tu producto.
Clerk es un servicio de autenticación gestionado: guarda las cuentas, gestiona las sesiones y te da componentes de interfaz ya diseñados para iniciar sesión, registrarse y administrar el perfil. Tu código solo pregunta «¿quién es este usuario?» y Clerk responde.
| Aspecto | Login propio | Clerk |
|---|---|---|
| Tiempo de puesta en marcha | Días o semanas | Menos de una hora |
| Dónde viven los usuarios | En tu base de datos | En la plataforma de Clerk |
| Mantenimiento de seguridad | Tuyo | Del proveedor |
| Coste | Tu tiempo | Gratis hasta cierto volumen; de pago al crecer |
| Dependencia | Ninguna | Migrar después requiere trabajo |
02 Paso 1: dale a Claude el contexto de Clerk
Clerk evoluciona rápido (nombres de componentes, el archivo de middleware según la versión de Next.js…). Para que Claude no use APIs antiguas, conviene darle acceso a la documentación actual. Elige una de estas opciones:
claude mcp add clerk --transport http https://mcp.clerk.com/mcp/plugin marketplace add clerk/skills
/plugin install clerk@clerk-skillsnpx skills add clerk/skills03 Paso 2: instala Clerk con su CLI
La vía recomendada por Clerk es su CLI. Ejecutado en la raíz del proyecto, detecta el framework, instala el SDK, crea el archivo de middleware y escribe las claves de desarrollo en .env.local. Si no has iniciado sesión, crea una aplicación provisional que luego puedes reclamar desde tu cuenta.
npx -y clerk@latest initnpx -y clerk@latest doctorClaves
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (empieza por pk_) y CLERK_SECRET_KEY (empieza por sk_). La secreta nunca debe llegar al navegador ni a git.
Middleware
Llama a clerkMiddleware() desde @clerk/nextjs/server. En Next.js 16 o superior el archivo es proxy.ts; en la 15 o anteriores, middleware.ts.
ClerkProvider
Envuelve el contenido dentro de <body> en app/layout.tsx, no la etiqueta <html>.
Integra Clerk en esta app Next.js con App Router siguiendo la documentación actual de Clerk (consúltala con el MCP de Clerk antes de escribir código).
1. Comprueba la versión de Next.js en package.json y crea proxy.ts o middleware.ts según corresponda, usando clerkMiddleware().
2. Coloca <ClerkProvider> dentro de <body> en app/layout.tsx.
3. Añade NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY y CLERK_SECRET_KEY como marcadores en .env.local y confirma que .env.local está en .gitignore.
4. Añade botones de acceso y registro para usuarios sin sesión y el botón de usuario para quien ya ha entrado.
No inventes nombres de componentes: si dudas, consúltalo. Al terminar, resume qué archivo hace cada cosa y cómo arrancar el proyecto.04 Paso 3: Google, correo y passkeys
-
1
Correo y contraseña
Viene activado por defecto. Desde el panel de Clerk puedes decidir si pides verificación por código o enlace.
-
2
Google en desarrollo
Actívalo en el panel, en el apartado de conexiones sociales. En desarrollo Clerk usa credenciales compartidas, así que funciona sin configurar nada en Google.
-
3
Google en producción
Crea tus propias credenciales OAuth en Google Cloud y pega en ellas la URI de redirección que te da Clerk. Sin este paso, el login con Google no funcionará en tu dominio real.
-
4
Passkeys (huella o reconocimiento facial)
Se basan en el estándar WebAuthn y se activan con un interruptor en el panel. Según la página de precios de Clerk, no están incluidas en el plan gratuito: necesitas Pro o superior.
Tengo Clerk integrado. Quiero que los usuarios entren con correo, con Google y, más adelante, con passkeys. Consulta la documentación actual de Clerk y dame una lista de lo que tengo que activar en el panel de Clerk para desarrollo y lo que cambia al pasar a producción (credenciales propias de Google, URI de redirección, dominio, claves de producción). Indica qué partes dependen del plan contratado. Si hace falta tocar código para que aparezcan los nuevos métodos, hazlo y explícame qué cambiaste.05 Paso 4: pantallas, perfil y rutas privadas
| Componente | Para qué sirve |
|---|---|
| SignIn / SignUp | Formularios completos de acceso y registro en una página propia |
| SignInButton / SignUpButton | Botones que abren el acceso o el registro |
| UserButton | Avatar con menú de cuenta y cierre de sesión |
| UserProfile | Página para que el usuario cambie correo, contraseña, cuentas vinculadas y segundo factor |
| Show | Muestra contenido según haya sesión iniciada o no |
Con Clerk ya integrado, quiero que todo lo que cuelga de /panel sea privado. Protégelo en el middleware (proxy.ts o middleware.ts, el que exista) para que quien no tenga sesión vaya a la página de acceso. Añade UserButton en la cabecera y una página /cuenta con UserProfile. Comprueba además que las rutas de API que devuelven datos de usuario verifican la sesión en el servidor y no solo ocultan botones en la interfaz. Al final, lista qué rutas quedaron protegidas.06 Antes de publicar
- ✓Crea la instancia de producción en Clerk y usa sus claves, no las de desarrollo.
- ✓Configura tu dominio y los registros DNS que pida Clerk.
- ✓Sustituye las credenciales compartidas de Google por las tuyas.
- ✓Confirma que .env.local no está en el repositorio y que las claves están en las variables de entorno del hosting.
- ✓Prueba el ciclo completo: registro, verificación, cierre de sesión, recuperación de contraseña.
- ✓Actualiza tu política de privacidad mencionando a Clerk como proveedor.
Preguntas frecuentes
El plan gratuito cubre hasta 50.000 usuarios retenidos al mes por aplicación. El plan Pro cuesta 25 dólares al mes (20 con pago anual) y añade funciones como passkeys. Revisa la página de precios, porque cambia con frecuencia.
No. Clerk tiene SDK para React, Remix, Astro, Expo para móvil y otros entornos. Esta guía usa Next.js porque es el caso más común; con el MCP o las skills, Claude adapta los pasos a tu framework.
Las cuentas viven en su plataforma. Puedes exportarlas, pero migrar a otro sistema más adelante requiere trabajo. Si necesitas control total de los datos, valora una solución autoalojada.
Pídele que consulte primero la documentación mediante el MCP de Clerk o instala las skills oficiales. Señales de código desfasado: authMiddleware en lugar de clerkMiddleware o ClerkProvider envolviendo la etiqueta html.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.