# Guía de Integración: Angular + Laravel Cookie Authentication (Sanctum SPA)

Esta guía detalla los pasos para conectar tu aplicación frontend de **Angular** con el backend ERP utilizando autenticación por cookies cifradas de sesión (`laravel_session`) y protección contra CSRF (`XSRF-TOKEN`).

---

## Paso 1: Configurar el `HttpClient` de Angular

Debes indicarle a Angular que lea la cookie CSRF que envía Laravel (`XSRF-TOKEN`) y la devuelva automáticamente en la cabecera `X-XSRF-TOKEN` en cada petición mutadora (POST, PUT, DELETE).

Configura esto en tu archivo global `app.config.ts` (o `main.ts` en versiones clásicas):

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withXsrfConfiguration } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      // Angular interceptará la cookie 'XSRF-TOKEN' que le envíe Laravel
      // y la agregará automáticamente en la cabecera 'X-XSRF-TOKEN' en cada POST/PUT/DELETE
      withXsrfConfiguration({
        cookieName: 'XSRF-TOKEN',
        headerName: 'X-XSRF-TOKEN',
      })
    ),
  ]
};
```

---

## Paso 2: Crear el Interceptor de Credenciales y Tenant Key

El navegador requiere la opción `withCredentials: true` para guardar y enviar cookies en peticiones CORS hacia el backend. También debemos mandar la cabecera del Tenant activo.

Crea un HTTP Interceptor funcional en Angular:

```typescript
// credentials.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http';

export const credentialsInterceptor: HttpInterceptorFn = (req, next) => {
  // Aquí puedes obtener el tenant dinámicamente del subdominio de la URL actual
  const tenantKey = 'arsistema'; 

  const clonedRequest = req.clone({
    withCredentials: true, // Obligatorio para enviar laravel_session y XSRF-TOKEN
    setHeaders: {
      'X-Tenant-Key': tenantKey
    }
  });

  return next(clonedRequest);
};
```

Registra el interceptor en tu `app.config.ts`:

```typescript
import { provideHttpClient, withXsrfConfiguration, withInterceptors } from '@angular/common/http';
import { credentialsInterceptor } from './credentials.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withXsrfConfiguration({
        cookieName: 'XSRF-TOKEN',
        headerName: 'X-XSRF-TOKEN',
      }),
      // Registramos el interceptor de credenciales
      withInterceptors([credentialsInterceptor])
    )
  ]
};
```

---

## Paso 3: Crear el Servicio de Autenticación (`AuthService`)

El flujo de inicio de sesión requiere **primero** hacer una petición a Sanctum para inicializar las cookies de seguridad y **luego** enviar las credenciales.

```typescript
// auth.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, switchMap } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private http = inject(HttpClient);
  private apiUrl = 'http://arsistema.localhost:8000'; // URL de tu backend local

  /**
   * 1. Inicializa las cookies CSRF desde Sanctum
   */
  private initializeCsrf(): Observable<void> {
    return this.http.get<void>(`${this.apiUrl}/sanctum/csrf-cookie`);
  }

  /**
   * 2. Inicia sesión
   */
  login(credentials: { email: string; password: string }): Observable<any> {
    // Obtenemos el token CSRF para guardar la cookie y luego enviamos las credenciales
    return this.initializeCsrf().pipe(
      switchMap(() => {
        return this.http.post<any>(`${this.apiUrl}/api/login`, credentials);
      })
    );
  }

  /**
   * 3. Obtener el perfil y roles del usuario autenticado
   */
  getProfile(): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/api/me`);
  }

  /**
   * 4. Cerrar sesión
   */
  logout(): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/api/logout`, {});
  }
}
```

---

## Paso 4: Implementación en tu Componente de Login

Consume el servicio desde tu componente de formulario de login:

```typescript
// login.component.ts
import { Component, inject } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  private authService = inject(AuthService);
  private router = inject(Router);

  onLogin() {
    const creds = { 
      email: 'root@alpha.com', // O el usuario que desees probar del seeder
      password: 'password123' 
    };

    this.authService.login(creds).subscribe({
      next: (response) => {
        console.log('Login exitoso:', response.user);
        console.log('Roles del usuario:', response.roles);
        // Redirigir al dashboard
        this.router.navigate(['/dashboard']);
      },
      error: (err) => {
        console.error('Credenciales incorrectas o error de red:', err);
      }
    });
  }
}
```

---

## Flujo Interno en el Navegador

1. Al invocar `/sanctum/csrf-cookie`, el backend responde agregando la cookie `XSRF-TOKEN` en el navegador.
2. Angular intercepta automáticamente la cookie y agrega la cabecera `X-XSRF-TOKEN` a la petición del POST en `/api/login`.
3. Laravel valida el token y autoriza el `/api/login`, generando y guardando la cookie de sesión `laravel_session` (encriptada e HttpOnly).
4. Todas las llamadas posteriores llevarán adjunto automáticamente este estado de sesión sin necesidad de almacenar tokens JWT manualmente en el local storage, protegiendo tu aplicación de ataques XSS.