Añadir registro, inicio de sesión y cuentas de usuario a una app no implica necesariamente tener que configurar de forma manual la autenticación, las sesiones, las rutas protegidas y los permisos. Con Coderblock puedes describir en el chat el comportamiento que quieres conseguir y dejar que el agente configure la parte técnica.

En este tutorial aprenderás a:

• añadir registro e inicio de sesión;
• crear un área personal protegida;
• gestionar sesiones y rutas protegidas;
• asociar los datos al usuario autenticado;
• configurar roles como cliente y administrador;
• proteger los datos con Row Level Security;
• añadir inicio de sesión con redes sociales si lo necesitas;
• probar el funcionamiento de la autenticación antes de publicar la app.

Antes de empezar

Abre el proyecto de Coderblock al que quieras añadir autenticación. Puedes partir de una app existente o crear un proyecto nuevo describiendo en lenguaje natural lo que quieres desarrollar.

Por ejemplo:

Crea una plataforma para entrenadores personales en la que cada cliente pueda crear una cuenta, consultar sus rutinas de entrenamiento y hacer un seguimiento de su progreso. Los entrenadores deben disponer de un área de administración para gestionar a los clientes.

Si la app ya existe, puedes pedir directamente que se añadan las cuentas:

Añade registro e inicio de sesión para los usuarios. Cada usuario debe tener un área personal protegida después de iniciar sesión.

Coderblock utiliza Supabase Auth para gestionar la autenticación y configura los elementos necesarios del proyecto, incluidas las sesiones, las rutas protegidas y las políticas de acceso a la base de datos.

---

1. Añade el registro y el inicio de sesión

La forma más sencilla de empezar es describir al agente el flujo que quieres ofrecer a los usuarios. Por ejemplo:

Añade una página de registro y otra de inicio de sesión. Los usuarios deben poder crear una cuenta con su correo electrónico y contraseña y acceder a su área personal después de iniciar sesión.

El agente configura las páginas necesarias y conecta el flujo con Supabase Auth. No necesitas crear manualmente una tabla para las contraseñas ni implementar directamente JWT o el hash de contraseñas. Cuando termine la modificación, revisa la vista previa en vivo e intenta:

1. crear una cuenta nueva;
2. iniciar sesión;
3. cerrar sesión;
4. volver a acceder con la misma cuenta.

Si quieres personalizar el flujo, puedes seguir trabajando mediante el chat. Por ejemplo:

Simplifica el formulario de registro y muestra mensajes de error claros cuando el correo electrónico ya esté registrado o la contraseña no sea válida.

2. Crea un área personal protegida

Una vez configurado el inicio de sesión, puedes decidir qué debe ver un usuario autenticado. Por ejemplo:

Crea una página Cuenta a la que solo puedan acceder los usuarios autenticados. Muestra el nombre, el correo electrónico, la fecha de registro y un resumen de la actividad del usuario.

Coderblock puede crear la página y protegerla para impedir el acceso de los usuarios que no hayan iniciado sesión. También puedes pedir que proteja varias páginas:

Protege las páginas /account, /orders y /settings. Si un usuario no autenticado intenta acceder a ellas, redirígelo a la página de inicio de sesión.

Ahora intenta abrir directamente las URL protegidas sin haber iniciado sesión. El usuario no autenticado no debería poder ver el contenido restringido.

3. Vincula los datos al usuario autenticado

La autenticación resulta realmente útil cuando los usuarios pueden tener datos personales asociados a su cuenta. Por ejemplo, en una plataforma de reservas puedes pedir:

Añade una tabla para las reservas. Cada reserva debe estar asociada al usuario autenticado y debe incluir la fecha, la hora, el servicio y el estado.

El agente puede diseñar la estructura de la base de datos y vincular los registros al usuario autenticado. Después puedes pedir:

En la página Cuenta, muestra únicamente las reservas del usuario que tenga la sesión iniciada en ese momento.

Este principio puede aplicarse a cualquier tipo de dato personal: pedidos, citas, documentos, preferencias, mensajes o contenido creado por el usuario.

4. Protege los datos con Row Level Security

Proteger una página no es suficiente. Si una app contiene datos privados, debes asegurarte de que la base de datos también impida a los usuarios leer o modificar información perteneciente a otras cuentas. Coderblock utiliza Row Level Security (RLS) de Postgres para este fin. Puedes pedir, por ejemplo:

Asegúrate de que cada usuario solo pueda leer y modificar sus propias reservas. Los usuarios no deben poder acceder a los datos de otras cuentas.

El agente configura las políticas necesarias en función del usuario autenticado. Puedes comprobar el resultado desde la pestaña Backend del editor, donde encontrarás las tablas, los usuarios autenticados, el almacenamiento y las funciones del proyecto.

Una prueba importante

Crea al menos dos cuentas de prueba. Con la primera cuenta:

• crea algunos datos;
• comprueba que se muestren correctamente.

Después, inicia sesión con la segunda cuenta y verifica que esos datos no sean accesibles. Esta prueba es especialmente importante en aplicaciones que gestionan información personal, pedidos, documentos u otros datos confidenciales.

5. Añade roles y administradores

Muchas aplicaciones tienen más de un tipo de usuario. Por ejemplo, podrías tener:

• clientes;
• administradores;
• miembros del equipo;
• moderadores;
• profesores;
• profesionales.

