Rutas privadas con fake auth en React

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0023:48

Rutas privadas con fake auth en React

Curso de React.js: Navegación con React Router

Clase 11 de 30

Clase 11 / 30

Recursos

Implementar autenticación y autorización en React Router DOM v6 te permite controlar qué rutas ve cada usuario según su estado de sesión y rol. Aquí aprendes a construir un flujo completo de fake authentication con Context API y hooks personalizados, ideal para desarrolladores que ya manejan rutas básicas y quieren proteger contenido privado.

Por qué necesitas un sistema de autenticación en React Router

No todo el contenido de una aplicación debe ser público. Hay páginas como el perfil de usuario que solo deberían mostrarse a personas autenticadas, y otras como el formulario de login que carecen de sentido cuando ya iniciaste sesión.

La autenticación verifica quién eres, mientras que la autorización define qué puedes hacer. Un editor de Platzi puede modificar la descripción de un curso; tú como estudiante no. Esa diferencia de roles se traduce en rutas visibles u ocultas dentro del menú.

¿Qué es fake authentication en React? Es una simulación del flujo de login sin backend real. Sirve para practicar la lógica de rutas privadas, redirects y manejo de sesión usando solo estado local y Context API.

Cómo crear las páginas de login y logout en React Router

Lo primero es separar las rutas en componentes independientes [02:15]. En lugar de renderizar el mismo componente en /login, /logout y /profile, creas archivos dedicados: LoginPage.js y LogoutPage.js.

La página de login contiene un formulario controlado con un input vinculado a un estado local mediante useState:

jsx const [username, setUsername] = React.useState('');

<input value={username} onChange={(event) => setUsername(event.target.value)} />

El botón de tipo submit dispara una función login en el evento onSubmit del formulario, que ejecuta event.preventDefault() para evitar la recarga de la página.

Cómo manejar el formulario de logout

La página de logout reutiliza la misma estructura, pero sin input. Solo necesitas un mensaje de confirmación tipo ¿segura de que quieres salir? y un botón que dispare la función de cierre de sesión.

Cómo construir un AuthProvider con React Context

El siguiente paso es centralizar la información del usuario para que toda la aplicación tenga acceso a ella [08:40]. Esto se logra con React Context y un archivo auth.js que exporta varios elementos:

Un AuthContext creado con React.createContext().
Un componente AuthProvider que envuelve la app y expone valores mediante la prop value.
Un custom hook useAuth que internamente llama a React.useContext(AuthContext).

La convención de nombrar el archivo en minúsculas indica que exporta múltiples elementos, no un solo componente.

jsx const AuthContext = React.createContext();

function AuthProvider({ children }) { const [user, setUser] = React.useState(null);

const login = ({ username }) => setUser({ username }); const logout = () => setUser(null);

const auth = { user, login, logout };

return ( <AuthContext.Provider value={auth}> {children} </AuthContext.Provider> ); }

function useAuth() { const auth = React.useContext(AuthContext); return auth; }

¿Por qué crear un hook useAuth en vez de usar useContext directamente? Para encapsular la lógica y evitar importar useContext y AuthContext en cada componente. Solo importas useAuth y obtienes el objeto de autenticación listo para usar.

Dónde colocar el AuthProvider respecto al HashRouter

Una decisión clave de arquitectura: el AuthProvider debe ir dentro del HashRouter, no fuera [14:20]. La razón es que el provider necesita acceder a métodos de navegación como useNavigate para hacer redirects tras un login exitoso.

La regla general es simple: si el componente A necesita usar hooks o métodos del componente B, entonces A debe estar anidado dentro de B.

Cómo conectar login y logout con redirección automática

Con el contexto en su lugar, los formularios dejan de hacer console.log y llaman a los métodos del objeto auth. En LoginPage extraes auth con useAuth() y disparas auth.login(username) al enviar el formulario.

Para mejorar la experiencia, combinas el login con useNavigate de React Router:

