Autenticación
Vas a montar un gestor de tareas sencillo en HeroMate. A lo largo del curso añadirás autenticación, tablas y endpoints, almacenamiento, un asistente de IA y más adelante pagos. Este vídeo empieza por la autenticación—pero antes hay que conectar tu proyecto a HeroMate.
Qué cubre este vídeo
IDE y proyecto
Usa cualquiera de los clientes de IA compatibles—Claude Code, Codex, Cursor, Windsurf o Antigravity (o cualquier herramienta compatible con MCP). El ejemplo parte de una app Next.js vacía (una página demo) para que puedas seguirlo aunque no sepas nada de HeroMate todavía.
Conectar MCP
Abre la página de la organización "Conectar IA" (tokens MCP) en /{org}/mcp/tokens, crea un token y añade la configuración MCP a tu cliente de IA (el menú exacto depende del cliente). Al conectarlo, deberían aparecer las herramientas HeroMate para tu proyecto.
Elegir modelo
En el tutorial se usa un modelo rápido (Composer 2 en el vídeo), pero puedes usar Claude, Gemini, GPT o el que quieras.
Pedir auth al agente
Pide al agente que te monte la autenticación completa de la app con HeroMate: login, registro, contraseña olvidada, cambio de contraseña. No hace falta ser experto en HeroMate: el agente puede apoyarse en la documentación y en las herramientas MCP.
Dependencias
Pídele que compruebe que el SDK cliente de HeroMate y lo necesario estén instalados. Si falta algo, que lo instale según la documentación para que no lo hagas a mano.
Implementación
El agente llamará a las herramientas HeroMate, leerá la documentación y creará poco a poco las páginas del frontend. Espera a que termine la ejecución.
URL en el entorno
Aún tienes que indicar al frontend dónde está tu proyecto HeroMate en internet—misma idea que en el primer tutorial (setup / conexión). En Next.js, copia la URL pública del proyecto desde el panel de HeroMate (el snippet que te muestran para tu stack), ponla en .env.local (por ejemplo NEXT_PUBLIC_DYPAI_URL=...) y reinicia el servidor de desarrollo para que carguen las variables.
Probar el flujo
Abre tu app: regístrate con nombre, email y contraseña. HeroMate envía un email de verificación—ábrelo, confirma y deberías volver a la aplicación. Luego inicia sesión y comprueba que la sesión funciona. Puedes cerrar sesión y volver a probar.
El área de Autenticación
Una vez montada la auth, la sección Authentication (Build → Authentication) es donde la gestionas. Tiene estas subsecciones:
- Users — tus usuarios registrados.
- Roles — definiciones de roles para el control de acceso.
- Providers — inicio de sesión social/OAuth (activa un proveedor aquí antes de usar
signInWithOAuth). - Mail — plantillas de email y el remitente para los correos de verificación/reset.
- SMS — el proveedor de OTP por SMS (configúralo antes de usar el inicio de sesión por teléfono).
- Settings — ajustes generales de auth.
Para auth en servidor dentro de un endpoint, también existe el nodo de workflow dypai_auth.
Qué aprenderás
- Conectar MCP y usar las herramientas HeroMate desde tu IDE
- Dejar que el agente genere las páginas de auth enlazadas a HeroMate Auth
- Instalar y configurar el SDK cliente con prompts
- Configurar
.env.localcon la URL del proyecto y reiniciar la app - Verificación por email y un bucle login / logout que funcione
Siguiente
Continúa con Tablas y endpoints para diseñar tareas, APIs y el resto de la app—luego almacenamiento, agente de IA y pagos (por ejemplo Stripe para un plan Premium o Pro).