# Frontend Integration Guide

## httpOnly Cookies - Actualización Requerida

### ANTES (localStorage - INSEGURO)

```javascript
// ❌ NO HACER ESTO
const response = await fetch('/api/auth/login', {...});
const data = await response.json();
localStorage.setItem('access_token', data.access_token);  // VULNERABLE A XSS
```

### AHORA (httpOnly Cookies - SEGURO)

```javascript
// ✅ HACER ESTO
const response = await fetch('https://auth-api.galappxy.com/v1/auth/login', {
    method: 'POST',
    credentials: 'include',  // ⭐ CRÍTICO - Envía/recibe cookies
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        payload: {
            user: 'user@example.com',
            password: 'password123'
        }
    })
});

const data = await response.json();

// Las cookies se establecen automáticamente
// NO necesitas hacer nada con los tokens
// NO necesitas localStorage.setItem()
```

### Request Autenticado

```javascript
// Todos los requests subsecuentes
fetch('https://api.galappxy.com/v1/users/me', {
    credentials: 'include'  // ⭐ Envía cookies automáticamente
})
.then(res => res.json())
.then(data => console.log(data));
```

### Refresh Token

```javascript
// El frontend puede llamar esto periódicamente o cuando detecte 401
async function refreshAccessToken() {
    const response = await fetch('https://auth-api.galappxy.com/v1/auth/refresh', {
        method: 'POST',
        credentials: 'include'  // Envía cookie galappxy_rt
    });
    
    if (response.ok) {
        // Cookie galappxy_at se actualizó automáticamente
        return true;
    }
    
    // Sesión expirada, redirigir a login
    window.location.href = '/login';
    return false;
}
```

### Logout

```javascript
async function logout() {
    await fetch('https://auth-api.galappxy.com/v1/auth/logout', {
        method: 'POST',
        credentials: 'include'
    });
    
    // Cookies invalidadas automáticamente
    window.location.href = '/login';
}
```

## Theme Manager

### Inicializar Tema

```javascript
// Después del login success
const loginData = response.data;

// Opción 1: Cargar CSS desde archivo
await window.themeManager.init(loginData.id_company);

// Opción 2: Aplicar config inline (más rápido)
await window.themeManager.init(loginData.id_company, loginData.theme_config);
```

### Toggle Dark Mode

```javascript
// Agregar botón en UI
<button onclick="window.themeManager.toggleTheme()">
    Toggle Dark Mode
</button>
```

## CORS Configuration

Asegúrate de que tu dominio frontend esté en la lista de allowed origins en `.env_auth`:

```bash
CORS_ALLOWED_ORIGINS="https://app.galappxy.com,http://localhost:3000"
```

## Checklist

- [ ] Agregar `credentials: 'include'` en TODOS los fetch()
- [ ] Remover localStorage.setItem('access_token')
- [ ] Remover localStorage.setItem('refresh_token')
- [ ] Incluir theme-manager.js en HTML
- [ ] Configurar CORS_ALLOWED_ORIGINS en backend
- [ ] Testing en Chrome DevTools (Application → Cookies)