Context

AuthContext.jsx

Contexto global de autenticación para la aplicación React

Función principal

Proporciona un contexto (AuthContext) que permite manejar de forma centralizada:

• El estado del usuario autenticado
• Las funciones de inicio y cierre de sesión
• La persistencia de sesión mediante localStorage
• La validación automática del token JWT al recargar la página

API expuesta desde el Contexto

Elemento	Tipo	Descripción
user	Object	Objeto del usuario autenticado o null si no hay sesión activa
login()	Function	Función para iniciar sesión con usuario y contraseña, retorna el role
logout()	Function	Función para cerrar sesión, limpia el estado y el almacenamiento local
isLoading	boolean	true mientras se verifica la sesión inicial (útil para proteger rutas)

Comportamiento detallado

• Persistencia de sesión (useEffect):
• Recupera user y token desde localStorage al iniciar la app.
• Usa jwt-decode para validar que el token no esté expirado.

• Si el token está expirado o es inválido, se borra la sesión automáticamente.

• Inicio de sesión (login):

• Llama al loginService(username, password).
• Decodifica el token JWT.
• Guarda la información del usuario y el token en localStorage:
  • user, token, username, role.
• Establece el usuario autenticado en el estado React.

• Retorna el role del usuario para navegación condicional.

• Cierre de sesión (logout):

• Elimina los datos del usuario tanto del estado como de localStorage.

Dependencias

• React: createContext, useEffect, useState
• Servicio: loginService desde AuthService.js
• Librería externa: jwt-decode

Ejemplo completo de uso

// LoginPage.jsx
import { useContext, useState } from 'react';
import { AuthContext } from '../context/AuthContext';

const LoginPage = () => {
  const { login, user, isLoading } = useContext(AuthContext);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const role = await login(username, password);
      console.log('Login exitoso como:', role);
    } catch (error) {
      console.error('Error al iniciar sesión:', error);
    }
  };

  if (isLoading) return <p>Cargando sesión...</p>;
  if (user) return <p>Bienvenido, {user.username}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Usuario" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Contraseña" />
      <button type="submit">Iniciar sesión</button>
    </form>
  );
};

---