@authon/js 0.3.4 → 0.4.0

package/dist/index.cjs

@@ -129,6 +129,7 @@ var ModalRenderer = class {
   shadowRoot = null;
   hostElement = null;
   containerElement = null;
+  containerId = null;
   mode;
   theme;
   branding;
@@ -171,9 +172,20 @@ var ModalRenderer = class {
     this.onPasskeyClick = options.onPasskeyClick || (() => {
     });
     if (options.mode === "embedded" && options.containerId) {
-      this.containerElement = document.getElementById(options.containerId);
+      this.containerId = options.containerId;
     }
   }
+  resolveContainerElement() {
+    if (this.mode !== "embedded" || !this.containerId) return null;
+    const next = document.getElementById(this.containerId);
+    if (this.containerElement !== next) {
+      this.hostElement?.remove();
+      this.hostElement = null;
+      this.shadowRoot = null;
+    }
+    this.containerElement = next;
+    return next;
+  }
   setProviders(providers) {
     this.enabledProviders = providers;
   }
@@ -181,6 +193,11 @@ var ModalRenderer = class {
     this.branding = { ...DEFAULT_BRANDING, ...branding };
   }
   open(view = "signIn") {
+    this.resolveContainerElement();
+    if (this.hostElement && !this.hostElement.isConnected) {
+      this.hostElement = null;
+      this.shadowRoot = null;
+    }
     if (this.shadowRoot && this.hostElement) {
       this.hideOverlay();
       this.switchView(view);
@@ -210,8 +227,9 @@ var ModalRenderer = class {
       this.hostElement = null;
       this.shadowRoot = null;
     }
-    if (this.containerElement) {
-      this.containerElement.innerHTML = "";
+    const liveContainer = this.resolveContainerElement();
+    if (liveContainer) {
+      liveContainer.replaceChildren();
     }
     this.currentOverlay = "none";
   }
@@ -377,8 +395,14 @@ var ModalRenderer = class {
     this.hostElement = host;
     if (this.mode === "popup") {
       document.body.appendChild(host);
-    } else if (this.containerElement) {
-      this.containerElement.appendChild(host);
+    } else {
+      const container = this.resolveContainerElement();
+      if (!container) {
+        this.hostElement = null;
+        throw new Error(`Authon container "#${this.containerId}" not found`);
+      }
+      container.replaceChildren();
+      container.appendChild(host);
     }
     this.shadowRoot = host.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.buildShell(view);
@@ -422,12 +446,10 @@ var ModalRenderer = class {
             </button>`;
     }).join("") : "";
     const divider = showProviders && b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
-    const captchaContainer = this.captchaSiteKey ? '<div id="turnstile-container" style="display:flex;justify-content:center;margin:4px 0"></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>' : ""}
-          ${captchaContainer}
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const hasMethodAbove = showProviders && this.enabledProviders.length > 0 || b.showEmailPassword !== false;
@@ -485,28 +507,13 @@ var ModalRenderer = class {
     `;
   }
   renderTurnstile() {
-    if (!this.captchaSiteKey || !this.shadowRoot) return;
-    const anchor = this.shadowRoot.getElementById("turnstile-container");
-    if (!anchor) return;
+    if (!this.captchaSiteKey) return;
     const w = window;
-    const positionWrapper = () => {
-      if (!this.turnstileWrapper || !anchor.isConnected) return;
-      const rect = anchor.getBoundingClientRect();
-      Object.assign(this.turnstileWrapper.style, {
-        position: "fixed",
-        top: `${rect.top}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        zIndex: "2147483647",
-        display: "flex",
-        justifyContent: "center"
-      });
-    };
     const tryRender = () => {
-      if (!w.turnstile || !anchor.isConnected) return;
+      if (!w.turnstile) return;
       this.turnstileWrapper = document.createElement("div");
+      this.turnstileWrapper.style.cssText = "position:fixed;bottom:10px;right:10px;z-index:2147483647;";
       document.body.appendChild(this.turnstileWrapper);
-      positionWrapper();
       this.turnstileWidgetId = w.turnstile.render(this.turnstileWrapper, {
         sitekey: this.captchaSiteKey,
         callback: (token) => {
@@ -519,10 +526,8 @@ var ModalRenderer = class {
           this.turnstileToken = "";
         },
         theme: this.isDark() ? "dark" : "light",
-        size: "flexible"
+        appearance: "interaction-only"
       });
-      window.addEventListener("scroll", positionWrapper, { passive: true });
-      window.addEventListener("resize", positionWrapper, { passive: true });
     };
     if (w.turnstile) {
       tryRender();
@@ -1155,9 +1160,42 @@ var SessionManager = class {
   refreshTimer = null;
   apiUrl;
   publishableKey;
+  storageKey;
   constructor(publishableKey, apiUrl) {
     this.publishableKey = publishableKey;
     this.apiUrl = apiUrl;
+    this.storageKey = `authon_session_${publishableKey.slice(0, 16)}`;
+    this.restoreFromStorage();
+  }
+  restoreFromStorage() {
+    if (typeof window === "undefined") return;
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      if (!stored) return;
+      const data = JSON.parse(stored);
+      if (data.accessToken && data.refreshToken && data.user) {
+        this.accessToken = data.accessToken;
+        this.refreshToken = data.refreshToken;
+        this.user = data.user;
+        this.scheduleRefresh(5);
+      }
+    } catch {
+    }
+  }
+  persistToStorage() {
+    if (typeof window === "undefined") return;
+    try {
+      if (this.accessToken && this.refreshToken && this.user) {
+        localStorage.setItem(this.storageKey, JSON.stringify({
+          accessToken: this.accessToken,
+          refreshToken: this.refreshToken,
+          user: this.user
+        }));
+      } else {
+        localStorage.removeItem(this.storageKey);
+      }
+    } catch {
+    }
   }
   getToken() {
     return this.accessToken;
@@ -1169,6 +1207,7 @@ var SessionManager = class {
     this.accessToken = tokens.accessToken;
     this.refreshToken = tokens.refreshToken;
     this.user = tokens.user;
+    this.persistToStorage();
     if (tokens.expiresIn && tokens.expiresIn > 0) {
       this.scheduleRefresh(tokens.expiresIn);
     }
@@ -1180,6 +1219,7 @@ var SessionManager = class {
     this.accessToken = null;
     this.refreshToken = null;
     this.user = null;
+    this.persistToStorage();
     if (this.refreshTimer) {
       clearTimeout(this.refreshTimer);
       this.refreshTimer = null;
@@ -1975,6 +2015,18 @@ var Authon = class {
       await this.apiPostAuth(`/v1/auth/organizations/${orgId}/leave`, void 0, token);
     }
   };
+  /** Testing utilities — only available when initialized with a pk_test_ key */
+  get testing() {
+    if (!this.publishableKey.startsWith("pk_test_")) return void 0;
+    return {
+      signIn: async (params) => {
+        const res = await this.apiPost("/v1/auth/testing/token", params);
+        this.session.setSession(res);
+        this.emit("signedIn", res.user);
+        return res.user;
+      }
+    };
+  }
   destroy() {
     this.modal?.close();
     this.session.destroy();