# 🔧 Solución: Error "Unauthenticated" al Crear Usuarios

## 🚨 Problema Identificado

Al intentar crear un usuario en `/admin/users`, aparece el error:
```
❌ Unauthenticated.
```

## 🔍 Causa

El token de autenticación en `localStorage` **no está presente o expiró**. Esto ocurre cuando:

1. No has iniciado sesión correctamente
2. El token fue eliminado del navegador
3. El token expiró (por tiempo o cierre de sesión)
4. Estás en una ventana de incógnito diferente

## ✅ Solución (3 Pasos)

### **Paso 1: Cerrar Sesión Limpiamente**

Abre la consola del navegador (F12) y ejecuta:

```javascript
localStorage.clear();
```

### **Paso 2: Iniciar Sesión Nuevamente**

1. Ve a: `http://localhost:8001/login`
2. Ingresa credenciales válidas (por ejemplo):
   - **Email:** `admin@campaign.com`
   - **Password:** `password`
3. Click en **"Entrar"**
4. Deberías ser redirigido a `/admin/dashboard`

### **Paso 3: Verificar que el Token se Guardó**

Abre la consola del navegador (F12) y ejecuta:

```javascript
console.log('Token:', localStorage.getItem('auth_token'));
```

Deberías ver algo como:
```
Token: 1|kJxh3Y8fMzP9qW2bN5vL7tR6dC4sA1eF...
```

Si ves `null`, repite el **Paso 2**.

---

## 🎯 Ahora Sí: Crear Usuarios

1. Ve a: `http://localhost:8001/admin/users`
2. Click en **"Nuevo Usuario"**
3. Completa el formulario
4. Click en **"Guardar"**
5. ✅ Debería funcionar sin errores

---

## 🛡️ Mejoras Implementadas

He agregado las siguientes protecciones:

### 1. **Verificación Automática de Autenticación**
- Antes de cada llamada a la API, se verifica que exista el token
- Si no hay token, redirige automáticamente a `/login`

### 2. **Manejo de Tokens Expirados**
- Si el servidor responde `401 Unauthenticated`
- Se limpia el `localStorage` automáticamente
- Se redirige al login con mensaje claro

### 3. **Banner de Advertencia**
- Si intentas acceder sin token, verás un banner rojo:
  ```
  ⚠️ No has iniciado sesión
  Debes iniciar sesión para gestionar usuarios.
  [Iniciar Sesión]
  ```
- Después de 2 segundos, redirige automáticamente

### 4. **Validación en Todas las Operaciones**
- Cargar usuarios
- Crear usuario
- Cargar nombre de campaña
- Todas verifican autenticación primero

---

## 🔐 Credenciales de Prueba

### Usuarios Demo Disponibles:

1. **Admin/Candidato:**
   - Email: `admin@campaign.com`
   - Password: `password`
   - Redirige a: `/admin/dashboard`

2. **Coordinador:**
   - Email: `coord@campaign.com`
   - Password: `password`
   - Redirige a: `/dashboard`

3. **Voluntario:**
   - Email: `vol@campaign.com`
   - Password: `password`
   - Redirige a: `/volunteer/dashboard`

---

## 🧪 Probar el Flujo Completo

```bash
# 1. Limpiar localStorage (Consola del navegador F12)
localStorage.clear();

# 2. Ir al login
http://localhost:8001/login

# 3. Ingresar credenciales
Email: admin@campaign.com
Password: password

# 4. Verificar redirección a dashboard
http://localhost:8001/admin/dashboard

# 5. Ir a usuarios
http://localhost:8001/admin/users

# 6. Crear usuario
Click "Nuevo Usuario"
Nombre: Juan Pérez
Email: juan@test.com
Password: 123456
Rol: Voluntario
[Guardar]

# 7. ✅ Debería crear sin errores
```

---

## 📱 Debugging en Tiempo Real

Si sigues teniendo problemas, verifica en la **Consola del Navegador (F12)**:

### Al hacer login exitoso, deberías ver:
```javascript
// En Application > Local Storage > http://localhost:8001
auth_token: "1|abc123xyz..."
user: {"id":1,"name":"Admin User","email":"admin@campaign.com",...}
```

### Al crear usuario, deberías ver la petición:
```javascript
POST /api/admin/users
Headers: {
  Authorization: "Bearer 1|abc123xyz...",
  Content-Type: "application/json"
}
Body: {
  name: "Juan Pérez",
  email: "juan@test.com",
  password: "123456",
  role: "volunteer",
  is_active: true
}
```

### Respuesta exitosa:
```json
{
  "message": "Usuario creado exitosamente",
  "user": {
    "id": 5,
    "name": "Juan Pérez",
    "email": "juan@test.com",
    ...
  }
}
```

---

## ⚠️ Importante

- **NO uses ventanas de incógnito** para sesiones largas (el `localStorage` se borra)
- **Cierra sesión correctamente** usando el botón "Salir" en lugar de cerrar la pestaña
- Si cambias de navegador, debes volver a iniciar sesión
- Los tokens **no se comparten** entre pestañas de incógnito

---

## 🎉 Resumen

1. ✅ **Limpia localStorage:** `localStorage.clear()`
2. ✅ **Inicia sesión:** `/login` con `admin@campaign.com` / `password`
3. ✅ **Verifica token:** `localStorage.getItem('auth_token')` debe tener valor
4. ✅ **Crea usuarios:** `/admin/users` → Nuevo Usuario → Guardar

**¡Ahora debería funcionar perfectamente!** 🚀