Cómo proteger rutas según sesión en React

Proteger rutas en React es una práctica clave cuando construyes aplicaciones que dependen del estado de autenticación del usuario. En Shoppy, esta lógica define si alguien puede ver el home, navegar entre secciones o si lo redirigimos al sign in. Aquí te muestro cómo lo resolvimos paso a paso.

¿Qué significa asegurar rutas en una aplicación React?

Asegurar rutas significa controlar el acceso a las distintas pantallas según la información del usuario: si tiene cuenta, si está autenticado y si su sesión está activa. La idea es simple: si no estás signed in, no entras.

¿Qué es el conditional rendering? Es una técnica de React que te permite mostrar u ocultar elementos según una condición, como el estado de sesión del usuario. Si no está logueado, renderizas el sign in; si lo está, renderizas el home.

Para lograrlo en Shoppy, trabajamos con dos fuentes de información combinadas: el local storage y el estado global vía contexto. Esa combinación nos dice si el usuario tiene cuenta y si está activo en la sesión actual.

¿Cómo verifico el estado del usuario en el navbar?

En el componente navbar recuperamos los datos del local storage y del contexto global. Con esa información hacemos conditional rendering para decidir qué ítems mostrar.

Aquí hay dos validaciones distintas que conviene tener claras:

• Si el usuario tiene cuenta creada.
• Si el usuario está signed in en este momento.

Son cosas diferentes. Alguien puede tener cuenta pero estar signed out, y el navbar debe reflejarlo. Por eso el orden de las condiciones cambió respecto a la versión anterior, así que vale la pena revisar el pull request siete para ver el ajuste exacto.

¿Cómo redirijo al usuario al sign in cuando no tiene sesión activa?

La segunda parte del reto es que, si el usuario está signed out y hace clic en el logo de Shoppy, lo mandemos directo al sign in en lugar de al home.

La lógica es directa: cuando el usuario hace clic en el logo, evaluamos su estado. Si está fuera, lo redirigimos al login. Si está dentro, lo llevamos al home. Ese pequeño detalle mejora la experiencia y evita que vea pantallas que no debería.

¿Cómo modifico las rutas para bloquear el acceso?

En el archivo principal de la app, donde están definidas todas las rutas, recuperamos el contexto y los datos del local storage. Luego, en cada ruta evaluamos si el usuario está logueado.

Por ejemplo, en la ruta / que corresponde al home:

• Si el usuario está signed in, mostramos el contenido normal.
• Si está signed out, lo redirigimos automáticamente al sign in.
• Si no tiene cuenta, también lo enviamos al sign in sin excepción.

Esto se hace combinando el componente de navegación con una redirección condicional. El mensaje implícito al usuario es: si no tienes cuenta, no entras al home por nada del mundo.

¿Por qué necesito tanto local storage como contexto global? El local storage persiste los datos entre sesiones del navegador, mientras que el contexto global mantiene el estado reactivo dentro de la app. Juntos te dan persistencia y reactividad.

¿Cómo componentizo el shopping cart para mejorar la estructura?

Una mejora adicional, registrada en el pull request ocho, es sacar el carrito de compras del navbar y convertirlo en su propio componente. En la versión inicial estaba hardcoded dentro del navbar, lo cual funciona pero no escala bien.

Los pasos para componentizarlo son:

1. Crear el componente ShoppyCart con la misma lógica que tenía el carrito dentro del navbar.
2. Exportarlo desde su archivo.
3. Importarlo y renderizarlo en el navbar.

Visualmente no notas la diferencia al recargar la app en la rama Lab Challenge Eight, pero internamente la estructura queda mucho más limpia. Si mañana el carrito cambia su comportamiento, lo modificas en un solo lugar sin tocar el navbar.

¿Por qué este detalle impresiona en una entrevista técnica?

Los entrevistadores valoran cuando separas responsabilidades en componentes pequeños y reutilizables. Mostrar que pasaste de tener todo en un solo archivo a una arquitectura modular comunica que entiendes principios de mantenibilidad y escalabilidad.

Después de probar el flujo, el resultado es claro: haces sign out, intentas navegar a cualquier ruta y la app te bloquea enviándote al sign in. Inicias sesión y todas las rutas se desbloquean al instante. Falta solo una pieza para cerrar la prueba técnica: la sección my account, que veremos en la siguiente lección.

¿Has implementado rutas protegidas en otros proyectos? Cuéntame qué estrategia usaste en los comentarios.