jsx const auth = useAuth(); const navigate = useNavigate();

const login = (event) => { event.preventDefault(); auth.login({ username }); navigate('/profile'); };

El flujo de logout funciona igual: llama a auth.logout() y redirige al home con navigate('/').

Cómo mostrar datos del usuario en la página de perfil

En ProfilePage también consumes el hook useAuth para acceder a auth.user.username y mostrar un saludo personalizado. Pero hay un problema: si entras a /profile sin haber hecho login, auth.user es null y la app crashea al intentar leer username de un valor nulo.

Esto revela dos necesidades pendientes:

Evitar que el menú muestre enlaces como profile o logout cuando no hay sesión activa.
Redirigir automáticamente a /login si alguien intenta acceder a una ruta privada sin autenticarse.
Ocultar la página de login a quienes ya iniciaron sesión.

Esa lógica de rutas privadas y públicas condicionadas es el siguiente paso natural del flujo y abre la puerta a implementar autorización por roles.

¿Cómo organizarías tú los enlaces del menú según el estado de autenticación? Cuéntame en los comentarios.

Juan Diego Mejia Maestre

Hace 10 meses

🔐 Autenticación y Autorización en React Router DOM

📌 Conceptos Fundamentales

🔑 Autenticación vs Autorización

ConceptoDefiniciónEjemplo

🔐 Autenticación

Verificar quién es el usuario

🛡️ Autorización

Verificar qué puede hacer el usuario

Admin vs Usuario normal

🏗️ Arquitectura del Sistema

┌─────────────────┐
│   AuthContext   │ ← Estado global de autenticación
└────────┬────────┘
         │
    ┌────┴────┐
    │   App   │
    └────┬────┘
         │
    ┌────┴────────────────┐
    │                     │
┌───┴────┐          ┌────┴─────┐
│ Rutas  │          │  Rutas   │
│Públicas│          │ Privadas │
└────────┘          └──────────┘

🎯 Implementación Paso a Paso

1️⃣ Crear el Contexto de Autenticación

javascript

import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (username) => {
    setUser({ username });
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// Hook personalizado para acceder al contexto
export const useAuth = () => useContext(AuthContext);

📝 Datos clave:

✅ Usa createContext para estado global
✅ useState(null) → usuario no autenticado
✅ Hook personalizado useAuth() para acceso fácil

2️⃣ Componente de Login

javascript

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './auth';

function LoginPage() {
  const [username, setUsername] = useState('');
  const auth = useAuth();
  const navigate = useNavigate();

  const handleLogin = (event) => {
    event.preventDefault();
    
    if (username.trim()) {
      auth.login(username);
      navigate('/profile'); // Redirige después del login
    }
  };

  return (
    <div>
      <h2>🔐 Iniciar Sesión</h2>
      <form onSubmit={handleLogin}>
        <label>Usuario:</label>
        <input 
          type="text" 
          value={username} 
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Escribe tu nombre"
        />
        <button type="submit">Entrar</button>
      </form>
    </div>
  );
}

3️⃣ Componente de Ruta Protegida

javascript

import { Navigate } from 'react-router-dom';
import { useAuth } from './auth';

function ProtectedRoute({ children }) {
  const auth = useAuth();

  // Si no hay usuario, redirige al login
  if (!auth.user) {
    return <Navigate to="/login" replace />;
  }

  // Si está autenticado, muestra el contenido
  return children;
}

export default ProtectedRoute;

🎯 Uso:

javascript

<Route 
  path="/profile" 
  element={
    <ProtectedRoute>
      <ProfilePage />
    </ProtectedRoute>
  } 
/>

4️⃣ Estructura de Rutas Completa

javascript

import { AuthProvider } from './auth';
import { HashRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <AuthProvider>
      <HashRouter>
        <Navigation />
        <Routes>
          {/* Rutas públicas */}
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<LoginPage />} />
          
          {/* Rutas protegidas */}
          <Route 
            path="/profile" 
            element={
              <ProtectedRoute>
                <ProfilePage />
              </ProtectedRoute>
            } 
          />
          <Route 
            path="/dashboard" 
            element={
              <ProtectedRoute>
                <DashboardPage />
              </ProtectedRoute>
            } 
          />
        </Routes>
      </HashRouter>
    </AuthProvider>
  );
}

