@authon/js 0.1.11 → 0.1.12

package/dist/index.js

@@ -97,6 +97,7 @@ var ModalRenderer = class {
   theme;
   branding;
   enabledProviders = [];
+  currentView = "signIn";
   onProviderClick;
   onEmailSubmit;
   onClose;
@@ -120,9 +121,9 @@ var ModalRenderer = class {
   }
   open(view = "signIn") {
     if (this.shadowRoot && this.hostElement) {
-      this.shadowRoot.innerHTML = this.buildHTML(view);
-      this.attachEvents(view);
+      this.switchView(view);
     } else {
+      this.currentView = view;
       this.render(view);
     }
   }
@@ -155,13 +156,13 @@ var ModalRenderer = class {
   showBanner(message, type = "error") {
     if (!this.shadowRoot) return;
     this.clearBanner();
-    const container = this.shadowRoot.querySelector(".modal-container");
-    if (!container) return;
+    const inner = this.shadowRoot.getElementById("modal-inner");
+    if (!inner) return;
     const banner = document.createElement("div");
     banner.id = "authon-banner";
     banner.className = type === "warning" ? "banner-warning" : "error-msg";
     banner.textContent = message;
-    container.insertBefore(banner, container.firstChild);
+    inner.insertBefore(banner, inner.firstChild);
   }
   clearBanner() {
     if (!this.shadowRoot) return;
@@ -190,6 +191,24 @@ var ModalRenderer = class {
     if (!this.shadowRoot) return;
     this.shadowRoot.getElementById("authon-loading-overlay")?.remove();
   }
+  // ── Smooth view switch (no flicker) ──
+  switchView(view) {
+    if (!this.shadowRoot || view === this.currentView) return;
+    this.currentView = view;
+    const isSignUp = view === "signUp";
+    const inner = this.shadowRoot.getElementById("modal-inner");
+    if (!inner) return;
+    inner.style.opacity = "0";
+    inner.style.transform = "translateY(-4px)";
+    setTimeout(() => {
+      inner.innerHTML = this.buildInnerContent(view);
+      this.attachInnerEvents(view);
+      void inner.offsetHeight;
+      inner.style.opacity = "1";
+      inner.style.transform = "translateY(0)";
+    }, 140);
+  }
+  // ── Render ──
   render(view) {
     const host = document.createElement("div");
     host.setAttribute("data-authon-modal", "");
@@ -200,10 +219,26 @@ var ModalRenderer = class {
       this.containerElement.appendChild(host);
     }
     this.shadowRoot = host.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.buildHTML(view);
-    this.attachEvents(view);
+    this.shadowRoot.innerHTML = this.buildShell(view);
+    this.attachInnerEvents(view);
+    this.attachShellEvents();
+  }
+  // ── HTML builders ──
+  /** Shell = style + backdrop + modal-container (stable across view switches) */
+  buildShell(view) {
+    const popupWrapper = this.mode === "popup" ? `<div class="backdrop" id="backdrop"></div>` : "";
+    return `
+      <style>${this.buildCSS()}</style>
+      ${popupWrapper}
+      <div class="modal-container" role="dialog" aria-modal="true">
+        <div id="modal-inner" class="modal-inner">
+          ${this.buildInnerContent(view)}
+        </div>
+      </div>
+    `;
   }
-  buildHTML(view) {
+  /** Inner content = everything inside the modal that changes per view */
+  buildInnerContent(view) {
     const b = this.branding;
     const isSignUp = view === "signUp";
     const title = isSignUp ? "Create your account" : "Welcome back";
@@ -231,21 +266,16 @@ var ModalRenderer = class {
           ${b.termsUrl && b.privacyUrl ? " \xB7 " : ""}
           ${b.privacyUrl ? `<a href="${b.privacyUrl}" target="_blank">Privacy Policy</a>` : ""}
         </div>` : "";
-    const popupWrapper = this.mode === "popup" ? `<div class="backdrop" id="backdrop"></div>` : "";
     return `
-      <style>${this.buildCSS()}</style>
-      ${popupWrapper}
-      <div class="modal-container" role="dialog" aria-modal="true">
-        ${b.logoDataUrl ? `<img src="${b.logoDataUrl}" alt="Logo" class="logo" />` : ""}
-        <h2 class="title">${title}</h2>
-        ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
-        <div class="providers">${providerButtons}</div>
-        ${divider}
-        ${emailForm}
-        <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
-        ${footer}
-        ${b.showSecuredBy !== false ? `<div class="secured-by">Secured by <span class="secured-brand">Authon</span></div>` : ""}
-      </div>
+      ${b.logoDataUrl ? `<img src="${b.logoDataUrl}" alt="Logo" class="logo" />` : ""}
+      <h2 class="title">${title}</h2>
+      ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
+      <div class="providers">${providerButtons}</div>
+      ${divider}
+      ${emailForm}
+      <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
+      ${footer}
+      ${b.showSecuredBy !== false ? `<div class="secured-by">Secured by <a href="https://authon.dev" target="_blank" rel="noopener noreferrer" class="secured-link">Authon</a></div>` : ""}
     `;
   }
   isDark() {
@@ -296,6 +326,9 @@ var ModalRenderer = class {
         position: ${this.mode === "popup" ? "fixed" : "relative"};
         ${this.mode === "popup" ? `box-shadow: 0 25px 50px -12px rgba(0,0,0,${dark ? "0.5" : "0.25"}); animation: slideIn 0.3s ease;` : ""}
       }
+      .modal-inner {
+        transition: opacity 0.14s ease, transform 0.14s ease;
+      }
       .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
       .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--authon-text); }
       .brand-name { text-align: center; font-size: 14px; color: var(--authon-muted); margin-bottom: 24px; }
@@ -354,15 +387,15 @@ var ModalRenderer = class {
       .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: var(--authon-muted); }
       .switch-view a { color: var(--authon-primary-start); text-decoration: none; font-weight: 500; }
       .switch-view a:hover { text-decoration: underline; }
-      .footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--authon-dim); }
+      .footer { text-align: center; margin-top: 12px; font-size: 12px; color: var(--authon-dim); }
       .footer a { color: var(--authon-dim); text-decoration: none; }
       .footer a:hover { text-decoration: underline; }
       .secured-by {
-        text-align: center; margin-top: 20px; padding-top: 16px;
-        border-top: 1px solid var(--authon-divider);
+        text-align: center; margin-top: 16px;
         font-size: 11px; color: var(--authon-dim);
       }
-      .secured-brand { font-weight: 600; color: var(--authon-muted); }
+      .secured-link { font-weight: 600; color: var(--authon-muted); text-decoration: none; }
+      .secured-link:hover { text-decoration: underline; }
       /* Loading overlay */
       #authon-loading-overlay {
         position: absolute; inset: 0; z-index: 10;
@@ -401,7 +434,26 @@ var ModalRenderer = class {
       ${b.customCss || ""}
     `;
   }
-  attachEvents(view) {
+  // ── Event binding ──
+  /** Attach events to shell elements (backdrop, ESC) — called once */
+  attachShellEvents() {
+    if (!this.shadowRoot) return;
+    const backdrop = this.shadowRoot.getElementById("backdrop");
+    if (backdrop) {
+      backdrop.addEventListener("click", () => this.onClose());
+    }
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+    }
+    if (this.mode === "popup") {
+      this.escHandler = (e) => {
+        if (e.key === "Escape") this.onClose();
+      };
+      document.addEventListener("keydown", this.escHandler);
+    }
+  }
+  /** Attach events to inner content (buttons, form, switch link) — called on each view */
+  attachInnerEvents(view) {
     if (!this.shadowRoot) return;
     this.shadowRoot.querySelectorAll(".provider-btn").forEach((btn) => {
       btn.addEventListener("click", () => {
@@ -428,20 +480,6 @@ var ModalRenderer = class {
         this.open(view === "signIn" ? "signUp" : "signIn");
       });
     }
-    const backdrop = this.shadowRoot.getElementById("backdrop");
-    if (backdrop) {
-      backdrop.addEventListener("click", () => this.onClose());
-    }
-    if (this.escHandler) {
-      document.removeEventListener("keydown", this.escHandler);
-      this.escHandler = null;
-    }
-    if (this.mode === "popup") {
-      this.escHandler = (e) => {
-        if (e.key === "Escape") this.onClose();
-      };
-      document.addEventListener("keydown", this.escHandler);
-    }
   }
 };
 
@@ -651,7 +689,7 @@ var Authon = class {
   async startOAuthFlow(provider) {
     try {
       const redirectUri = `${this.config.apiUrl}/v1/auth/oauth/redirect`;
-      const { url } = await this.apiGet(
+      const { url, state } = await this.apiGet(
         `/v1/auth/oauth/${provider}/url?redirectUri=${encodeURIComponent(redirectUri)}`
       );
       this.modal?.showLoading();
@@ -673,59 +711,80 @@ var Authon = class {
         this.emit("error", new Error("Popup was blocked by the browser"));
         return;
       }
-      let callbackReceived = false;
+      let resolved = false;
       let cleaned = false;
+      const resolve = (tokens) => {
+        if (resolved) return;
+        resolved = true;
+        cleanup();
+        try {
+          if (!popup.closed) popup.close();
+        } catch {
+        }
+        this.session.setSession(tokens);
+        this.modal?.close();
+        this.emit("signedIn", tokens.user);
+      };
+      const handleError = (msg) => {
+        if (resolved) return;
+        cleanup();
+        this.modal?.hideLoading();
+        this.modal?.showError(msg);
+        this.emit("error", new Error(msg));
+      };
       const cleanup = () => {
         if (cleaned) return;
         cleaned = true;
-        window.removeEventListener("message", handler);
-        if (pollTimer) clearInterval(pollTimer);
+        window.removeEventListener("message", messageHandler);
+        if (apiPollTimer) clearInterval(apiPollTimer);
+        if (closePollTimer) clearInterval(closePollTimer);
         if (maxTimer) clearTimeout(maxTimer);
       };
-      const pollTimer = setInterval(() => {
-        if (callbackReceived || cleaned) return;
+      const messageHandler = (e) => {
+        if (e.data?.type !== "authon-oauth-callback") return;
+        if (e.data.tokens) {
+          resolve(e.data.tokens);
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      const apiPollTimer = setInterval(async () => {
+        if (resolved || cleaned) return;
+        try {
+          const result = await this.apiGet(
+            `/v1/auth/oauth/poll?state=${encodeURIComponent(state)}`
+          );
+          if (result.status === "completed" && result.accessToken) {
+            resolve({
+              accessToken: result.accessToken,
+              refreshToken: result.refreshToken,
+              expiresIn: result.expiresIn,
+              user: result.user
+            });
+          } else if (result.status === "error") {
+            handleError(result.message || "Authentication failed");
+          }
+        } catch {
+        }
+      }, 1500);
+      const closePollTimer = setInterval(() => {
+        if (resolved || cleaned) return;
         try {
           if (popup.closed) {
+            clearInterval(closePollTimer);
             setTimeout(() => {
-              if (callbackReceived || cleaned) return;
+              if (resolved || cleaned) return;
               cleanup();
               this.modal?.hideLoading();
-            }, 500);
-            clearInterval(pollTimer);
+            }, 3e3);
           }
         } catch {
         }
       }, 500);
       const maxTimer = setTimeout(() => {
-        if (callbackReceived || cleaned) return;
+        if (resolved || cleaned) return;
         cleanup();
         this.modal?.hideLoading();
       }, 18e4);
-      const handler = async (e) => {
-        if (e.data?.type !== "authon-oauth-callback") return;
-        callbackReceived = true;
-        cleanup();
-        try {
-          if (!popup.closed) popup.close();
-        } catch {
-        }
-        try {
-          const tokens = await this.apiPost("/v1/auth/oauth/callback", {
-            code: e.data.code,
-            state: e.data.state,
-            provider
-          });
-          this.session.setSession(tokens);
-          this.modal?.close();
-          this.emit("signedIn", tokens.user);
-        } catch (err) {
-          this.modal?.hideLoading();
-          const msg = err instanceof Error ? err.message : String(err);
-          this.modal?.showError(msg.includes("500") ? "Authentication failed. Please try again." : msg);
-          this.emit("error", err instanceof Error ? err : new Error(msg));
-        }
-      };
-      window.addEventListener("message", handler);
     } catch (err) {
       this.modal?.hideLoading();
       this.emit("error", err instanceof Error ? err : new Error(String(err)));

package/dist/index.mjs

@@ -70,6 +70,7 @@ var ModalRenderer = class {
   theme;
   branding;
   enabledProviders = [];
+  currentView = "signIn";
   onProviderClick;
   onEmailSubmit;
   onClose;
@@ -93,9 +94,9 @@ var ModalRenderer = class {
   }
   open(view = "signIn") {
     if (this.shadowRoot && this.hostElement) {
-      this.shadowRoot.innerHTML = this.buildHTML(view);
-      this.attachEvents(view);
+      this.switchView(view);
     } else {
+      this.currentView = view;
       this.render(view);
     }
   }
@@ -128,13 +129,13 @@ var ModalRenderer = class {
   showBanner(message, type = "error") {
     if (!this.shadowRoot) return;
     this.clearBanner();
-    const container = this.shadowRoot.querySelector(".modal-container");
-    if (!container) return;
+    const inner = this.shadowRoot.getElementById("modal-inner");
+    if (!inner) return;
     const banner = document.createElement("div");
     banner.id = "authon-banner";
     banner.className = type === "warning" ? "banner-warning" : "error-msg";
     banner.textContent = message;
-    container.insertBefore(banner, container.firstChild);
+    inner.insertBefore(banner, inner.firstChild);
   }
   clearBanner() {
     if (!this.shadowRoot) return;
@@ -163,6 +164,24 @@ var ModalRenderer = class {
     if (!this.shadowRoot) return;
     this.shadowRoot.getElementById("authon-loading-overlay")?.remove();
   }
+  // ── Smooth view switch (no flicker) ──
+  switchView(view) {
+    if (!this.shadowRoot || view === this.currentView) return;
+    this.currentView = view;
+    const isSignUp = view === "signUp";
+    const inner = this.shadowRoot.getElementById("modal-inner");
+    if (!inner) return;
+    inner.style.opacity = "0";
+    inner.style.transform = "translateY(-4px)";
+    setTimeout(() => {
+      inner.innerHTML = this.buildInnerContent(view);
+      this.attachInnerEvents(view);
+      void inner.offsetHeight;
+      inner.style.opacity = "1";
+      inner.style.transform = "translateY(0)";
+    }, 140);
+  }
+  // ── Render ──
   render(view) {
     const host = document.createElement("div");
     host.setAttribute("data-authon-modal", "");
@@ -173,10 +192,26 @@ var ModalRenderer = class {
       this.containerElement.appendChild(host);
     }
     this.shadowRoot = host.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.buildHTML(view);
-    this.attachEvents(view);
+    this.shadowRoot.innerHTML = this.buildShell(view);
+    this.attachInnerEvents(view);
+    this.attachShellEvents();
+  }
+  // ── HTML builders ──
+  /** Shell = style + backdrop + modal-container (stable across view switches) */
+  buildShell(view) {
+    const popupWrapper = this.mode === "popup" ? `<div class="backdrop" id="backdrop"></div>` : "";
+    return `
+      <style>${this.buildCSS()}</style>
+      ${popupWrapper}
+      <div class="modal-container" role="dialog" aria-modal="true">
+        <div id="modal-inner" class="modal-inner">
+          ${this.buildInnerContent(view)}
+        </div>
+      </div>
+    `;
   }
-  buildHTML(view) {
+  /** Inner content = everything inside the modal that changes per view */
+  buildInnerContent(view) {
     const b = this.branding;
     const isSignUp = view === "signUp";
     const title = isSignUp ? "Create your account" : "Welcome back";
@@ -204,21 +239,16 @@ var ModalRenderer = class {
           ${b.termsUrl && b.privacyUrl ? " \xB7 " : ""}
           ${b.privacyUrl ? `<a href="${b.privacyUrl}" target="_blank">Privacy Policy</a>` : ""}
         </div>` : "";
-    const popupWrapper = this.mode === "popup" ? `<div class="backdrop" id="backdrop"></div>` : "";
     return `
-      <style>${this.buildCSS()}</style>
-      ${popupWrapper}
-      <div class="modal-container" role="dialog" aria-modal="true">
-        ${b.logoDataUrl ? `<img src="${b.logoDataUrl}" alt="Logo" class="logo" />` : ""}
-        <h2 class="title">${title}</h2>
-        ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
-        <div class="providers">${providerButtons}</div>
-        ${divider}
-        ${emailForm}
-        <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
-        ${footer}
-        ${b.showSecuredBy !== false ? `<div class="secured-by">Secured by <span class="secured-brand">Authon</span></div>` : ""}
-      </div>
+      ${b.logoDataUrl ? `<img src="${b.logoDataUrl}" alt="Logo" class="logo" />` : ""}
+      <h2 class="title">${title}</h2>
+      ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
+      <div class="providers">${providerButtons}</div>
+      ${divider}
+      ${emailForm}
+      <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
+      ${footer}
+      ${b.showSecuredBy !== false ? `<div class="secured-by">Secured by <a href="https://authon.dev" target="_blank" rel="noopener noreferrer" class="secured-link">Authon</a></div>` : ""}
     `;
   }
   isDark() {
@@ -269,6 +299,9 @@ var ModalRenderer = class {
         position: ${this.mode === "popup" ? "fixed" : "relative"};
         ${this.mode === "popup" ? `box-shadow: 0 25px 50px -12px rgba(0,0,0,${dark ? "0.5" : "0.25"}); animation: slideIn 0.3s ease;` : ""}
       }
+      .modal-inner {
+        transition: opacity 0.14s ease, transform 0.14s ease;
+      }
       .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
       .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--authon-text); }
       .brand-name { text-align: center; font-size: 14px; color: var(--authon-muted); margin-bottom: 24px; }
@@ -327,15 +360,15 @@ var ModalRenderer = class {
       .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: var(--authon-muted); }
       .switch-view a { color: var(--authon-primary-start); text-decoration: none; font-weight: 500; }
       .switch-view a:hover { text-decoration: underline; }
-      .footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--authon-dim); }
+      .footer { text-align: center; margin-top: 12px; font-size: 12px; color: var(--authon-dim); }
       .footer a { color: var(--authon-dim); text-decoration: none; }
       .footer a:hover { text-decoration: underline; }
       .secured-by {
-        text-align: center; margin-top: 20px; padding-top: 16px;
-        border-top: 1px solid var(--authon-divider);
+        text-align: center; margin-top: 16px;
         font-size: 11px; color: var(--authon-dim);
       }
-      .secured-brand { font-weight: 600; color: var(--authon-muted); }
+      .secured-link { font-weight: 600; color: var(--authon-muted); text-decoration: none; }
+      .secured-link:hover { text-decoration: underline; }
       /* Loading overlay */
       #authon-loading-overlay {
         position: absolute; inset: 0; z-index: 10;
@@ -374,7 +407,26 @@ var ModalRenderer = class {
       ${b.customCss || ""}
     `;
   }
-  attachEvents(view) {
+  // ── Event binding ──
+  /** Attach events to shell elements (backdrop, ESC) — called once */
+  attachShellEvents() {
+    if (!this.shadowRoot) return;
+    const backdrop = this.shadowRoot.getElementById("backdrop");
+    if (backdrop) {
+      backdrop.addEventListener("click", () => this.onClose());
+    }
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+    }
+    if (this.mode === "popup") {
+      this.escHandler = (e) => {
+        if (e.key === "Escape") this.onClose();
+      };
+      document.addEventListener("keydown", this.escHandler);
+    }
+  }
+  /** Attach events to inner content (buttons, form, switch link) — called on each view */
+  attachInnerEvents(view) {
     if (!this.shadowRoot) return;
     this.shadowRoot.querySelectorAll(".provider-btn").forEach((btn) => {
       btn.addEventListener("click", () => {
@@ -401,20 +453,6 @@ var ModalRenderer = class {
         this.open(view === "signIn" ? "signUp" : "signIn");
       });
     }
-    const backdrop = this.shadowRoot.getElementById("backdrop");
-    if (backdrop) {
-      backdrop.addEventListener("click", () => this.onClose());
-    }
-    if (this.escHandler) {
-      document.removeEventListener("keydown", this.escHandler);
-      this.escHandler = null;
-    }
-    if (this.mode === "popup") {
-      this.escHandler = (e) => {
-        if (e.key === "Escape") this.onClose();
-      };
-      document.addEventListener("keydown", this.escHandler);
-    }
   }
 };
 
@@ -624,7 +662,7 @@ var Authon = class {
   async startOAuthFlow(provider) {
     try {
       const redirectUri = `${this.config.apiUrl}/v1/auth/oauth/redirect`;
-      const { url } = await this.apiGet(
+      const { url, state } = await this.apiGet(
         `/v1/auth/oauth/${provider}/url?redirectUri=${encodeURIComponent(redirectUri)}`
       );
       this.modal?.showLoading();
@@ -646,59 +684,80 @@ var Authon = class {
         this.emit("error", new Error("Popup was blocked by the browser"));
         return;
       }
-      let callbackReceived = false;
+      let resolved = false;
       let cleaned = false;
+      const resolve = (tokens) => {
+        if (resolved) return;
+        resolved = true;
+        cleanup();
+        try {
+          if (!popup.closed) popup.close();
+        } catch {
+        }
+        this.session.setSession(tokens);
+        this.modal?.close();
+        this.emit("signedIn", tokens.user);
+      };
+      const handleError = (msg) => {
+        if (resolved) return;
+        cleanup();
+        this.modal?.hideLoading();
+        this.modal?.showError(msg);
+        this.emit("error", new Error(msg));
+      };
       const cleanup = () => {
         if (cleaned) return;
         cleaned = true;
-        window.removeEventListener("message", handler);
-        if (pollTimer) clearInterval(pollTimer);
+        window.removeEventListener("message", messageHandler);
+        if (apiPollTimer) clearInterval(apiPollTimer);
+        if (closePollTimer) clearInterval(closePollTimer);
         if (maxTimer) clearTimeout(maxTimer);
       };
-      const pollTimer = setInterval(() => {
-        if (callbackReceived || cleaned) return;
+      const messageHandler = (e) => {
+        if (e.data?.type !== "authon-oauth-callback") return;
+        if (e.data.tokens) {
+          resolve(e.data.tokens);
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      const apiPollTimer = setInterval(async () => {
+        if (resolved || cleaned) return;
+        try {
+          const result = await this.apiGet(
+            `/v1/auth/oauth/poll?state=${encodeURIComponent(state)}`
+          );
+          if (result.status === "completed" && result.accessToken) {
+            resolve({
+              accessToken: result.accessToken,
+              refreshToken: result.refreshToken,
+              expiresIn: result.expiresIn,
+              user: result.user
+            });
+          } else if (result.status === "error") {
+            handleError(result.message || "Authentication failed");
+          }
+        } catch {
+        }
+      }, 1500);
+      const closePollTimer = setInterval(() => {
+        if (resolved || cleaned) return;
         try {
           if (popup.closed) {
+            clearInterval(closePollTimer);
             setTimeout(() => {
-              if (callbackReceived || cleaned) return;
+              if (resolved || cleaned) return;
               cleanup();
               this.modal?.hideLoading();
-            }, 500);
-            clearInterval(pollTimer);
+            }, 3e3);
           }
         } catch {
         }
       }, 500);
       const maxTimer = setTimeout(() => {
-        if (callbackReceived || cleaned) return;
+        if (resolved || cleaned) return;
         cleanup();
         this.modal?.hideLoading();
       }, 18e4);
-      const handler = async (e) => {
-        if (e.data?.type !== "authon-oauth-callback") return;
-        callbackReceived = true;
-        cleanup();
-        try {
-          if (!popup.closed) popup.close();
-        } catch {
-        }
-        try {
-          const tokens = await this.apiPost("/v1/auth/oauth/callback", {
-            code: e.data.code,
-            state: e.data.state,
-            provider
-          });
-          this.session.setSession(tokens);
-          this.modal?.close();
-          this.emit("signedIn", tokens.user);
-        } catch (err) {
-          this.modal?.hideLoading();
-          const msg = err instanceof Error ? err.message : String(err);
-          this.modal?.showError(msg.includes("500") ? "Authentication failed. Please try again." : msg);
-          this.emit("error", err instanceof Error ? err : new Error(msg));
-        }
-      };
-      window.addEventListener("message", handler);
     } catch (err) {
       this.modal?.hideLoading();
       this.emit("error", err instanceof Error ? err : new Error(String(err)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authon/js",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Authon core SDK — ShadowDOM login modal for any app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",