@authon/js 0.1.10 → 0.1.12

package/dist/index.js

@@ -97,9 +97,11 @@ var ModalRenderer = class {
   theme;
   branding;
   enabledProviders = [];
+  currentView = "signIn";
   onProviderClick;
   onEmailSubmit;
   onClose;
+  escHandler = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
@@ -118,10 +120,18 @@ var ModalRenderer = class {
     this.branding = { ...DEFAULT_BRANDING, ...branding };
   }
   open(view = "signIn") {
-    this.close();
-    this.render(view);
+    if (this.shadowRoot && this.hostElement) {
+      this.switchView(view);
+    } else {
+      this.currentView = view;
+      this.render(view);
+    }
   }
   close() {
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+      this.escHandler = null;
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -143,6 +153,21 @@ var ModalRenderer = class {
       errorEl.appendChild(errDiv);
     }
   }
+  showBanner(message, type = "error") {
+    if (!this.shadowRoot) return;
+    this.clearBanner();
+    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;
+    inner.insertBefore(banner, inner.firstChild);
+  }
+  clearBanner() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-banner")?.remove();
+  }
   clearError() {
     if (!this.shadowRoot) return;
     this.shadowRoot.getElementById("authon-error-msg")?.remove();
@@ -166,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", "");
@@ -176,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";
@@ -198,8 +257,8 @@ var ModalRenderer = class {
     }).join("");
     const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
     const emailForm = b.showEmailPassword !== false ? `<form class="email-form" id="email-form">
-          <input type="email" placeholder="Email address" name="email" required class="input" />
-          <input type="password" placeholder="Password" name="password" required class="input" />
+          <input type="email" placeholder="Email address" name="email" required class="input" autocomplete="email" />
+          <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -207,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() {
@@ -272,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; }
@@ -320,18 +377,25 @@ var ModalRenderer = class {
         font-size: 13px; color: #ef4444; text-align: center;
         animation: fadeIn 0.15s ease;
       }
+      .banner-warning {
+        margin-bottom: 16px; padding: 10px 14px;
+        background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 13px; color: #f59e0b; text-align: center;
+        animation: fadeIn 0.15s ease;
+      }
       .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;
@@ -370,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", () => {
@@ -397,19 +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.mode === "popup") {
-      const handler = (e) => {
-        if (e.key === "Escape") {
-          this.onClose();
-          document.removeEventListener("keydown", handler);
-        }
-      };
-      document.addEventListener("keydown", handler);
-    }
   }
 };
 
@@ -619,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();
@@ -632,54 +702,89 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
-      let callbackReceived = false;
+      if (!popup || popup.closed) {
+        this.modal?.hideLoading();
+        this.modal?.showBanner(
+          "Pop-up blocked. Please allow pop-ups for this site and try again.",
+          "warning"
+        );
+        this.emit("error", new Error("Popup was blocked by the browser"));
+        return;
+      }
+      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);
-        window.removeEventListener("focus", focusHandler);
+        window.removeEventListener("message", messageHandler);
+        if (apiPollTimer) clearInterval(apiPollTimer);
+        if (closePollTimer) clearInterval(closePollTimer);
         if (maxTimer) clearTimeout(maxTimer);
       };
-      const focusHandler = () => {
-        if (callbackReceived || cleaned) return;
-        setTimeout(() => {
-          if (callbackReceived || cleaned) return;
-          cleanup();
-          this.modal?.hideLoading();
-        }, 1500);
+      const messageHandler = (e) => {
+        if (e.data?.type !== "authon-oauth-callback") return;
+        if (e.data.tokens) {
+          resolve(e.data.tokens);
+        }
       };
-      window.addEventListener("focus", focusHandler);
+      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 (resolved || cleaned) return;
+              cleanup();
+              this.modal?.hideLoading();
+            }, 3e3);
+          }
+        } catch {
+        }
+      }, 500);
       const maxTimer = setTimeout(() => {
-        if (callbackReceived || cleaned) return;
+        if (resolved || cleaned) return;
         cleanup();
         this.modal?.hideLoading();
       }, 18e4);
-      if (!popup) {
-        cleanup();
-        this.modal?.hideLoading();
-        this.emit("error", new Error("Popup was blocked by the browser"));
-        return;
-      }
-      const handler = async (e) => {
-        if (e.data?.type !== "authon-oauth-callback") return;
-        callbackReceived = true;
-        cleanup();
-        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();
-          this.emit("error", err instanceof Error ? err : new Error(String(err)));
-        }
-      };
-      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,9 +70,11 @@ var ModalRenderer = class {
   theme;
   branding;
   enabledProviders = [];
+  currentView = "signIn";
   onProviderClick;
   onEmailSubmit;
   onClose;
+  escHandler = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
@@ -91,10 +93,18 @@ var ModalRenderer = class {
     this.branding = { ...DEFAULT_BRANDING, ...branding };
   }
   open(view = "signIn") {
-    this.close();
-    this.render(view);
+    if (this.shadowRoot && this.hostElement) {
+      this.switchView(view);
+    } else {
+      this.currentView = view;
+      this.render(view);
+    }
   }
   close() {
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+      this.escHandler = null;
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -116,6 +126,21 @@ var ModalRenderer = class {
       errorEl.appendChild(errDiv);
     }
   }
+  showBanner(message, type = "error") {
+    if (!this.shadowRoot) return;
+    this.clearBanner();
+    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;
+    inner.insertBefore(banner, inner.firstChild);
+  }
+  clearBanner() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-banner")?.remove();
+  }
   clearError() {
     if (!this.shadowRoot) return;
     this.shadowRoot.getElementById("authon-error-msg")?.remove();
@@ -139,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", "");
@@ -149,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";
@@ -171,8 +230,8 @@ var ModalRenderer = class {
     }).join("");
     const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
     const emailForm = b.showEmailPassword !== false ? `<form class="email-form" id="email-form">
