@authon/js 0.1.11 → 0.1.13

package/dist/index.d.mts

@@ -44,6 +44,7 @@ declare class Authon {
     private startOAuthFlow;
     private apiGet;
     private apiPost;
+    private parseApiError;
 }
 
 interface ProviderButtonConfig {

package/dist/index.d.ts

@@ -44,6 +44,7 @@ declare class Authon {
     private startOAuthFlow;
     private apiGet;
     private apiPost;
+    private parseApiError;
 }
 
 interface ProviderButtonConfig {

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,30 +219,48 @@ 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";
     const subtitle = isSignUp ? "Already have an account?" : "Don't have an account?";
     const subtitleLink = isSignUp ? "Sign in" : "Sign up";
     const dark = this.isDark();
-    const providerButtons = this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
+    const showProviders = !isSignUp;
+    const providerButtons = showProviders ? this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
       const config = getProviderButtonConfig(p);
       const isWhiteBg = config.bgColor === "#ffffff";
       const btnBg = dark && isWhiteBg ? "#f8fafc" : config.bgColor;
       const btnBorder = isWhiteBg ? dark ? "#475569" : "#e5e7eb" : config.bgColor;
       return `<button class="provider-btn" data-provider="${p}" style="background:${btnBg};color:${config.textColor};border:1px solid ${btnBorder}">
-          <span class="provider-icon">${config.iconSvg}</span>
-          <span>${config.label}</span>
-        </button>`;
-    }).join("");
-    const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
+              <span class="provider-icon">${config.iconSvg}</span>
+              <span>${config.label}</span>
+            </button>`;
+    }).join("") : "";
+    const divider = showProviders && 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" autocomplete="email" />
           <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
+          ${isSignUp ? '<p class="password-hint">Must contain uppercase, lowercase, and a number (min 8 chars)</p>' : ""}
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -231,21 +268,22 @@ 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>` : "";
+    const titleHtml = isSignUp ? `<div class="title-row">
+          <button class="back-btn" id="back-btn" type="button" aria-label="Back to sign in">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
+          </button>
+          <h2 class="title">${title}</h2>
+        </div>` : `<h2 class="title">${title}</h2>`;
     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" />` : ""}
+      ${titleHtml}
+      ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
+      ${showProviders ? `<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,7 +334,20 @@ 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-row { display: flex; align-items: center; position: relative; margin-bottom: 8px; }
+      .title-row .title { flex: 1; margin-bottom: 0; }
+      .back-btn {
+        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+        background: none; border: none; color: var(--authon-muted);
+        cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
+        transition: color 0.15s, background 0.15s;
+      }
+      .back-btn:hover { color: var(--authon-text); background: var(--authon-divider); }
+      .password-hint { font-size: 11px; color: var(--authon-dim); margin: -4px 0 2px; }
       .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; }
       .providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
@@ -354,15 +405,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 +452,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", () => {
@@ -421,6 +491,12 @@ var ModalRenderer = class {
         );
       });
     }
+    const backBtn = this.shadowRoot.getElementById("back-btn");
+    if (backBtn) {
+      backBtn.addEventListener("click", () => {
+        this.open("signIn");
+      });
+    }
     const switchLink = this.shadowRoot.getElementById("switch-link");
     if (switchLink) {
       switchLink.addEventListener("click", (e) => {
@@ -428,20 +504,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);
-    }
   }
 };
 
@@ -636,8 +698,7 @@ var Authon = class {
           const promise = isSignUp ? this.signUpWithEmail(email, password) : this.signInWithEmail(email, password);
           promise.then(() => this.modal?.close()).catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
-            const friendlyMsg = msg.includes("401") ? "Invalid email or password" : msg.includes("409") ? "Email already in use" : msg.includes("400") ? "Please check your input" : msg || "Authentication failed";
-            this.modal?.showError(friendlyMsg);
+            this.modal?.showError(msg || "Authentication failed");
             this.emit("error", err instanceof Error ? err : new Error(msg));
           });
         },
@@ -651,7 +712,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 +734,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)));
@@ -736,7 +818,7 @@ var Authon = class {
       headers: { "x-api-key": this.publishableKey },
       credentials: "include"
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
   async apiPost(path, body) {
@@ -749,9 +831,22 @@ var Authon = class {
       credentials: "include",
       body: body ? JSON.stringify(body) : void 0
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
+  async parseApiError(res, path) {
+    try {
+      const body = await res.json();
+      if (Array.isArray(body.message) && body.message.length > 0) {
+        return body.message[0];
+      }
+      if (typeof body.message === "string" && body.message !== "Bad Request") {
+        return body.message;
+      }
+    } catch {
+    }
+    return `API ${path}: ${res.status}`;
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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,30 +192,48 @@ 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";
     const subtitle = isSignUp ? "Already have an account?" : "Don't have an account?";
     const subtitleLink = isSignUp ? "Sign in" : "Sign up";
     const dark = this.isDark();
-    const providerButtons = this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
+    const showProviders = !isSignUp;
+    const providerButtons = showProviders ? this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
       const config = getProviderButtonConfig(p);
       const isWhiteBg = config.bgColor === "#ffffff";
       const btnBg = dark && isWhiteBg ? "#f8fafc" : config.bgColor;
       const btnBorder = isWhiteBg ? dark ? "#475569" : "#e5e7eb" : config.bgColor;
       return `<button class="provider-btn" data-provider="${p}" style="background:${btnBg};color:${config.textColor};border:1px solid ${btnBorder}">
-          <span class="provider-icon">${config.iconSvg}</span>
-          <span>${config.label}</span>
-        </button>`;
-    }).join("");
-    const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
+              <span class="provider-icon">${config.iconSvg}</span>
+              <span>${config.label}</span>
+            </button>`;
+    }).join("") : "";
+    const divider = showProviders && 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" autocomplete="email" />
           <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
