Autenticación
Vas a montar un gestor de tareas sencillo en DYPAI. 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 DYPAI.
Qué cubre este vídeo
IDE y proyecto
Puedes usar el editor con IA que prefieras—Cursor, Windsurf, Claude Code, Visual Studio Code, etc. El ejemplo parte de una app Next.js vacía (una página demo) para que puedas seguirlo aunque no sepas nada de DYPAI todavía.
Conectar MCP
En DYPAI, abre Conectar para tu proyecto y enlaza el MCP con tu IDE (el menú exacto depende del editor). Añade la herramienta de DYPAI; al conectarla, deberían aparecer las herramientas DYPAI 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 DYPAI: login, registro, contraseña olvidada, cambio de contraseña. No hace falta ser experto en DYPAI: el agente puede apoyarse en la documentación y en las herramientas MCP.
Dependencias
Pídele que compruebe que el SDK cliente de DYPAI 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 DYPAI, 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 DYPAI 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 DYPAI (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. DYPAI 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.
Otros modos de auth
DYPAI admite más opciones de autenticación; las dejamos para otros vídeos para no mezclar temas.
Qué aprenderás
- Conectar MCP y usar las herramientas DYPAI desde tu IDE
- Dejar que el agente genere las páginas de auth enlazadas a DYPAI 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).