-          <input type="email" placeholder="Email address" name="email" required class="input" />
-          <input type="password" placeholder="Password" name="password" required class="input" />
+          <input type="email" placeholder="Email address" name="email" required class="input" autocomplete="email" />
+          <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -180,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() {
@@ -245,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; }
@@ -293,18 +350,25 @@ var ModalRenderer = class {
         font-size: 13px; color: #ef4444; text-align: center;
         animation: fadeIn 0.15s ease;
       }
+      .banner-warning {
+        margin-bottom: 16px; padding: 10px 14px;
+        background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 13px; color: #f59e0b; text-align: center;
+        animation: fadeIn 0.15s ease;
+      }
       .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;
@@ -343,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", () => {
@@ -370,19 +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.mode === "popup") {
-      const handler = (e) => {
-        if (e.key === "Escape") {
-          this.onClose();
-          document.removeEventListener("keydown", handler);
-        }
-      };
-      document.addEventListener("keydown", handler);
-    }
   }
 };
 
@@ -592,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();
@@ -605,54 +675,89 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
-      let callbackReceived = false;
+      if (!popup || popup.closed) {
+        this.modal?.hideLoading();
+        this.modal?.showBanner(
+          "Pop-up blocked. Please allow pop-ups for this site and try again.",
+          "warning"
+        );
+        this.emit("error", new Error("Popup was blocked by the browser"));
+        return;
+      }
+      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);
-        window.removeEventListener("focus", focusHandler);
+        window.removeEventListener("message", messageHandler);
+        if (apiPollTimer) clearInterval(apiPollTimer);
+        if (closePollTimer) clearInterval(closePollTimer);
         if (maxTimer) clearTimeout(maxTimer);
       };
-      const focusHandler = () => {
-        if (callbackReceived || cleaned) return;
-        setTimeout(() => {
-          if (callbackReceived || cleaned) return;
-          cleanup();
-          this.modal?.hideLoading();
-        }, 1500);
+      const messageHandler = (e) => {
+        if (e.data?.type !== "authon-oauth-callback") return;
+        if (e.data.tokens) {
+          resolve(e.data.tokens);
+        }
       };
-      window.addEventListener("focus", focusHandler);
+      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 (resolved || cleaned) return;
+              cleanup();
+              this.modal?.hideLoading();
+            }, 3e3);
+          }
+        } catch {
+        }
+      }, 500);
       const maxTimer = setTimeout(() => {
-        if (callbackReceived || cleaned) return;
+        if (resolved || cleaned) return;
         cleanup();
         this.modal?.hideLoading();
       }, 18e4);
-      if (!popup) {
-        cleanup();
-        this.modal?.hideLoading();
-        this.emit("error", new Error("Popup was blocked by the browser"));
-        return;
-      }
-      const handler = async (e) => {
-        if (e.data?.type !== "authon-oauth-callback") return;
-        callbackReceived = true;
-        cleanup();
-        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();
-          this.emit("error", err instanceof Error ? err : new Error(String(err)));
-        }
-      };
-      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.10",
+  "version": "0.1.12",
   "description": "Authon core SDK — ShadowDOM login modal for any app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",