Cuentas de usuario e inicio de sesión
Añada el registro y la autenticación
Cuentas de usuario e inicio de sesión es una lección gratuita de Vibe Coding en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vibe Coding, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vibe Coding incluye 4 lecciones en total.
¿Quién utiliza su aplicación?
Su aplicación almacena datos, pero ahora mismo todos comparten los mismos datos. Un producto real necesita saber quién es cada persona para que cada profesional independiente vea únicamente sus propios clientes y horas. Eso es lo que le proporciona la autenticación (inicio de sesión).
Hay dos conceptos relacionados: la autenticación responde a «¿quién es usted?» y la autorización responde a «¿qué tiene permitido hacer?». En esta lección añadirá ambas cosas a su aplicación full-stack con ayuda de la IA.
No cree la autenticación desde cero
La autenticación es fundamental para la seguridad y es fácil implementarla de forma peligrosamente incorrecta. La opción profesional, incluso para desarrolladores experimentados, es usar una biblioteca o servicio de autenticación confiable en lugar de crear uno propio.
Entre las opciones populares y compatibles con la IA se encuentran Clerk, Supabase Auth, Auth0 y NextAuth/Auth.js. Deje que la IA le recomiende una para su arquitectura.
I'm adding login to my Next.js freelancer hours app. I do NOT want to build authentication from scratch.
Recommend ONE beginner-friendly auth solution (e.g. Clerk, Supabase Auth, or Auth.js). For your pick, explain:
- why it's safe and easy
- what sign-in methods it supports (email, Google, etc.)
- one sentence on how it fits Next.jsCómo funciona realmente el inicio de sesión
El flujo básico es el siguiente: un usuario introduce sus credenciales (o inicia sesión con Google), el servicio de autenticación las verifica y emite una sesión, un token que demuestra quién es en cada solicitud posterior.
Su aplicación comprueba esa sesión para decidir qué mostrar. Usted no almacena las contraseñas sin cifrar; el servicio de autenticación se encarga de las partes más delicadas.
Explain how the login flow works in plain language for my app, using the auth tool you recommended.
Walk through: user signs up, signs in, gets a session, and how my app uses that session on later requests to know who they are. Mention why I never store raw passwords myself.Añada pantallas de registro e inicio de sesión
Empiece por la parte visible: las páginas donde los usuarios pueden crear una cuenta e iniciar sesión. Las bibliotecas de autenticación modernas proporcionan componentes listos para usar, por lo que a menudo solo hacen falta unas pocas líneas.
Pídale a la IA que añada la interfaz de registro e inicio de sesión y la integre en la navegación de su aplicación.
Set up sign-up and sign-in for my Next.js app using the auth tool we chose.
- add the sign-in and sign-up pages/components
- support email/password and Google sign-in
- add a 'Sign out' button in the header when logged in
Show me each file to create or edit and any environment variables I need. Keep secrets out of the code.Proteja sus páginas y endpoints
Un visitante que no ha iniciado sesión no debería poder acceder al panel ni llamar a sus endpoints de datos. Proteger las rutas significa comprobar que haya una sesión válida y redirigir o rechazar la solicitud si falta.
Pídale a la IA que proteja tanto las páginas del frontend como los endpoints de la API: ambas partes necesitan protección, no solo la pantalla.
Protect my app so only logged-in users can use it.
- redirect logged-out users away from the dashboard page to the sign-in page
- on the API side, reject requests to /api/entries that have no valid session, returning a 401
Show me the middleware or guards needed and explain why protecting the API matters even if the page is already protected.Una pequeña comprobación de sesión
En esencia, la protección de rutas consiste en una comprobación sencilla: ¿hay una sesión válida? Esta es la idea en JavaScript sencillo: un guardián que decide si permite o bloquea una solicitud. Ejecútelo para ver ambos casos.
function handleRequest(session) {
if (!session || !session.userId) {
return { status: 401, body: "Please sign in" };
}
return { status: 200, body: "Welcome, user " + session.userId };
}
console.log(handleRequest(null));
console.log(handleRequest({ userId: 42 }));Asocie los datos al usuario que inició sesión
Ahora viene el paso clave: cada entrada de tiempo debe pertenecer a un usuario, para que cada persona vea únicamente sus propios datos. Eso significa añadir un userId a sus registros y filtrar cada consulta por el usuario actual.
Pídale a la IA que actualice su esquema y sus endpoints para que los datos queden asociados a quien haya iniciado sesión.
Make my data per-user. Each TimeEntry and Client should belong to the logged-in user.
- add a userId field tied to the authenticated user
- when creating an entry, attach the current user's id
- when listing entries, only return rows belonging to the current user
Update the Prisma schema and the /api/entries endpoints. Give me the migration command too.Autorización: quién puede hacer qué
No basta con haber iniciado sesión: debe asegurarse de que un usuario solo pueda modificar sus propios registros. Sin esta comprobación, cualquiera podría editar la entrada de otra persona adivinando un id. Eso es una comprobación de autorización y constituye un punto ciego frecuente de la IA.
Pídale explícitamente a la IA que verifique la propiedad al actualizar y eliminar.
Add ownership checks to my update and delete endpoints.
Before updating or deleting a TimeEntry, confirm it belongs to the currently logged-in user. If it belongs to someone else, return 403 Forbidden — never modify it.
Show the updated PUT and DELETE routes and explain why checking the session alone is not enough.Muestre al usuario que ha iniciado sesión
Las buenas aplicaciones hacen que la autenticación resulte sencilla y cercana: muestran el nombre o el avatar del usuario, un botón claro de «Cerrar sesión» y estados útiles durante la carga y cuando se producen errores. Este acabado genera confianza.
Pídale a la IA que muestre la información del usuario que ha iniciado sesión y gestione correctamente los estados intermedios.
Polish the auth experience in my app.
- show the logged-in user's name and avatar in the header
- add a clean 'Sign out' action
- show a loading state while the session is being checked, so the UI doesn't flicker
- if sign-in fails, show a friendly message
Show me the component changes and keep the styling minimal.Pruebe todo el flujo de autenticación
Antes de darlo por terminado, recorra todo el proceso: regístrese, cierre sesión, vuelva a iniciarla, añada datos y, después, inicie sesión como un usuario distinto y confirme que no ve ninguno de los datos del primer usuario. Eso demuestra que tanto la autenticación como la autorización funcionan.
Si algo se filtra entre usuarios, describa a la IA los pasos exactos: es una forma precisa de encontrar el problema.
Help me test my app's auth end to end. Give me a step-by-step test checklist that includes:
- sign up, sign out, sign back in
- adding data as User A
- signing in as User B and confirming User B canNOT see User A's data
- trying to edit User A's entry while signed in as User B (should be blocked)
Tell me what correct behavior looks like at each step.Una aplicación full-stack completa
Lo ha conseguido: un frontend, un backend, una base de datos real y, ahora, cuentas de usuario seguras; una aplicación full-stack auténtica, creada casi por completo conversando con la IA. Cada profesional independiente inicia sesión y ve únicamente sus propios clientes y horas.
Esta es la base sobre la que se construyen los productos reales. A partir de aquí puede implementarla, añadir pagos o ampliar sus funciones, todo con el mismo flujo de trabajo de vibe coding que ha practicado.
Comprobación rápida
Consolide su enfoque de seguridad.
Resumen: cuentas e inicio de sesión
Ha protegido su aplicación full-stack:
- La autenticación identifica al usuario; la autorización controla lo que puede hacer
- Use un servicio de autenticación de confianza (Clerk, Supabase Auth, Auth.js); nunca lo desarrolle por su cuenta
- Proteja tanto las páginas como los endpoints de la API con comprobaciones de sesión
- Asigne los datos por usuario mediante un userId y filtre cada consulta
- Verifique la propiedad antes de actualizar o eliminar, y haga pruebas con varios usuarios
¡Enhorabuena! Ha creado una aplicación full-stack completa hablando con la IA. En los próximos cursos aprenderá a implementarla, añadir pagos y ponerla a disposición de usuarios reales.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 25
- Lecciones
- 100
Preguntas frecuentes
¿La lección «Cuentas de usuario e inicio de sesión» es gratis?
Sí — el texto completo de «Cuentas de usuario e inicio de sesión» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vibe Coding, actualiza a CoddyKit PRO. El curso de Vibe Coding incluye 4 lecciones en total.
¿Qué aprenderé en «Cuentas de usuario e inicio de sesión»?
Añada el registro y la autenticación Practicas Vibe Coding con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vibe Coding?
No se requiere experiencia previa. Vibe Coding en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Cuentas de usuario e inicio de sesión»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vibe Coding?
Sí. Cada lección de Vibe Coding incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Planificación de la aplicación con IA
- Frontend y backend juntos
- Cómo añadir una base de datos
- Cuentas de usuario e inicio de sesión