5️⃣ Navegación Dinámica

javascript

function Navigation() {
  const auth = useAuth();

  return (
    <nav>
      <Link to="/">🏠 Inicio</Link>
      
      {/* Mostrar según estado de autenticación */}
      {!auth.user ? (
        <Link to="/login">🔐 Login</Link>
      ) : (
        <>
          <Link to="/profile">👤 Perfil</Link>
          <Link to="/dashboard">📊 Dashboard</Link>
          <button onClick={auth.logout}>🚪 Logout</button>
        </>
      )}
    </nav>
  );
}

🎮 Ejemplo Interactivo Completo

Flujo de Usuario

1️⃣ Usuario visita /profile sin login
   ↓
2️⃣ ProtectedRoute detecta: auth.user === null
   ↓
3️⃣ Redirige automáticamente a /login
   ↓
4️⃣ Usuario ingresa credenciales
   ↓
5️⃣ auth.login(username) actualiza el contexto
   ↓
6️⃣ navigate('/profile') redirige al perfil
   ↓
7️⃣ ProtectedRoute detecta: auth.user !== null
   ↓
8️⃣ ✅ Muestra el contenido protegido

📊 Casos de Uso Avanzados

🎭 Autorización por Roles

javascript

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (username, role) => {
    setUser({ username, role }); // Agrega el rol
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// Componente para rutas de admin
function AdminRoute({ children }) {
  const auth = useAuth();

  if (!auth.user) {
    return <Navigate to="/login" />;
  }

  if (auth.user.role !== 'admin') {
    return <Navigate to="/unauthorized" />; // Página de acceso denegado
  }

  return children;
}

💾 Persistencia con LocalStorage

javascript

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(() => {
    // Recuperar usuario al iniciar
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
  });

  const login = (username) => {
    const userData = { username };
    setUser(userData);
    localStorage.setItem('user', JSON.stringify(userData));
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('user');
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

✨ Mejores Prácticas

✅ Hacer❌ Evitar

Usar Context API para estado global

Pasar props manualmente por todos los componentes

Validar autenticación en cada ruta protegida

Confiar solo en ocultar enlaces del menú

Persistir sesión en localStorage/cookies

Perder sesión al recargar la página

Redirigir con <Navigate replace />

Usar window.location.href

Crear componentes reutilizables (ProtectedRoute)

Duplicar lógica de protección en cada página

🔑 Datos Técnicos Clave

Context API: createContext() + useContext()
React Router v6: Usa <Navigate> en lugar de <Redirect>
Estado inicial: useState(null) para usuario no autenticado
Persistencia: LocalStorage para mantener sesión
Seguridad: ⚠️ Esta es solo autenticación frontend, siempre validar en el backend

Comentarios (24)24 comentarios

Andrés Esteban Rodríguez Jiménez

Hace 4 años

Raycris Maldonado

abigail hilario

Hace 3 años

Luis Angel Olivárez Estrada

WALT 🤖

Sebastián Andrés Sanhueza Tapia

Hace 2 años

Josue Tapia Linarez

Donovan RM

Alexander Flores Rayme

JOSE RANGEL

Jhon Jairo Gomez Calderon

Santiago Andres Alvarez Cuadros

Max Andy Diaz Neyra

Arnold Laínez

Simón Alejandro Azócar C

Juan Castro

Profesor

Jose Ever Muñoz Muñoz

Jose Tellez

Oscar Enrique Machado Quintana

Javier Damiani

Harold Zurita Simon

Charles Castillo Rosas

Nicolas Forero Quevedo

Sebastian Carballo

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Rutas privadas con fake auth en React