Cómo simular login y logout con React Router

Aprender a implementar un login simulado con React Router te permite completar el flujo de autenticación en tu proyecto: intentar acceder a una ruta privada, redirigir al login y devolver al usuario al lugar correcto tras iniciar sesión. Esta guía es ideal si ya tienes rutas protegidas y quieres darles vida sin construir una autenticación real.

La idea central es sencilla: no vamos a implementar autenticación real, sino simular el estado de sesión usando el navegador. El objetivo es que entiendas el fluxo de navegación, no montar un backend. Y aquí viene lo interesante: todo se apoya en el local storage y en un par de funciones bien organizadas.

¿Cómo funciona el flujo de rutas privadas y públicas?

Antes de tocar código, conviene ver el punto de partida. Si intentas ir a favoritos o al perfil, te redirige al login porque son rutas privadas. En cambio, la búsqueda y la página inicial permanecen libres.

Esto ya venía de la clase anterior [00:32], donde se dejaron listos los percursos protegidos. Lo que faltaba era una forma de cambiar el estado de autenticación, y ahí entran las funciones de login y logout.

¿Qué es una ruta privada en React Router? Es una sección que solo puede ver un usuario autenticado. Si no lo está, se le redirige automáticamente al login antes de mostrarle el contenido.

¿Cómo crear las funciones de login y logout con local storage?

Todo arranca en el archivo auth, dentro de utils, donde ya existía la función que verifica si el usuario está autenticado [01:20]. A esa base le sumamos dos funciones nuevas.

Lo primero es evitar repetir código. Se guarda la clave de almacenamiento en una constante llamada Platzi House User, y así todas las lecturas y escrituras usan ese mismo valor [01:57].

Las tres piezas quedan así:

• La función que verifica autenticación deja de tener el valor hardcoded y ahora lee desde la constante storage key.
• La función login guarda el item en el local storage con el valor true.
• La función logout accede al local storage y borra todo el contenido de Platzi House User, no solo el valor.

Con esas funciones listas, ya puedes controlar el estado de sesión desde cualquier parte del proyecto.

¿Qué es el local storage en el navegador? Es un espacio de almacenamiento del navegador donde guardas datos como pares clave-valor que persisten aunque cierres la pestaña. Aquí guardamos si el usuario inició sesión.

¿Cómo mostrar login o logout según el estado del usuario?

Ahora hay que darle vida al header para que no apunte siempre a lo mismo. La lógica es clara: un usuario autenticado no debe ver el botón de login, sino uno de logout [03:20].

Para lograrlo se hace una validación con is authenticated. Si el usuario está autenticado, se renderiza el botón de salir. Si no lo está, se sigue mostrando el nav link del login como hasta ahora.

Para que todo funcione en el header necesitas tres importaciones y elementos clave:

• Importar is authenticated y logout desde utils [04:05].
• Crear la función handle logout, que verifica y ejecuta el logout.
• Importar el hook use navigate de React Router para redirigir al usuario tras cerrar sesión.

Con el header ya conectado, desaparecen los errores de TypeScript y la interfaz empieza a responder al estado real de la sesión.

¿Cómo redirigir al usuario al lugar correcto tras el login?

El header ya tiene lógica, pero la página de login todavía no hace nada útil [05:30]. Aquí entra la parte más fina del flujo: recordar de dónde venía el usuario.

En la login page se importa use navigate y se suma use location. Este último permite localizar dónde está el usuario para decidir a dónde devolverlo [06:15].

El truco está en el state. Sirve para saber de dónde vino el usuario y a dónde enviarlo después:

• Si vienes de la página inicial y haces login, te reenvía a la página inicial.
• Si no existe ese estado previo, te manda por defecto al perfil.

Ese estado de localización es un tipo que corresponde a una string: una location string que recibe un from de tipo string [07:10]. Definirlo evita los errores del editor.

¿Para qué sirve use location en React Router? Sirve para leer información sobre la ruta actual, incluido el state, y así saber de dónde llegó el usuario para devolverlo a ese lugar después de iniciar sesión.

¿Por qué se genera un loop si el login apunta a una ruta privada?

Hay un detalle que rompe todo si no lo cuidas. El botón de entrada usaba handle login para redirigir al perfil, pero como el perfil es privado, el usuario se queda atrapado en la página y se genera una especie de loop [08:00].

La solución tiene dos pasos:

• Importar la función login de utils y ejecutarla como primera acción dentro de handle login.
• Sustituir el profile por el from, para que el usuario regrese al lugar conocido de donde vino o, en su defecto, al perfil.

Con ese cambio, handle login ya ejecuta la función real de login antes de redirigir, y el flujo deja de romperse.

¿Cómo verificar que el login y logout funcionan?

La prueba final es la más satisfactoria. Al intentar entrar a favoritos o perfil sin sesión, te bloquea. Pero al hacer clic en iniciar sesión, te redirige al perfil [09:20].

Revisando el local storage aparece la clave Platzi House User con valor true. Ese es el estado que confirma que la sesión quedó guardada. Y como el header ya detecta ese valor, deja de mostrar login y muestra salir.

Al hacer clic en salir, el contenido se borra del local storage y te lleva a la página inicial. Vuelves a favoritos, entras, y ahora sí ves el contenido; sales y regresas al inicio. Así queda completa la lógica de login y logout simulados.

En la próxima clase, el siguiente paso es cargar datos asociados a rutas usando loaders, otra funcionalidad que ofrece React Router. ¿Ya probaste este flujo en tu propio proyecto? Cuéntame en los comentarios cómo te fue.