valtech-components 2.0.794 → 2.0.795

package/src/lib/services/auth/oauth.service.ts

@@ -0,0 +1,352 @@
+import { Injectable, Inject, NgZone } from '@angular/core';
+import { Observable, Subject, throwError } from 'rxjs';
+import { VALTECH_AUTH_CONFIG } from './config';
+import {
+  ValtechAuthConfig,
+  OAuthProvider,
+  OAuthResult,
+  OAuthError,
+  OAuthCallbackData,
+  LinkedProvider,
+  HasPasswordResponse,
+} from './types';
+import { HttpClient } from '@angular/common/http';
+import { catchError } from 'rxjs/operators';
+
+/**
+ * Servicio de OAuth para login social.
+ *
+ * Implementa flujo OAuth server-side con popup:
+ * 1. Frontend abre popup hacia backend
+ * 2. Backend redirige a provider (Google, Apple, Microsoft)
+ * 3. Usuario autoriza
+ * 4. Backend intercambia code, genera JWT, redirige con tokens
+ * 5. Popup envía tokens a ventana padre via postMessage
+ *
+ * @example
+ * ```typescript
+ * import { OAuthService, AuthService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class LoginComponent {
+ *   private oauth = inject(OAuthService);
+ *   private auth = inject(AuthService);
+ *
+ *   async loginWithGoogle() {
+ *     this.oauth.startFlow('google').subscribe({
+ *       next: (result) => {
+ *         // Tokens recibidos, guardar en auth state
+ *         this.auth.handleOAuthSuccess(result);
+ *         this.router.navigate(['/']);
+ *       },
+ *       error: (error) => {
+ *         console.error('OAuth failed:', error);
+ *       }
+ *     });
+ *   }
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class OAuthService {
+  private popup: Window | null = null;
+  private messageHandler: ((event: MessageEvent) => void) | null = null;
+  private checkClosedInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor(
+    @Inject(VALTECH_AUTH_CONFIG) private config: ValtechAuthConfig,
+    private http: HttpClient,
+    private ngZone: NgZone
+  ) {}
+
+  /**
+   * Inicia flujo OAuth en popup.
+   * Retorna Observable que emite cuando el usuario completa el flujo.
+   *
+   * @param provider - Proveedor OAuth ('google', 'apple', 'microsoft')
+   * @returns Observable que emite OAuthResult o error
+   */
+  startFlow(provider: OAuthProvider): Observable<OAuthResult> {
+    return new Observable(observer => {
+      // Construir URL de inicio
+      const redirectUri = `${window.location.origin}/auth/oauth/callback`;
+      const startUrl = `${this.config.apiUrl}/v2/auth/oauth/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
+
+      // Abrir popup centrado
+      const width = 500;
+      const height = 600;
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
+      const features = `width=${width},height=${height},left=${left},top=${top},popup=yes`;
+
+      this.popup = window.open(startUrl, 'oauth', features);
+
+      if (!this.popup) {
+        observer.error({
+          code: 'POPUP_BLOCKED',
+          message: 'El navegador bloqueó la ventana emergente. Por favor, permite popups para este sitio.',
+        } as OAuthError);
+        return () => {};
+      }
+
+      // Escuchar mensajes del popup
+      this.messageHandler = (event: MessageEvent) => {
+        // Validar origen
+        if (event.origin !== window.location.origin) {
+          return;
+        }
+
+        // Validar tipo de mensaje
+        const data = event.data as OAuthCallbackData;
+        if (data?.type !== 'oauth-callback') {
+          return;
+        }
+
+        // Limpiar
+        this.cleanup();
+
+        // Emitir resultado dentro de NgZone para trigger change detection
+        this.ngZone.run(() => {
+          if (data.error) {
+            observer.error(data.error);
+          } else if (data.tokens) {
+            observer.next(data.tokens);
+            observer.complete();
+          } else {
+            observer.error({
+              code: 'INVALID_RESPONSE',
+              message: 'Respuesta inválida del servidor de autenticación',
+            } as OAuthError);
+          }
+        });
+      };
+
+      window.addEventListener('message', this.messageHandler);
+
+      // Polling de localStorage (COOP workaround - no podemos detectar popup.closed)
+      // También verifica si el popup se cerró manualmente
+      this.checkClosedInterval = setInterval(() => {
+        // Primero verificar localStorage (funciona aunque COOP bloquee todo)
+        const storedData = this.checkLocalStorageFallback();
+        if (storedData) {
+          this.cleanup();
+          this.ngZone.run(() => {
+            if (storedData.error) {
+              observer.error(storedData.error);
+            } else if (storedData.tokens) {
+              console.log('[OAuthService] Retrieved tokens from localStorage fallback');
+              observer.next(storedData.tokens);
+              observer.complete();
+            } else {
+              observer.error({
+                code: 'INVALID_RESPONSE',
+                message: 'Respuesta inválida del servidor de autenticación',
+              } as OAuthError);
+            }
+          });
+          return;
+        }
+
+        // Intentar verificar si popup se cerró (puede fallar por COOP)
+        try {
+          if (this.popup?.closed) {
+            this.cleanup();
+            this.ngZone.run(() => {
+              observer.error({
+                code: 'POPUP_CLOSED',
+                message: 'Se cerró la ventana de autenticación',
+              } as OAuthError);
+            });
+          }
+        } catch {
+          // COOP bloquea acceso a popup.closed - ignorar y seguir con polling
+        }
+      }, 300);
+
+      // Cleanup cuando el observable se destruye
+      return () => this.cleanup();
+    });
+  }
+
+  /**
+   * Inicia flujo de linking para vincular un proveedor adicional.
+   * Requiere que el usuario esté autenticado.
+   *
+   * @param provider - Proveedor OAuth a vincular
+   * @returns Observable que emite cuando se completa el linking
+   */
+  startLinkFlow(provider: OAuthProvider): Observable<OAuthResult> {
+    return new Observable(observer => {
+      const redirectUri = `${window.location.origin}/auth/oauth/callback`;
+      const startUrl = `${this.config.apiUrl}/v2/auth/oauth/link/${provider}/start?redirect_uri=${encodeURIComponent(redirectUri)}`;
+
+      const width = 500;
+      const height = 600;
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
+      const features = `width=${width},height=${height},left=${left},top=${top},popup=yes`;
+
+      this.popup = window.open(startUrl, 'oauth-link', features);
+
+      if (!this.popup) {
+        observer.error({
+          code: 'POPUP_BLOCKED',
+          message: 'El navegador bloqueó la ventana emergente',
+        } as OAuthError);
+        return () => {}; // cleanup function
+      }
+
+      this.messageHandler = (event: MessageEvent) => {
+        if (event.origin !== window.location.origin) return;
+
+        const data = event.data as OAuthCallbackData;
+        if (data?.type !== 'oauth-callback') return;
+
+        this.cleanup();
+
+        this.ngZone.run(() => {
+          if (data.error) {
+            observer.error(data.error);
+          } else {
+            observer.next(data.tokens || {} as OAuthResult);
+            observer.complete();
+          }
+        });
+      };
+
+      window.addEventListener('message', this.messageHandler);
+
+      this.checkClosedInterval = setInterval(() => {
+        if (this.popup?.closed) {
+          this.cleanup();
+          this.ngZone.run(() => {
+            observer.error({
+              code: 'POPUP_CLOSED',
+              message: 'Se cerró la ventana de autenticación',
+            } as OAuthError);
+          });
+        }
+      }, 500);
+
+      return () => this.cleanup();
+    });
+  }
+
+  /**
+   * Obtiene los proveedores OAuth vinculados al usuario.
+   */
+  getLinkedProviders(): Observable<LinkedProvider[]> {
+    return this.http
+      .get<{ providers: LinkedProvider[] }>(`${this.config.apiUrl}/v2/auth/oauth/providers`)
+      .pipe(
+        catchError(error => throwError(() => ({
+          code: error.error?.code || 'FETCH_ERROR',
+          message: error.error?.message || 'Error al obtener proveedores vinculados',
+        } as OAuthError)))
+      ) as unknown as Observable<LinkedProvider[]>;
+  }
+
+  /**
+   * Desvincula un proveedor OAuth.
+   */
+  unlinkProvider(provider: OAuthProvider): Observable<{ success: boolean }> {
+    return this.http
+      .post<{ success: boolean }>(`${this.config.apiUrl}/v2/auth/oauth/unlink`, { provider })
+      .pipe(
+        catchError(error => throwError(() => ({
+          code: error.error?.code || 'UNLINK_ERROR',
+          message: error.error?.message || 'Error al desvincular proveedor',
+        } as OAuthError)))
+      );
+  }
+
+  /**
+   * Establece contraseña para usuarios que solo tienen OAuth.
+   */
+  setPassword(password: string): Observable<{ success: boolean }> {
+    return this.http
+      .post<{ success: boolean }>(`${this.config.apiUrl}/v2/auth/oauth/set-password`, { password })
+      .pipe(
+        catchError(error => throwError(() => ({
+          code: error.error?.code || 'SET_PASSWORD_ERROR',
+          message: error.error?.message || 'Error al establecer contraseña',
+        } as OAuthError)))
+      );
+  }
+
+  /**
+   * Verifica si el usuario tiene contraseña establecida.
+   */
+  hasPassword(): Observable<HasPasswordResponse> {
+    return this.http
+      .get<HasPasswordResponse>(`${this.config.apiUrl}/v2/auth/oauth/has-password`)
+      .pipe(
+        catchError(error => throwError(() => ({
+          code: error.error?.code || 'CHECK_PASSWORD_ERROR',
+          message: error.error?.message || 'Error al verificar contraseña',
+        } as OAuthError)))
+      );
+  }
+
+  /**
+   * Revisa localStorage por datos de callback OAuth (fallback para COOP).
+   * Solo acepta datos recientes (últimos 30 segundos).
+   */
+  private checkLocalStorageFallback(): OAuthCallbackData | null {
+    try {
+      const timestamp = localStorage.getItem('oauth_callback_timestamp');
+      const dataStr = localStorage.getItem('oauth_callback_data');
+
+      if (!timestamp || !dataStr) {
+        return null;
+      }
+
+      // Solo aceptar datos de los últimos 30 segundos
+      const age = Date.now() - parseInt(timestamp, 10);
+      if (age > 30000) {
+        console.log('[OAuthService] localStorage data too old, ignoring');
+        this.clearLocalStorageFallback();
+        return null;
+      }
+
+      const data = JSON.parse(dataStr) as OAuthCallbackData;
+      this.clearLocalStorageFallback();
+      return data;
+    } catch (e) {
+      console.warn('[OAuthService] Error reading localStorage fallback:', e);
+      return null;
+    }
+  }
+
+  /**
+   * Limpia datos de fallback de localStorage.
+   */
+  private clearLocalStorageFallback(): void {
+    try {
+      localStorage.removeItem('oauth_callback_data');
+      localStorage.removeItem('oauth_callback_timestamp');
+    } catch {
+      // Ignorar errores de limpieza
+    }
+  }
+
+  /**
+   * Limpia recursos del popup.
+   */
+  private cleanup(): void {
+    if (this.messageHandler) {
+      window.removeEventListener('message', this.messageHandler);
+      this.messageHandler = null;
+    }
+
+    if (this.checkClosedInterval) {
+      clearInterval(this.checkClosedInterval);
+      this.checkClosedInterval = null;
+    }
+
+    if (this.popup && !this.popup.closed) {
+      this.popup.close();
+    }
+    this.popup = null;
+  }
+}

package/src/lib/services/auth/org-switch.service.ts

@@ -0,0 +1,165 @@
+import { Injectable, signal } from '@angular/core';
+import { firstValueFrom, Observable, Subject } from 'rxjs';
+
+import { AuthService } from './auth.service';
+
+/**
+ * Event emitted when the active organization changes.
+ */
+export interface OrgChangedEvent {
+  /** Org the user was on before the switch. May be empty on first sign-in. */
+  previousOrg: string;
+  /** Org the user just switched to. */
+  newOrg: string;
+}
+
+/**
+ * Options for `OrgSwitchService.switchTo`.
+ */
+export interface SwitchOrgOptions {
+  /**
+   * If `true`, after the switch succeeds the page is fully reloaded via
+   * `window.location.reload()`. Useful for apps with significant in-memory
+   * state tied to the previous org that's hard to invalidate piece by piece.
+   *
+   * Trade-off: reload loses all in-memory state (forms, scroll position).
+   * Default: `false` — relies on `orgChanged$` and `auth.user()` signal
+   * propagation for components to react.
+   */
+  reload?: boolean;
+}
+
+/**
+ * OrgSwitchService — orchestrates active organization changes across the app.
+ *
+ * Built on top of `AuthService.switchOrg`, which already:
+ * - Hits `POST /v2/auth/switch-org` and receives a new Firebase custom token.
+ * - Re-authenticates Firebase Auth with the new token (RBAC claims update).
+ * - Broadcasts `ORG_SWITCH` to other tabs via `AuthSyncService` (multi-tab sync).
+ *
+ * What this service adds on top:
+ * - A `switching` signal so the UI can show a loading indicator (1-2s switch).
+ * - An `orgChanged$` Observable that components subscribe to in order to
+ *   invalidate their org-scoped caches (e.g. drop old query results, reset
+ *   page state) without a full page reload.
+ * - Optional `reload: true` for apps where invalidating in-memory state piece
+ *   by piece is impractical.
+ *
+ * **What this service does NOT do automatically:**
+ *
+ * 1. **Teardown Firestore listeners.** Listeners are owned by their subscribing
+ *    components (typically via `takeUntilDestroyed` or async pipe). When the
+ *    component re-renders or unsubscribes, the listener disposes. If a
+ *    component does NOT unsubscribe on org change, its listener will keep
+ *    pointing at the previous org's path and may start failing rules. The fix
+ *    is component-level: subscribe to `orgChanged$` and reset state, or use
+ *    the `reload: true` option.
+ *
+ * 2. **Re-instantiate routed components.** Angular keeps mounted components
+ *    alive across navigations. If you need fresh state, either subscribe to
+ *    `orgChanged$` in the component, or use `reload: true`.
+ *
+ * @example Basic switch with loading state
+ * ```typescript
+ * private orgSwitch = inject(OrgSwitchService);
+ *
+ * async onSwitchOrg(orgId: string) {
+ *   await this.orgSwitch.switchTo(orgId);
+ *   // Components subscribed to orgChanged$ have already reset their state.
+ * }
+ *
+ * // In template:
+ * @if (orgSwitch.switching()) { <val-loading /> }
+ * ```
+ *
+ * @example Component reacting to org change
+ * ```typescript
+ * private orgSwitch = inject(OrgSwitchService);
+ *
+ * constructor() {
+ *   this.orgSwitch.orgChanged$
+ *     .pipe(takeUntilDestroyed())
+ *     .subscribe(() => this.resetState());
+ * }
+ * ```
+ *
+ * @example Brutal reload mode
+ * ```typescript
+ * await this.orgSwitch.switchTo(orgId, { reload: true });
+ * // window.location.reload() — clean slate, loses scroll position
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class OrgSwitchService {
+  private readonly _switching = signal(false);
+  private readonly _orgChanged = new Subject<OrgChangedEvent>();
+
+  /**
+   * `true` while a switch is in flight. UI should disable interactions
+   * with org-scoped data and show a loading indicator.
+   */
+  readonly switching = this._switching.asReadonly();
+
+  /**
+   * Fires after a successful switch, with the previous and new org ids.
+   * Components subscribe to invalidate caches / reset state.
+   *
+   * Fires AFTER the Firebase re-auth completes — listeners attached here
+   * see the updated Firebase user / activeOrg claim.
+   */
+  readonly orgChanged$: Observable<OrgChangedEvent> = this._orgChanged.asObservable();
+
+  constructor(private auth: AuthService) {}
+
+  /**
+   * Switch the user's active organization.
+   *
+   * Re-entrant safe: while a switch is in flight, additional calls are
+   * rejected silently (returns immediately). Inspect `switching()` to gate UI.
+   *
+   * @param orgId Target organization id. Must be one the user has a role in
+   *              — backend rejects otherwise with `PERMISSION_DENIED`.
+   * @param options See `SwitchOrgOptions`.
+   *
+   * @throws The error from `auth.switchOrg` if the backend call fails.
+   *         `switching` returns to `false` before the error propagates.
+   */
+  async switchTo(orgId: string, options: SwitchOrgOptions = {}): Promise<void> {
+    if (this._switching()) {
+      return;
+    }
+
+    const previousOrg = this.currentActiveOrg();
+    if (previousOrg === orgId) {
+      // No-op — already on this org.
+      return;
+    }
+
+    this._switching.set(true);
+    try {
+      await firstValueFrom(this.auth.switchOrg(orgId));
+      this._orgChanged.next({ previousOrg, newOrg: orgId });
+
+      if (options.reload && typeof window !== 'undefined') {
+        window.location.reload();
+      }
+    } finally {
+      this._switching.set(false);
+    }
+  }
+
+  /**
+   * Read the current `activeOrg` from the auth user signal.
+   * Falls back to empty string if the user isn't loaded yet.
+   */
+  private currentActiveOrg(): string {
+    const user = this.auth.user();
+    // AuthUser may expose activeOrgId under different names depending on
+    // backend version — keep tolerant.
+    return (
+      (user as { activeOrgId?: string; activeOrg?: string } | null)?.activeOrgId ??
+      (user as { activeOrgId?: string; activeOrg?: string } | null)?.activeOrg ??
+      ''
+    );
+  }
+}

package/src/lib/services/auth/session.service.ts

@@ -0,0 +1,83 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { VALTECH_AUTH_CONFIG } from './config';
+import {
+  ValtechAuthConfig,
+  SessionInfo,
+  ListSessionsResponse,
+  RevokeSessionsResponse,
+} from './types';
+
+/**
+ * Servicio para gestión de sesiones activas del usuario.
+ * Permite listar y revocar sesiones.
+ *
+ * @example
+ * ```typescript
+ * import { SessionService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class SessionsPage {
+ *   private sessionService = inject(SessionService);
+ *
+ *   sessions = signal<SessionInfo[]>([]);
+ *
+ *   async ngOnInit() {
+ *     const sessions = await firstValueFrom(this.sessionService.listSessions());
+ *     this.sessions.set(sessions);
+ *   }
+ *
+ *   async revokeSession(sessionId: string) {
+ *     await firstValueFrom(this.sessionService.revokeSession(sessionId));
+ *     // Recargar lista
+ *   }
+ *
+ *   async revokeAllOthers() {
+ *     const result = await firstValueFrom(this.sessionService.revokeAllSessions());
+ *     console.log(`${result.sessionsRevoked} sesiones cerradas`);
+ *   }
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class SessionService {
+  constructor(
+    @Inject(VALTECH_AUTH_CONFIG) private config: ValtechAuthConfig,
+    private http: HttpClient
+  ) {}
+
+  private get baseUrl(): string {
+    return `${this.config.apiUrl}/v2/users/me/sessions`;
+  }
+
+  /**
+   * Lista todas las sesiones activas del usuario.
+   * La sesión actual está marcada con isCurrent=true.
+   */
+  listSessions(): Observable<SessionInfo[]> {
+    return this.http.get<ListSessionsResponse>(this.baseUrl).pipe(
+      map(response => response.sessions)
+    );
+  }
+
+  /**
+   * Revoca una sesión específica.
+   * Fuerza el cierre de sesión en ese dispositivo/navegador.
+   */
+  revokeSession(sessionId: string): Observable<RevokeSessionsResponse> {
+    return this.http.delete<RevokeSessionsResponse>(`${this.baseUrl}/${sessionId}`);
+  }
+
+  /**
+   * Revoca todas las sesiones excepto la actual.
+   * Útil para "cerrar sesión en todos los dispositivos".
+   *
+   * @returns Número de sesiones revocadas
+   */
+  revokeAllSessions(): Observable<RevokeSessionsResponse> {
+    return this.http.delete<RevokeSessionsResponse>(this.baseUrl);
+  }
+}