@bigso/auth-sdk 0.3.1 → 0.4.3

package/README.md

@@ -1,4 +1,4 @@
-# @bigso/auth-sdk v0.3.0
+# @bigso/auth-sdk
 
 SDK oficial de autenticación para Bigso SSO, compatible con el estándar SSO v2.3. Este paquete permite integrar aplicaciones web con el flujo de autenticación basado en iframe seguro, utilizando PKCE, JWS firmados y comunicación mediante postMessage.
 
@@ -162,7 +162,7 @@ npm run lint
 
 ## 📝 Changelog
 
-### v0.3.0 (2026-03-21)
+### v0.4.0 (2026-03-23)
 Protocolo actualizado a SSO v2.3
 - Mensaje `sso-init` con `v: '2.3'`.
 - Timeout reactivo (se inicia tras `sso-ready`).

package/dist/index.cjs

@@ -0,0 +1,371 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BigsoAuth: () => BigsoAuth
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/crypto.ts
+async function sha256Base64Url(input) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const digest = await crypto.subtle.digest("SHA-256", data);
+  return base64Url(new Uint8Array(digest));
+}
+function generateVerifier(length = 32) {
+  const array = new Uint8Array(length);
+  crypto.getRandomValues(array);
+  return base64Url(array);
+}
+function base64Url(bytes) {
+  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function generateRandomId() {
+  return crypto.randomUUID();
+}
+
+// src/utils/events.ts
+var EventEmitter = class {
+  constructor() {
+    this.events = {};
+  }
+  on(event, handler) {
+    if (!this.events[event]) this.events[event] = [];
+    this.events[event].push(handler);
+  }
+  off(event, handler) {
+    if (!this.events[event]) return;
+    this.events[event] = this.events[event].filter((h) => h !== handler);
+  }
+  emit(event, data) {
+    this.events[event]?.forEach((fn) => fn(data));
+  }
+};
+
+// src/utils/jws.ts
+var import_jose = require("jose");
+async function verifySignedPayload(token, jwksUrl, expectedAudience) {
+  const JWKS = (0, import_jose.createRemoteJWKSet)(new URL(jwksUrl));
+  const { payload } = await (0, import_jose.jwtVerify)(token, JWKS, {
+    audience: expectedAudience
+  });
+  return payload;
+}
+
+// src/core/auth.ts
+var BigsoAuth = class extends EventEmitter {
+  constructor(options) {
+    super();
+    this.authCompleted = false;
+    this.requestId = generateRandomId();
+    this.loginInProgress = false;
+    this.options = {
+      timeout: 5e3,
+      // por defecto 5s (estándar v2.3)
+      debug: false,
+      redirectUri: "",
+      tenantHint: "",
+      theme: "light",
+      ...options
+    };
+  }
+  /**
+   * Inicia el flujo de autenticación.
+   * @returns Promise que resuelve con el payload decodificado del JWS (solo para información; el backend debe validar)
+   */
+  async login() {
+    if (this.loginInProgress) {
+      this.debug("login() ya en curso, ignorando llamada duplicada");
+      return Promise.reject(new Error("Login already in progress"));
+    }
+    this.loginInProgress = true;
+    this.authCompleted = false;
+    const state = generateRandomId();
+    const nonce = generateRandomId();
+    const verifier = generateVerifier();
+    const requestId = this.requestId;
+    sessionStorage.setItem("sso_ctx", JSON.stringify({ state, nonce, verifier, requestId }));
+    this.createUI();
+    return new Promise((resolve, reject) => {
+      this.abortController = new AbortController();
+      const { signal } = this.abortController;
+      const cleanup = () => {
+        if (this.timeoutId) clearTimeout(this.timeoutId);
+        if (this.messageListener) window.removeEventListener("message", this.messageListener);
+        this.iframe?.remove();
+        this.iframe = void 0;
+        this.authCompleted = true;
+        this.loginInProgress = false;
+      };
+      this.messageListener = async (event) => {
+        if (event.origin !== this.options.ssoOrigin) {
+          this.debug("Ignorado mensaje de origen no autorizado:", event.origin);
+          return;
+        }
+        const msg = event.data;
+        this.debug("Mensaje recibido:", msg);
+        if (msg.requestId && msg.requestId !== requestId) {
+          this.debug("requestId no coincide, ignorado");
+          return;
+        }
+        if (msg.type === "sso-ready") {
+          this.debug("sso-ready recibido, iniciando timeout y enviando sso-init");
+          this.timeoutId = window.setTimeout(() => {
+            if (!this.authCompleted) {
+              this.debug("Timeout alcanzado, activando fallback");
+              this.closeUI();
+              cleanup();
+              this.emit("fallback");
+              window.location.href = this.buildFallbackUrl();
+              reject(new Error("Timeout"));
+            }
+          }, this.options.timeout);
+          const codeChallenge = await sha256Base64Url(verifier);
+          const initPayload = {
+            state,
+            nonce,
+            code_challenge: codeChallenge,
+            code_challenge_method: "S256",
+            origin: window.location.origin,
+            ...this.options.redirectUri && { redirect_uri: this.options.redirectUri },
+            ...this.options.tenantHint && { tenant_hint: this.options.tenantHint },
+            timeout_ms: this.options.timeout
+            // pasar el timeout configurado (opcional)
+          };
+          this.iframe?.contentWindow?.postMessage({
+            v: "2.3",
+            // versión del protocolo (estándar v2.3)
+            source: "@app/widget",
+            type: "sso-init",
+            requestId: this.requestId,
+            payload: initPayload
+          }, this.options.ssoOrigin);
+          this.emit("ready");
+          return;
+        }
+        if (msg.type === "sso-success") {
+          this.debug("sso-success recibido");
+          clearTimeout(this.timeoutId);
+          try {
+            const payload = msg.payload;
+            const ctx = JSON.parse(sessionStorage.getItem("sso_ctx") || "{}");
+            if (payload.state !== ctx.state) {
+              throw new Error("Invalid state");
+            }
+            const decoded = await verifySignedPayload(
+              payload.signed_payload,
+              this.options.jwksUrl,
+              window.location.origin
+              // aud esperado
+            );
+            if (decoded.nonce !== ctx.nonce) {
+              throw new Error("Invalid nonce");
+            }
+            this.debug("JWS v\xE1lido, payload:", decoded);
+            this.closeUI();
+            cleanup();
+            this.emit("success", decoded);
+            resolve(decoded);
+          } catch (err) {
+            this.debug("Error en sso-success:", err);
+            this.closeUI();
+            cleanup();
+            this.emit("error", err);
+            reject(err);
+          }
+          return;
+        }
+        if (msg.type === "sso-error") {
+          const errorPayload = msg.payload;
+          this.debug("sso-error recibido:", errorPayload);
+          clearTimeout(this.timeoutId);
+          this.closeUI();
+          cleanup();
+          if (errorPayload.code === "version_mismatch") {
+            this.emit("error", errorPayload);
+            window.location.href = this.buildFallbackUrl();
+            reject(new Error(`Version mismatch: expected ${errorPayload.expected_version}`));
+          } else {
+            this.emit("error", errorPayload);
+            reject(errorPayload);
+          }
+        }
+        if (msg.type === "sso-close") {
+          this.debug("sso-close recibido");
+          this.closeUI();
+          cleanup();
+          reject(new Error("Login cancelled by user"));
+        }
+      };
+      window.addEventListener("message", this.messageListener);
+      signal.addEventListener("abort", () => {
+        this.debug("Operaci\xF3n abortada");
+        this.closeUI();
+        cleanup();
+        reject(new Error("Login aborted"));
+      });
+    });
+  }
+  /** Cancela el flujo de autenticación en curso */
+  abort() {
+    this.abortController?.abort();
+  }
+  // ─── UI Management ───────────────────────────────────────────────
+  /**
+   * Crea (o reutiliza) el overlay con Shadow DOM y el iframe visible.
+   * Patrón tomado del CDN widget v1: Shadow DOM para aislar estilos.
+   */
+  createUI() {
+    if (!this.hostEl) {
+      this.hostEl = document.createElement("div");
+      this.hostEl.id = "bigso-auth-host";
+      this.shadowRoot = this.hostEl.attachShadow({ mode: "open" });
+      const style = document.createElement("style");
+      style.textContent = this.getOverlayStyles();
+      this.shadowRoot.appendChild(style);
+      this.overlayEl = document.createElement("div");
+      this.overlayEl.className = "sso-overlay";
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "sso-close-btn";
+      closeBtn.innerHTML = "×";
+      closeBtn.setAttribute("aria-label", "Cerrar modal");
+      closeBtn.addEventListener("click", () => this.abort());
+      this.overlayEl.appendChild(closeBtn);
+      this.overlayEl.addEventListener("click", (event) => {
+        if (event.target === this.overlayEl) {
+          this.abort();
+        }
+      });
+      this.shadowRoot.appendChild(this.overlayEl);
+      document.body.appendChild(this.hostEl);
+    }
+    this.iframe = document.createElement("iframe");
+    this.iframe.className = "sso-frame";
+    this.iframe.src = `${this.options.ssoOrigin}/auth/sign-in?v=2.3&client_id=${this.options.clientId}`;
+    this.iframe.setAttribute("title", "SSO Login");
+    this.overlayEl.appendChild(this.iframe);
+    this.debug("Iframe creado", this.iframe.src);
+    this.overlayEl.classList.remove("sso-closing");
+    this.overlayEl.style.display = "flex";
+  }
+  /**
+   * Cierra el overlay con animación suave (fadeOut + slideDown).
+   * El overlay persiste en el DOM (solo se oculta).
+   */
+  closeUI() {
+    if (!this.overlayEl || this.overlayEl.style.display === "none") return;
+    this.overlayEl.classList.add("sso-closing");
+    setTimeout(() => {
+      if (this.overlayEl) {
+        this.overlayEl.style.display = "none";
+        this.overlayEl.classList.remove("sso-closing");
+      }
+    }, 200);
+  }
+  /**
+   * Estilos CSS encapsulados dentro del Shadow DOM.
+   * Migrados del widget CDN v1 con las mismas animaciones y responsive.
+   */
+  getOverlayStyles() {
+    return `
+            .sso-overlay {
+                position: fixed;
+                inset: 0;
+                display: none;
+                justify-content: center;
+                align-items: center;
+                background: rgba(0, 0, 0, 0.6);
+                z-index: 999999;
+                backdrop-filter: blur(4px);
+                -webkit-backdrop-filter: blur(4px);
+                animation: fadeIn 0.2s ease;
+            }
+            .sso-frame {
+                width: 370px;
+                height: 350px;
+                border: none;
+                border-radius: 16px;
+                background: var(--card-bg, #fff);
+                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+                animation: slideUp 0.3s ease;
+            }
+            @media (max-width: 480px), (max-height: 480px) {
+                .sso-frame {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 0;
+                }
+            }
+            .sso-close-btn {
+                position: absolute;
+                top: 12px;
+                right: 12px;
+                width: 32px;
+                height: 32px;
+                background: rgba(0, 0, 0, 0.4);
+                color: white;
+                border: none;
+                border-radius: 50%;
+                font-size: 24px;
+                line-height: 1;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 1000000;
+                transition: background 0.2s;
+            }
+            .sso-close-btn:hover {
+                background: rgba(0, 0, 0, 0.8);
+            }
+            .sso-overlay.sso-closing {
+                animation: fadeOut 0.2s ease forwards;
+            }
+            .sso-overlay.sso-closing .sso-frame {
+                animation: slideDown 0.2s ease forwards;
+            }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+            @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+            @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+            @keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }
+        `;
+  }
+  // ─── Helpers ──────────────────────────────────────────────────────
+  buildFallbackUrl() {
+    const url = new URL(`${this.options.ssoOrigin}/authorize`);
+    url.searchParams.set("client_id", this.options.clientId);
+    url.searchParams.set("response_type", "code");
+    url.searchParams.set("redirect_uri", this.options.redirectUri || window.location.origin);
+    url.searchParams.set("state", generateRandomId());
+    url.searchParams.set("code_challenge_method", "S256");
+    return url.toString();
+  }
+  debug(...args) {
+    if (this.options.debug) {
+      console.log("[BigsoAuth]", ...args);
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BigsoAuth
+});

package/dist/index.d.cts

@@ -0,0 +1,66 @@
+declare class EventEmitter {
+    private events;
+    on(event: string, handler: Function): void;
+    off(event: string, handler: Function): void;
+    emit(event: string, data?: any): void;
+}
+
+interface BigsoAuthOptions {
+    /** Client ID registrado en el SSO */
+    clientId: string;
+    /** Origen del SSO (ej: https://sso.bigso.co) */
+    ssoOrigin: string;
+    /** URL del JWKS para verificar firmas (ej: https://sso.bigso.co/.well-known/jwks.json) */
+    jwksUrl: string;
+    /** Timeout en milisegundos (por defecto 5000) */
+    timeout?: number;
+    /** Activar logs de depuración */
+    debug?: boolean;
+    /** URI de redirección registrada (opcional, si se requiere validación exacta) */
+    redirectUri?: string;
+    /** Sugerencia de tenant (opcional) */
+    tenantHint?: string;
+    /** Tema visual del iframe ('light' | 'dark', por defecto 'light') */
+    theme?: 'light' | 'dark';
+}
+
+declare class BigsoAuth extends EventEmitter {
+    private options;
+    private iframe?;
+    private authCompleted;
+    private requestId;
+    private timeoutId?;
+    private messageListener?;
+    private abortController?;
+    private hostEl?;
+    private shadowRoot?;
+    private overlayEl?;
+    private loginInProgress;
+    constructor(options: BigsoAuthOptions);
+    /**
+     * Inicia el flujo de autenticación.
+     * @returns Promise que resuelve con el payload decodificado del JWS (solo para información; el backend debe validar)
+     */
+    login(): Promise<any>;
+    /** Cancela el flujo de autenticación en curso */
+    abort(): void;
+    /**
+     * Crea (o reutiliza) el overlay con Shadow DOM y el iframe visible.
+     * Patrón tomado del CDN widget v1: Shadow DOM para aislar estilos.
+     */
+    private createUI;
+    /**
+     * Cierra el overlay con animación suave (fadeOut + slideDown).
+     * El overlay persiste en el DOM (solo se oculta).
+     */
+    private closeUI;
+    /**
+     * Estilos CSS encapsulados dentro del Shadow DOM.
+     * Migrados del widget CDN v1 con las mismas animaciones y responsive.
+     */
+    private getOverlayStyles;
+    private buildFallbackUrl;
+    private debug;
+}
+
+export { BigsoAuth, type BigsoAuthOptions };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+declare class EventEmitter {
+    private events;
+    on(event: string, handler: Function): void;
+    off(event: string, handler: Function): void;
+    emit(event: string, data?: any): void;
+}
+
+interface BigsoAuthOptions {
+    /** Client ID registrado en el SSO */
+    clientId: string;
+    /** Origen del SSO (ej: https://sso.bigso.co) */
+    ssoOrigin: string;
+    /** URL del JWKS para verificar firmas (ej: https://sso.bigso.co/.well-known/jwks.json) */
+    jwksUrl: string;
+    /** Timeout en milisegundos (por defecto 5000) */
+    timeout?: number;
+    /** Activar logs de depuración */
+    debug?: boolean;
+    /** URI de redirección registrada (opcional, si se requiere validación exacta) */
+    redirectUri?: string;
+    /** Sugerencia de tenant (opcional) */
+    tenantHint?: string;
+    /** Tema visual del iframe ('light' | 'dark', por defecto 'light') */
+    theme?: 'light' | 'dark';
+}
+
+declare class BigsoAuth extends EventEmitter {
+    private options;
+    private iframe?;
+    private authCompleted;
+    private requestId;
+    private timeoutId?;
+    private messageListener?;
+    private abortController?;
+    private hostEl?;
+    private shadowRoot?;
+    private overlayEl?;
+    private loginInProgress;
+    constructor(options: BigsoAuthOptions);
+    /**
+     * Inicia el flujo de autenticación.
+     * @returns Promise que resuelve con el payload decodificado del JWS (solo para información; el backend debe validar)
+     */
+    login(): Promise<any>;
+    /** Cancela el flujo de autenticación en curso */
+    abort(): void;
+    /**
+     * Crea (o reutiliza) el overlay con Shadow DOM y el iframe visible.
+     * Patrón tomado del CDN widget v1: Shadow DOM para aislar estilos.
+     */
+    private createUI;
+    /**
+     * Cierra el overlay con animación suave (fadeOut + slideDown).
+     * El overlay persiste en el DOM (solo se oculta).
+     */
+    private closeUI;
+    /**
+     * Estilos CSS encapsulados dentro del Shadow DOM.
+     * Migrados del widget CDN v1 con las mismas animaciones y responsive.
+     */
+    private getOverlayStyles;
+    private buildFallbackUrl;
+    private debug;
+}
+
+export { BigsoAuth, type BigsoAuthOptions };

package/dist/index.js

@@ -0,0 +1,344 @@
+// src/utils/crypto.ts
+async function sha256Base64Url(input) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const digest = await crypto.subtle.digest("SHA-256", data);
+  return base64Url(new Uint8Array(digest));
+}
+function generateVerifier(length = 32) {
+  const array = new Uint8Array(length);
+  crypto.getRandomValues(array);
+  return base64Url(array);
+}
+function base64Url(bytes) {
+  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function generateRandomId() {
+  return crypto.randomUUID();
+}
+
+// src/utils/events.ts
+var EventEmitter = class {
+  constructor() {
+    this.events = {};
+  }
+  on(event, handler) {
+    if (!this.events[event]) this.events[event] = [];
+    this.events[event].push(handler);
+  }
+  off(event, handler) {
+    if (!this.events[event]) return;
+    this.events[event] = this.events[event].filter((h) => h !== handler);
+  }
+  emit(event, data) {
+    this.events[event]?.forEach((fn) => fn(data));
+  }
+};
+
+// src/utils/jws.ts
+import { jwtVerify, createRemoteJWKSet } from "jose";
+async function verifySignedPayload(token, jwksUrl, expectedAudience) {
+  const JWKS = createRemoteJWKSet(new URL(jwksUrl));
+  const { payload } = await jwtVerify(token, JWKS, {
+    audience: expectedAudience
+  });
+  return payload;
+}
+
+// src/core/auth.ts
+var BigsoAuth = class extends EventEmitter {
+  constructor(options) {
+    super();
+    this.authCompleted = false;
+    this.requestId = generateRandomId();
+    this.loginInProgress = false;
+    this.options = {
+      timeout: 5e3,
+      // por defecto 5s (estándar v2.3)
+      debug: false,
+      redirectUri: "",
+      tenantHint: "",
+      theme: "light",
+      ...options
+    };
+  }
+  /**
+   * Inicia el flujo de autenticación.
+   * @returns Promise que resuelve con el payload decodificado del JWS (solo para información; el backend debe validar)
+   */
+  async login() {
+    if (this.loginInProgress) {
+      this.debug("login() ya en curso, ignorando llamada duplicada");
+      return Promise.reject(new Error("Login already in progress"));
+    }
+    this.loginInProgress = true;
+    this.authCompleted = false;
+    const state = generateRandomId();
+    const nonce = generateRandomId();
+    const verifier = generateVerifier();
+    const requestId = this.requestId;
+    sessionStorage.setItem("sso_ctx", JSON.stringify({ state, nonce, verifier, requestId }));
+    this.createUI();
+    return new Promise((resolve, reject) => {
+      this.abortController = new AbortController();
+      const { signal } = this.abortController;
+      const cleanup = () => {
+        if (this.timeoutId) clearTimeout(this.timeoutId);
+        if (this.messageListener) window.removeEventListener("message", this.messageListener);
+        this.iframe?.remove();
+        this.iframe = void 0;
+        this.authCompleted = true;
+        this.loginInProgress = false;
+      };
+      this.messageListener = async (event) => {
+        if (event.origin !== this.options.ssoOrigin) {
+          this.debug("Ignorado mensaje de origen no autorizado:", event.origin);
+          return;
+        }
+        const msg = event.data;
+        this.debug("Mensaje recibido:", msg);
+        if (msg.requestId && msg.requestId !== requestId) {
+          this.debug("requestId no coincide, ignorado");
+          return;
+        }
+        if (msg.type === "sso-ready") {
+          this.debug("sso-ready recibido, iniciando timeout y enviando sso-init");
+          this.timeoutId = window.setTimeout(() => {
+            if (!this.authCompleted) {
+              this.debug("Timeout alcanzado, activando fallback");
+              this.closeUI();
+              cleanup();
+              this.emit("fallback");
+              window.location.href = this.buildFallbackUrl();
+              reject(new Error("Timeout"));
+            }
+          }, this.options.timeout);
+          const codeChallenge = await sha256Base64Url(verifier);
+          const initPayload = {
+            state,
+            nonce,
+            code_challenge: codeChallenge,
+            code_challenge_method: "S256",
+            origin: window.location.origin,
+            ...this.options.redirectUri && { redirect_uri: this.options.redirectUri },
+            ...this.options.tenantHint && { tenant_hint: this.options.tenantHint },
+            timeout_ms: this.options.timeout
+            // pasar el timeout configurado (opcional)
+          };
+          this.iframe?.contentWindow?.postMessage({
+            v: "2.3",
+            // versión del protocolo (estándar v2.3)
+            source: "@app/widget",
+            type: "sso-init",
+            requestId: this.requestId,
+            payload: initPayload
+          }, this.options.ssoOrigin);
+          this.emit("ready");
+          return;
+        }
+        if (msg.type === "sso-success") {
+          this.debug("sso-success recibido");
+          clearTimeout(this.timeoutId);
+          try {
+            const payload = msg.payload;
+            const ctx = JSON.parse(sessionStorage.getItem("sso_ctx") || "{}");
+            if (payload.state !== ctx.state) {
+              throw new Error("Invalid state");
+            }
+            const decoded = await verifySignedPayload(
+              payload.signed_payload,
+              this.options.jwksUrl,
+              window.location.origin
+              // aud esperado
+            );
+            if (decoded.nonce !== ctx.nonce) {
+              throw new Error("Invalid nonce");
+            }
+            this.debug("JWS v\xE1lido, payload:", decoded);
+            this.closeUI();
+            cleanup();
+            this.emit("success", decoded);
+            resolve(decoded);
+          } catch (err) {
+            this.debug("Error en sso-success:", err);
+            this.closeUI();
+            cleanup();
+            this.emit("error", err);
+            reject(err);
+          }
+          return;
+        }
+        if (msg.type === "sso-error") {
+          const errorPayload = msg.payload;
+          this.debug("sso-error recibido:", errorPayload);
+          clearTimeout(this.timeoutId);
+          this.closeUI();
+          cleanup();
+          if (errorPayload.code === "version_mismatch") {
+            this.emit("error", errorPayload);
+            window.location.href = this.buildFallbackUrl();
+            reject(new Error(`Version mismatch: expected ${errorPayload.expected_version}`));
+          } else {
+            this.emit("error", errorPayload);
+            reject(errorPayload);
+          }
+        }
+        if (msg.type === "sso-close") {
+          this.debug("sso-close recibido");
+          this.closeUI();
+          cleanup();
+          reject(new Error("Login cancelled by user"));
+        }
+      };
+      window.addEventListener("message", this.messageListener);
+      signal.addEventListener("abort", () => {
+        this.debug("Operaci\xF3n abortada");
+        this.closeUI();
+        cleanup();
+        reject(new Error("Login aborted"));
+      });
+    });
+  }
+  /** Cancela el flujo de autenticación en curso */
+  abort() {
+    this.abortController?.abort();
+  }
+  // ─── UI Management ───────────────────────────────────────────────
+  /**
+   * Crea (o reutiliza) el overlay con Shadow DOM y el iframe visible.
+   * Patrón tomado del CDN widget v1: Shadow DOM para aislar estilos.
+   */
+  createUI() {
+    if (!this.hostEl) {
+      this.hostEl = document.createElement("div");
+      this.hostEl.id = "bigso-auth-host";
+      this.shadowRoot = this.hostEl.attachShadow({ mode: "open" });
+      const style = document.createElement("style");
+      style.textContent = this.getOverlayStyles();
+      this.shadowRoot.appendChild(style);
+      this.overlayEl = document.createElement("div");
+      this.overlayEl.className = "sso-overlay";
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "sso-close-btn";
+      closeBtn.innerHTML = "×";
+      closeBtn.setAttribute("aria-label", "Cerrar modal");
+      closeBtn.addEventListener("click", () => this.abort());
+      this.overlayEl.appendChild(closeBtn);
+      this.overlayEl.addEventListener("click", (event) => {
+        if (event.target === this.overlayEl) {
+          this.abort();
+        }
+      });
+      this.shadowRoot.appendChild(this.overlayEl);
+      document.body.appendChild(this.hostEl);
+    }
+    this.iframe = document.createElement("iframe");
+    this.iframe.className = "sso-frame";
+    this.iframe.src = `${this.options.ssoOrigin}/auth/sign-in?v=2.3&client_id=${this.options.clientId}`;
+    this.iframe.setAttribute("title", "SSO Login");
+    this.overlayEl.appendChild(this.iframe);
+    this.debug("Iframe creado", this.iframe.src);
+    this.overlayEl.classList.remove("sso-closing");
+    this.overlayEl.style.display = "flex";
+  }
+  /**
+   * Cierra el overlay con animación suave (fadeOut + slideDown).
+   * El overlay persiste en el DOM (solo se oculta).
+   */
+  closeUI() {
+    if (!this.overlayEl || this.overlayEl.style.display === "none") return;
+    this.overlayEl.classList.add("sso-closing");
+    setTimeout(() => {
+      if (this.overlayEl) {
+        this.overlayEl.style.display = "none";
+        this.overlayEl.classList.remove("sso-closing");
+      }
+    }, 200);
+  }
+  /**
+   * Estilos CSS encapsulados dentro del Shadow DOM.
+   * Migrados del widget CDN v1 con las mismas animaciones y responsive.
+   */
+  getOverlayStyles() {
+    return `
+            .sso-overlay {
+                position: fixed;
+                inset: 0;
+                display: none;
+                justify-content: center;
+                align-items: center;
+                background: rgba(0, 0, 0, 0.6);
+                z-index: 999999;
+                backdrop-filter: blur(4px);
+                -webkit-backdrop-filter: blur(4px);
+                animation: fadeIn 0.2s ease;
+            }
+            .sso-frame {
+                width: 370px;
+                height: 350px;
+                border: none;
+                border-radius: 16px;
+                background: var(--card-bg, #fff);
+                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+                animation: slideUp 0.3s ease;
+            }
+            @media (max-width: 480px), (max-height: 480px) {
+                .sso-frame {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 0;
+                }
+            }
+            .sso-close-btn {
+                position: absolute;
+                top: 12px;
+                right: 12px;
+                width: 32px;
+                height: 32px;
+                background: rgba(0, 0, 0, 0.4);
+                color: white;
+                border: none;
+                border-radius: 50%;
+                font-size: 24px;
+                line-height: 1;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 1000000;
+                transition: background 0.2s;
+            }
+            .sso-close-btn:hover {
+                background: rgba(0, 0, 0, 0.8);
+            }
+            .sso-overlay.sso-closing {
+                animation: fadeOut 0.2s ease forwards;
+            }
+            .sso-overlay.sso-closing .sso-frame {
+                animation: slideDown 0.2s ease forwards;
+            }
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+            @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+            @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+            @keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }
+        `;
+  }
+  // ─── Helpers ──────────────────────────────────────────────────────
+  buildFallbackUrl() {
+    const url = new URL(`${this.options.ssoOrigin}/authorize`);
+    url.searchParams.set("client_id", this.options.clientId);
+    url.searchParams.set("response_type", "code");
+    url.searchParams.set("redirect_uri", this.options.redirectUri || window.location.origin);
+    url.searchParams.set("state", generateRandomId());
+    url.searchParams.set("code_challenge_method", "S256");
+    return url.toString();
+  }
+  debug(...args) {
+    if (this.options.debug) {
+      console.log("[BigsoAuth]", ...args);
+    }
+  }
+};
+export {
+  BigsoAuth
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bigso/auth-sdk",
-    "version": "0.3.1",
+    "version": "0.4.3",
     "description": "SDK de autenticación para SSO v2.3 con iframe seguro",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/",
@@ -16,7 +16,8 @@
         "build": "tsup src/index.ts --format esm,cjs --dts",
         "dev": "tsup src/index.ts --watch",
         "lint": "eslint .",
-        "test": "vitest"
+        "test": "vitest",
+        "release": "git tag v$npm_package_version && git push origin v$npm_package_version"
     },
     "dependencies": {
         "jose": "^5.0.0"