@authon/js 0.3.1 → 0.3.2

package/dist/index.cjs

@@ -149,10 +149,15 @@ var ModalRenderer = class {
   selectedWallet = "";
   overlayEmail = "";
   overlayError = "";
+  // Turnstile CAPTCHA
+  captchaSiteKey = "";
+  turnstileWidgetId = null;
+  turnstileToken = "";
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
     this.branding = { ...DEFAULT_BRANDING, ...options.branding };
+    this.captchaSiteKey = options.captchaSiteKey || "";
     this.onProviderClick = options.onProviderClick;
     this.onEmailSubmit = options.onEmailSubmit;
     this.onClose = options.onClose;
@@ -190,6 +195,11 @@ var ModalRenderer = class {
       document.removeEventListener("keydown", this.escHandler);
       this.escHandler = null;
     }
+    if (this.turnstileWidgetId !== null) {
+      window.turnstile?.remove(this.turnstileWidgetId);
+      this.turnstileWidgetId = null;
+      this.turnstileToken = "";
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -200,6 +210,15 @@ var ModalRenderer = class {
     }
     this.currentOverlay = "none";
   }
+  getTurnstileToken() {
+    return this.turnstileToken;
+  }
+  resetTurnstile() {
+    if (this.turnstileWidgetId !== null) {
+      window.turnstile?.reset(this.turnstileWidgetId);
+      this.turnstileToken = "";
+    }
+  }
   /** Update theme at runtime without destroying form state */
   setTheme(theme) {
     this.theme = theme;
@@ -398,10 +417,12 @@ 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;
@@ -458,6 +479,45 @@ var ModalRenderer = class {
       ${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>` : ""}
     `;
   }
+  renderTurnstile() {
+    if (!this.captchaSiteKey || !this.shadowRoot) return;
+    const container = this.shadowRoot.getElementById("turnstile-container");
+    if (!container) return;
+    const w = window;
+    const tryRender = () => {
+      if (!w.turnstile || !container.isConnected) return;
+      const wrapper = document.createElement("div");
+      wrapper.style.display = "flex";
+      wrapper.style.justifyContent = "center";
+      document.body.appendChild(wrapper);
+      this.turnstileWidgetId = w.turnstile.render(wrapper, {
+        sitekey: this.captchaSiteKey,
+        callback: (token) => {
+          this.turnstileToken = token;
+        },
+        "expired-callback": () => {
+          this.turnstileToken = "";
+        },
+        "error-callback": () => {
+          this.turnstileToken = "";
+        },
+        theme: this.isDark() ? "dark" : "light",
+        size: "flexible"
+      });
+      container.appendChild(wrapper);
+    };
+    if (w.turnstile) {
+      tryRender();
+    } else {
+      const interval = setInterval(() => {
+        if (w.turnstile) {
+          clearInterval(interval);
+          tryRender();
+        }
+      }, 200);
+      setTimeout(() => clearInterval(interval), 1e4);
+    }
+  }
   isDark() {
     if (this.theme === "dark") return true;
     if (this.theme === "light") return false;
@@ -1040,6 +1100,7 @@ var ModalRenderer = class {
         );
       });
     }
+    this.renderTurnstile();
     const backBtn = this.shadowRoot.getElementById("back-btn");
     if (backBtn) {
       backBtn.addEventListener("click", () => {
@@ -1567,6 +1628,8 @@ var Authon = class {
   providers = [];
   providerFlowModes = {};
   initialized = false;
+  captchaEnabled = false;
+  turnstileSiteKey = "";
   constructor(publishableKey, config) {
     this.publishableKey = publishableKey;
     this.config = {
@@ -1601,10 +1664,12 @@ var Authon = class {
     await this.ensureInitialized();
     await this.startOAuthFlow(provider, options);
   }
-  async signInWithEmail(email, password) {
+  async signInWithEmail(email, password, turnstileToken) {
+    const body = { email, password };
+    if (turnstileToken) body.turnstileToken = turnstileToken;
     const res = await this.apiPost(
       "/v1/auth/signin",
-      { email, password }
+      body
     );
     if (res.mfaRequired && res.mfaToken) {
       this.emit("mfaRequired", res.mfaToken);
@@ -1898,6 +1963,14 @@ var Authon = class {
     this.listeners.clear();
   }
   // ── Internal ──
+  loadTurnstileScript() {
+    if (typeof document === "undefined") return;
+    if (document.querySelector('script[src*="challenges.cloudflare.com/turnstile"]')) return;
+    const script = document.createElement("script");
+    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+    script.async = true;
+    document.head.appendChild(script);
+  }
   emit(event, ...args) {
     this.listeners.get(event)?.forEach((fn) => fn(...args));
   }
@@ -1909,6 +1982,11 @@ var Authon = class {
         this.apiGet("/v1/auth/providers")
       ]);
       this.branding = { ...branding, ...this.config.appearance };
+      this.captchaEnabled = !!branding.captchaEnabled;
+      this.turnstileSiteKey = branding.turnstileSiteKey || "";
+      if (this.captchaEnabled && this.turnstileSiteKey) {
+        this.loadTurnstileScript();
+      }
       this.providers = providersRes.providers;
       this.providerFlowModes = {};
       for (const provider of this.providers) {
@@ -1929,11 +2007,14 @@ var Authon = class {
         theme: this.config.theme,
         containerId: this.config.containerId,
         branding: this.branding || void 0,
+        captchaSiteKey: this.captchaEnabled ? this.turnstileSiteKey : void 0,
         onProviderClick: (provider) => this.startOAuthFlow(provider),
         onEmailSubmit: (email, password, isSignUp) => {
           this.modal?.clearError();
-          const promise = isSignUp ? this.signUpWithEmail(email, password) : this.signInWithEmail(email, password);
+          const turnstileToken = this.modal?.getTurnstileToken?.() || void 0;
+          const promise = isSignUp ? this.signUpWithEmail(email, password, { turnstileToken }) : this.signInWithEmail(email, password, turnstileToken);
           promise.then(() => this.modal?.close()).catch((err) => {
+            this.modal?.resetTurnstile?.();
             const msg = err instanceof Error ? err.message : String(err);
             this.modal?.showError(msg || "Authentication failed");
             this.emit("error", err instanceof Error ? err : new Error(msg));