Autenticación JWT con Flask y React.js

Casi todos los sitios web en el mundo tienen autenticación de usuarios, en este proyecto debes realizar una aplicación web implementando la autenticación de usuarios usando Python y el framework Flask para construir un back-end de REST API y React.js, y sessionStorage API para el front-end.

📝 Instrucciones

Implementa un sistema de autenticación en las siguientes partes:

1. Registro: El usuario deberá poder colocar un correo, una contraseña y enviar el formulario, un nuevo usuario debe ser creado en la base de datos y el usuario debe ser redireccionado al inicio de sesión luego de esto.
2. Inicio de Sesión: El usuario debe llenar su correo y contraseña y debe ser redirigido a un menú privado luego de que la autenticación sea exitosa.
3. Validación: Cualquier página considerada "privada" siempre debe estar validando que el usuario actual es válido, si no, la página debe redirigir al inicio de sesión.
4. Cierre de Sesión: Cualquier momento que el usuario presione el "cierre de sesión" en la barra de navegación (navbar) se debe redirigir a la ruta del inicio de sesión.

Al menos las siguientes páginas y componentes de React deben ser implementados en el proyecto:

1https://github.com/4GeeksAcademy/react-flask-hello

Más detalles sobre la autenticación:

Usualmente, un sistema de autenticación es implementado en 4 partes:

Registro de usuario

Al principio de cada aplicación no hay usuario o tokens, así que el primer paso que hace sentido es crear un registro de usuario.

1. El usuario navega a la ruta /signup.
2. La aplicación de React.js (probablemente usando la librería React Router) deberá detectar la ruta /signup y realizará emparejado con el correspondiente componente de página de React.js, esta página se encargará de representar el HTML del registro.
3. El usuario escoge y escribe un correo electrónico, una contraseña y hace clic en enviar.
4. La página de React.js está a la espera del evento onSubmit, este activa la función handleSubmit que obtiene el email y contraseña de la API del backend con Python y flask, probablemente usando una petición POST /token con el email y contraseña en el body payload.

Inicio de sesión

Esta parte del proceso ocurre solo cuando los nuevos tokens fueron generados.

1. El usuario aterriza en la ruta miaplicacion.com/login.
2. La aplicación de React.js (probablemente usando la librería React Router) deberá detectar la ruta /login y realizará un emparejado con el correspondiente componente de página de React.js, esta página se encargará de renderizar el formulario de inicio de sesión.
3. El usuario llena el formulario de inicio de sesión y lo envía.
4. La página está esperando a que se active el evento de envío del formulario, y finalmente se activa porque el usuario envía el formulario.
5. La página ahora recopila la información del nombre de usuario y contraseña para subir (POST) la data a la API.
6. La API valida que nombre de usuario y contraseña sean correctos y regresa un objeto token.
7. El front-end de la aplicación guarda el token en el sessionStorage.
8. El front-end de la aplicación redirecciona a la ruta /private.

Cierre de sesión

Este proceso ocurre cuando el usuario desea cerrar la sesión.

1. Normalmente, hay un botón para el cierre de sesión en algún lado de la aplicación.
2. El usuario presiona el botón y el controlador de eventos onClick es llamado.
3. El front-end de la aplicación elimina el token del sessionStorage.
4. El front-end de la aplicación redirige a la página de inicio (público).

Validación del Token

Cualquier usuario puede solo escribir /private para intentar visitar la página privada, por eso es que se necesita implementar una validación, para prevenir que usuarios anónimos vean el contenido de la página privada, y debemos redirigir al usuario a la ruta /login o a otra página pública. Así es como usualmente es el proceso:

1. El usuario escribe cualquier URL privada, por ejemplo: miaplicacion.com/private.
2. La aplicación de React.js (probablemente usando la librería React Router) detectará la ruta /private y realizará un emparejado con el correspondiente componente de página de React.js que se encargará de renderizar el HTML.
3. Antes de renderizar el HTML -y solo porque esta es una ruta privada- el componente debe verificar que el sessionStorage contiene un token autenticado, normalmente esto se haría en el useEffect porque se quiere que se haga tan pronto la aplicación cargue.
4. Si el sessionStorage 👎 no tiene el token, el usuario actual no está considerado como registrado y el componente debe redirigirlo a la vista del inicio de sesión.
5. Si el sessionStorage 👍 contiene el token, el actual usuario está registrado exitosamente y el resto de la vista del componente /private es cargado.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.