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:

1. Evitar que el menú muestre enlaces como profile o logout cuando no hay sesión activa.
2. Redirigir automáticamente a /login si alguien intenta acceder a una ruta privada sin autenticarse.
3. 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.