Puedes describir estos roles directamente en el chat. Por ejemplo:

Añade los roles de cliente y administrador. Los clientes solo pueden ver y modificar sus propios datos, mientras que los administradores pueden acceder a un panel protegido y gestionar usuarios y contenido.

Coderblock ya incluye una estructura básica para perfiles y roles que el agente puede utilizar para configurar los permisos de la app. Después puedes pedir:

Crea un panel de administración al que solo puedan acceder los usuarios con el rol de administrador.

A continuación, comprueba el comportamiento con cuentas que tengan roles diferentes. Un cliente no debería poder acceder al panel por el mero hecho de conocer su URL.

6. Personaliza el perfil del usuario

Una vez configurada la autenticación, puedes añadir información al perfil. Por ejemplo:

Añade a la página Cuenta un formulario que permita a los usuarios modificar su nombre, número de teléfono e imagen de perfil.

O bien:

Permite que los usuarios suban una foto de perfil y guárdala en el almacenamiento de la app.

Si necesitas información específica para tu producto, puedes describirla del mismo modo. El agente puede actualizar el modelo de datos, la interfaz y la lógica necesaria para vincular esa información a la cuenta correcta.

7. Añade el inicio de sesión con redes sociales

Si quieres permitir que los usuarios se registren o inicien sesión mediante un proveedor social, puedes solicitarlo directamente en el chat. Por ejemplo:

Añade el inicio de sesión con Google junto con la autenticación mediante correo electrónico y contraseña.

Coderblock puede integrar el inicio de sesión con redes sociales en el flujo de autenticación de la app. Después de configurarlo, prueba ambas opciones:

• registro e inicio de sesión mediante correo electrónico y contraseña;
• inicio de sesión mediante el proveedor social.

Comprueba también que ambas lleven al mismo tipo de área personal y que los datos se asocien correctamente al usuario.

8. Gestiona el cierre de sesión y las sesiones

Una cuenta no debería limitarse al inicio de sesión. Pide al agente que configure también el comportamiento de la sesión:

Añade un botón Cerrar sesión en el área personal y asegúrate de que las páginas protegidas dejen de estar disponibles después de cerrar sesión.

A continuación, comprueba que:

1. el inicio de sesión abra correctamente el área personal;
2. al actualizar la página se mantenga la sesión cuando corresponda;
3. el cierre de sesión finalice la sesión;
4. las páginas protegidas dejen de estar disponibles después de cerrar sesión.

Si quieres modificar este comportamiento, puedes describirlo directamente en el chat.

9. Prueba todo el flujo

Antes de publicar la app, prueba la autenticación de principio a fin.

Cuenta de usuario

1. Crea una cuenta nueva.
2. Inicia sesión.
3. Completa el perfil, si corresponde.
4. Crea algunos datos personales.
5. Cierra sesión.
6. Vuelve a iniciar sesión.
7. Comprueba que los datos sigan disponibles.

Seguridad

Después, crea una segunda cuenta y comprueba que:

• no pueda ver los datos del primer usuario;
• no pueda modificar los datos del primer usuario;
• no pueda acceder a las páginas reservadas para el primer usuario;
• no pueda acceder a las páginas de administración.

Administración

Si has configurado un rol de administrador:

1. inicia sesión con una cuenta de administrador;
2. abre el panel;
3. comprueba las funciones disponibles;
4. vuelve a una cuenta de cliente;
5. intenta acceder de nuevo al panel.

El objetivo no es comprobar únicamente que el inicio de sesión funcione, sino que cada usuario solo pueda hacer aquello que le permita su rol.

10. Publica la app

Cuando hayas comprobado la autenticación, las cuentas, los roles y los permisos, podrás publicar la app. Haz clic en Publicar para desplegarla en <app>.coderblock.app, con SSL incluido.

Si quieres utilizar un dominio personalizado, ve a Configuración → Dominios y conecta un dominio existente siguiendo el asistente de configuración DNS, o compra uno directamente en Coderblock.

Después de publicar, repite al menos las pruebas principales en el entorno de producción:

• registro;
• inicio de sesión;
• cierre de sesión;
• acceso a las páginas protegidas;
• visualización de los datos personales;
• permisos de administración;
• acceso a los datos por parte de distintos usuarios.

Lista de comprobación final

Antes de dar por terminada la configuración de la autenticación, comprueba que:

• el registro funcione correctamente;
• el inicio y el cierre de sesión funcionen;
• las sesiones se gestionen correctamente;
• las páginas privadas estén realmente protegidas;
• cada usuario solo pueda acceder a sus propios datos;
• Row Level Security esté configurado correctamente;
• los roles y sus permisos funcionen;
• los usuarios no puedan acceder sin autorización a las áreas de administración;
• los inicios de sesión con redes sociales funcionen correctamente, si los has añadido;
• los datos del perfil estén asociados a la cuenta correcta.

Autenticación lista

Con Coderblock puedes convertir una app sencilla sin cuentas en un producto con registro, inicio de sesión, perfiles, roles, páginas protegidas y datos personales, utilizando la conversación como interfaz principal. Sin embargo, lo más importante es verificar el resultado: la IA puede configurar gran parte de la infraestructura, pero tú debes comprobar que cada cuenta y cada rol tengan exactamente los permisos que les corresponden.