+          ${isSignUp ? '<p class="password-hint">Must contain uppercase, lowercase, and a number (min 8 chars)</p>' : ""}
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -204,21 +241,22 @@ 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>` : "";
+    const titleHtml = isSignUp ? `<div class="title-row">
+          <button class="back-btn" id="back-btn" type="button" aria-label="Back to sign in">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
+          </button>
+          <h2 class="title">${title}</h2>
+        </div>` : `<h2 class="title">${title}</h2>`;
     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" />` : ""}
+      ${titleHtml}
+      ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
+      ${showProviders ? `<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,7 +307,20 @@ 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-row { display: flex; align-items: center; position: relative; margin-bottom: 8px; }
+      .title-row .title { flex: 1; margin-bottom: 0; }
+      .back-btn {
+        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+        background: none; border: none; color: var(--authon-muted);
+        cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
+        transition: color 0.15s, background 0.15s;
+      }
+      .back-btn:hover { color: var(--authon-text); background: var(--authon-divider); }
+      .password-hint { font-size: 11px; color: var(--authon-dim); margin: -4px 0 2px; }
       .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; }
       .providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
@@ -327,15 +378,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 +425,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", () => {
@@ -394,6 +464,12 @@ var ModalRenderer = class {
         );
       });
     }
+    const backBtn = this.shadowRoot.getElementById("back-btn");
+    if (backBtn) {
+      backBtn.addEventListener("click", () => {
+        this.open("signIn");
+      });
+    }
     const switchLink = this.shadowRoot.getElementById("switch-link");
     if (switchLink) {
       switchLink.addEventListener("click", (e) => {
@@ -401,20 +477,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);
-    }
   }
 };
 
@@ -609,8 +671,7 @@ var Authon = class {
           const promise = isSignUp ? this.signUpWithEmail(email, password) : this.signInWithEmail(email, password);
           promise.then(() => this.modal?.close()).catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
-            const friendlyMsg = msg.includes("401") ? "Invalid email or password" : msg.includes("409") ? "Email already in use" : msg.includes("400") ? "Please check your input" : msg || "Authentication failed";
-            this.modal?.showError(friendlyMsg);
+            this.modal?.showError(msg || "Authentication failed");
             this.emit("error", err instanceof Error ? err : new Error(msg));
           });
         },
@@ -624,7 +685,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 +707,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)));
@@ -709,7 +791,7 @@ var Authon = class {
       headers: { "x-api-key": this.publishableKey },
       credentials: "include"
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
   async apiPost(path, body) {
@@ -722,9 +804,22 @@ var Authon = class {
       credentials: "include",
       body: body ? JSON.stringify(body) : void 0
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
+  async parseApiError(res, path) {
+    try {
+      const body = await res.json();
+      if (Array.isArray(body.message) && body.message.length > 0) {
+        return body.message[0];
+      }
+      if (typeof body.message === "string" && body.message !== "Bad Request") {
+        return body.message;
+      }
+    } catch {
+    }
+    return `API ${path}: ${res.status}`;
+  }
 };
 export {
   Authon,

package/package.json

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