@authon/js 0.3.5 → 0.4.1

package/dist/index.cjs

@@ -129,6 +129,7 @@ var ModalRenderer = class {
   shadowRoot = null;
   hostElement = null;
   containerElement = null;
+  containerId = null;
   mode;
   theme;
   branding;
@@ -154,11 +155,16 @@ var ModalRenderer = class {
   turnstileWidgetId = null;
   turnstileToken = "";
   turnstileWrapper = null;
+  // Dev Teleport (test mode)
+  isTestMode = false;
+  onDevTeleport = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
     this.branding = { ...DEFAULT_BRANDING, ...options.branding };
     this.captchaSiteKey = options.captchaSiteKey || "";
+    this.isTestMode = options.isTestMode || false;
+    this.onDevTeleport = options.onDevTeleport || null;
     this.onProviderClick = options.onProviderClick;
     this.onEmailSubmit = options.onEmailSubmit;
     this.onClose = options.onClose;
@@ -171,9 +177,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 +198,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 +232,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 +400,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);
@@ -479,6 +508,16 @@ var ModalRenderer = class {
       ${authMethods}
       <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
       ${footer}
+      ${this.isTestMode ? `<div class="dev-teleport">
+        <div class="dev-teleport-label">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+          Dev Teleport
+        </div>
+        <div class="dev-teleport-row">
+          <input type="email" placeholder="test@example.com" id="dev-teleport-email" class="dev-teleport-input" value="dev@test.com" />
+          <button type="button" id="dev-teleport-btn" class="dev-teleport-btn">Go</button>
+        </div>
+      </div>` : ""}
       ${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>` : ""}
     `;
   }
@@ -655,6 +694,34 @@ var ModalRenderer = class {
       .secured-link { font-weight: 600; color: var(--authon-muted); text-decoration: none; }
       .secured-link:hover { text-decoration: underline; }
 
+      /* Dev Teleport */
+      .dev-teleport {
+        margin-top: 12px; padding: 10px;
+        border-radius: calc(var(--authon-radius) * 0.5);
+        background: rgba(251,191,36,0.06);
+        border: 1px dashed rgba(251,191,36,0.25);
+      }
+      .dev-teleport-label {
+        display: flex; align-items: center; gap: 4px;
+        font-size: 10px; font-weight: 600; color: #fbbf24;
+        margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em;
+      }
+      .dev-teleport-row { display: flex; gap: 6px; }
+      .dev-teleport-input {
+        flex: 1; padding: 6px 10px; font-size: 12px;
+        border-radius: calc(var(--authon-radius) * 0.4);
+        background: rgba(0,0,0,0.2); border: 1px solid rgba(251,191,36,0.2);
+        color: #fbbf24; outline: none; font-family: ui-monospace, monospace;
+      }
+      .dev-teleport-input:focus { border-color: rgba(251,191,36,0.5); }
+      .dev-teleport-btn {
+        padding: 6px 14px; font-size: 11px; font-weight: 700;
+        border-radius: calc(var(--authon-radius) * 0.4);
+        background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.3);
+        color: #fbbf24; cursor: pointer;
+      }
+      .dev-teleport-btn:hover { background: rgba(251,191,36,0.25); }
+
       /* Auth method buttons */
       .auth-methods { display: flex; flex-direction: column; gap: 8px; }
       .auth-method-btn {
@@ -1100,6 +1167,21 @@ var ModalRenderer = class {
       });
     }
     this.renderTurnstile();
+    const devTeleportBtn = this.shadowRoot.getElementById("dev-teleport-btn");
+    const devTeleportEmail = this.shadowRoot.getElementById("dev-teleport-email");
+    if (devTeleportBtn && devTeleportEmail && this.onDevTeleport) {
+      const handler = this.onDevTeleport;
+      devTeleportBtn.addEventListener("click", () => {
+        const email = devTeleportEmail.value.trim();
+        if (email) handler(email);
+      });
+      devTeleportEmail.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          const email = devTeleportEmail.value.trim();
+          if (email) handler(email);
+        }
+      });
+    }
     const backBtn = this.shadowRoot.getElementById("back-btn");
     if (backBtn) {
       backBtn.addEventListener("click", () => {
@@ -1136,9 +1218,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;
@@ -1150,6 +1265,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);
     }
@@ -1161,6 +1277,7 @@ var SessionManager = class {
     this.accessToken = null;
     this.refreshToken = null;
     this.user = null;
+    this.persistToStorage();
     if (this.refreshTimer) {
       clearTimeout(this.refreshTimer);
       this.refreshTimer = null;
@@ -1956,6 +2073,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();
@@ -2007,6 +2136,17 @@ var Authon = class {
         containerId: this.config.containerId,
         branding: this.branding || void 0,
         captchaSiteKey: this.captchaEnabled ? this.turnstileSiteKey : void 0,
+        isTestMode: this.publishableKey.startsWith("pk_test_"),
+        onDevTeleport: this.publishableKey.startsWith("pk_test_") ? async (email) => {
+          this.modal?.clearError();
+          try {
+            await this.testing.signIn({ email });
+            this.modal?.close();
+          } catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            this.modal?.showError(msg || "Dev teleport failed");
+          }
+        } : void 0,
         onProviderClick: (provider) => this.startOAuthFlow(provider),
         onEmailSubmit: (email, password, isSignUp) => {
           this.modal?.clearError();