Autenticación y login con Clerk: registro, Google y huella en tu app, instalado por Claude

Cualquiera que haya hecho una app lo sabe: la parte más tediosa casi nunca es lo bonito de la pantalla, es el login. Cuentas, contraseñas, registro, confirmar el correo, recuperar la cuenta cuando se les olvida, mantener la sesión abierta sin que sea un coladero de seguridad. Es trabajo delicado y aburrido a la vez.

Y es justo donde más fácil te equivocas. Una contraseña mal guardada, un correo de recuperación que no expira, una sesión que se queda abierta de más: cualquiera de esas se convierte en un hueco de seguridad real. Por eso construir autenticación a mano consume semanas y nunca queda del todo tranquilo.

Lo importante: esta es una guía intermedia, pensada para que no toques código. Vas a copiar comandos, pegar prompts y hacer un par de clics en un panel. De ahí en adelante, el trabajo pesado lo hace Clerk, y la integración la hace Claude.

Clerk es autenticación como servicio: en vez de programar el login tú, lo conectas a tu app y Clerk se encarga de todo lo de cuentas y sesiones. Trae tres cosas que te ahorran semanas de trabajo.

Seamos honestos: Clerk es un servicio de terceros, un SaaS. Tus usuarios viven en su plataforma, no en tu base de datos. A cambio te quitas de encima lo más delicado de toda app —construir y mantener una autenticación segura— sin tener que ser experto en seguridad. Para el 95% de los proyectos, ese trato vale muchísimo la pena.

Antes de instalar nada, conviene darle a Claude el contexto de Clerk para que la integración salga bien a la primera. Clerk tiene un manual pensado para la IA: una página, llamada clerk.com/llms.txt, que es el índice de su documentación en un formato que los agentes leen fácil. Hay dos formas de conectarlo, elige una.

Opción A — el MCP oficial

Un solo comando deja a Claude hablando con Clerk en vivo, con acceso a su documentación y sus herramientas mientras trabaja.

Opción B — la skill de Clerk

Si prefieres meterle el conocimiento de Clerk de forma fija a Claude Code (o a Cursor y otros), instala su skill. Es el equivalente al "prompt propio" que Clerk prepara para que la IA integre todo bien.

Con Clerk ya conectado a Claude, instalarlo es directo. Hay dos caminos: clerk init andamia el proyecto completo, e npm install @clerk/nextjs agrega el paquete a una app de Next.js que ya tengas.

¿El comando no jaló o tu proyecto es especial? Pégale este prompt a Claude y deja que integre todo siguiendo el quickstart oficial de Clerk:

Integra Clerk en mi app de Next.js siguiendo el quickstart oficial de Clerk para App Router.

Concretamente:
- Instala el paquete @clerk/nextjs.
- Crea un archivo middleware.ts en la raíz que use clerkMiddleware() (NO uses authMiddleware, está deprecado).
- Envuelve mi layout raíz (app/layout.tsx) en <ClerkProvider>.
- Configura las variables de entorno en .env.local: NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY y CLERK_SECRET_KEY. Déjalas como placeholders y dime exactamente de dónde sacar cada una en el Dashboard de Clerk (sección API Keys).
- Crea las páginas de inicio de sesión y registro con rutas catch-all: app/sign-in/[[...sign-in]]/page.tsx con <SignIn/> y app/sign-up/[[...sign-up]]/page.tsx con <SignUp/>.

Cuando termines, explícame en una línea qué hace cada archivo y cómo arrancar el proyecto para probarlo.

Aquí está la parte mágica: no configuras métodos de acceso a mano, se lo pides a Claude con palabras normales. Este prompt activa Google, correo y passkeys de un tirón y te dice qué tocar en el panel de Clerk.

Ya tengo Clerk integrado en mi app. Quiero activar el login con Google, con correo y contraseña, y con passkeys (huella, Face ID, Touch ID).

- El correo y contraseña ya vienen por defecto, confírmamelo.
- Para Google: dime paso a paso qué activar en el Dashboard de Clerk (Social Connections) para desarrollo, donde Clerk da credenciales compartidas, y qué cambia para producción con mis propias credenciales de Google Cloud y la Redirect URI.
- Para passkeys: dime dónde activarlos en el Dashboard.
- Si hace falta algún ajuste en mis pantallas de <SignIn/> y <SignUp/> para que muestren estos métodos, hazlo.

Una parte vive en el Dashboard de Clerk —su panel web— con un par de clics. Esto es lo que hay que saber:

Lo mejor de Clerk: no diseñas ni una pantalla. Trae piezas listas que metes en tu app y se encargan de todo. Estas son las que vas a usar:

El registro y el inicio de sesión viven en lo que se llama rutas catch-all (algo como app/sign-in/... y app/sign-up/...). No te preocupes por el detalle: Claude las crea por ti con este prompt.

En mi app con Clerk ya integrado, quiero dejar lista la experiencia de usuario logueado:

- Agrega el componente <UserButton/> en el header de la app (el avatar con el menú de cuenta).
- Crea una página de perfil en /perfil (o la ruta que tenga sentido) que muestre el componente <UserProfile/> completo.
- Protege las rutas privadas para que solo entren usuarios con sesión iniciada, usando <SignedIn> y <SignedOut> (o el middleware) y mandando a /sign-in a quien no haya iniciado sesión.

Hazlo con los componentes drop-in de Clerk, sin diseñar pantallas a mano, y dime qué quedó protegido.