@authon/js 0.3.1 → 0.3.3

package/dist/index.d.cts

@@ -37,6 +37,8 @@ declare class Authon {
     private providers;
     private providerFlowModes;
     private initialized;
+    private captchaEnabled;
+    private turnstileSiteKey;
     constructor(publishableKey: string, config?: AuthonConfig);
     getProviders(): Promise<OAuthProviderType[]>;
     openSignIn(): Promise<void>;
@@ -44,9 +46,10 @@ declare class Authon {
     /** Update theme at runtime without destroying form state */
     setTheme(theme: 'light' | 'dark' | 'auto'): void;
     signInWithOAuth(provider: OAuthProviderType, options?: OAuthSignInOptions): Promise<void>;
-    signInWithEmail(email: string, password: string): Promise<AuthonUser>;
+    signInWithEmail(email: string, password: string, turnstileToken?: string): Promise<AuthonUser>;
     signUpWithEmail(email: string, password: string, meta?: {
         displayName?: string;
+        turnstileToken?: string;
     }): Promise<AuthonUser>;
     signOut(): Promise<void>;
     getUser(): AuthonUser | null;
@@ -108,6 +111,7 @@ declare class Authon {
         leave: (orgId: string) => Promise<void>;
     };
     destroy(): void;
+    private loadTurnstileScript;
     private emit;
     private ensureInitialized;
     private getModal;

package/dist/index.d.ts

@@ -37,6 +37,8 @@ declare class Authon {
     private providers;
     private providerFlowModes;
     private initialized;
+    private captchaEnabled;
+    private turnstileSiteKey;
     constructor(publishableKey: string, config?: AuthonConfig);
     getProviders(): Promise<OAuthProviderType[]>;
     openSignIn(): Promise<void>;
@@ -44,9 +46,10 @@ declare class Authon {
     /** Update theme at runtime without destroying form state */
     setTheme(theme: 'light' | 'dark' | 'auto'): void;
     signInWithOAuth(provider: OAuthProviderType, options?: OAuthSignInOptions): Promise<void>;
-    signInWithEmail(email: string, password: string): Promise<AuthonUser>;
+    signInWithEmail(email: string, password: string, turnstileToken?: string): Promise<AuthonUser>;
     signUpWithEmail(email: string, password: string, meta?: {
         displayName?: string;
+        turnstileToken?: string;
     }): Promise<AuthonUser>;
     signOut(): Promise<void>;
     getUser(): AuthonUser | null;
@@ -108,6 +111,7 @@ declare class Authon {
         leave: (orgId: string) => Promise<void>;
     };
     destroy(): void;
+    private loadTurnstileScript;
     private emit;
     private ensureInitialized;
     private getModal;

package/dist/index.js

@@ -120,10 +120,16 @@ var ModalRenderer = class {
   selectedWallet = "";
   overlayEmail = "";
   overlayError = "";
+  // Turnstile CAPTCHA
+  captchaSiteKey = "";
+  turnstileWidgetId = null;
+  turnstileToken = "";
+  turnstileWrapper = null;
   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;
@@ -161,6 +167,15 @@ 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.turnstileWrapper) {
+      this.turnstileWrapper.remove();
+      this.turnstileWrapper = null;
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -171,6 +186,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;
@@ -369,10 +393,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;
@@ -429,6 +455,58 @@ 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 anchor = this.shadowRoot.getElementById("turnstile-container");
+    if (!anchor) 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;
+      this.turnstileWrapper = document.createElement("div");
+      document.body.appendChild(this.turnstileWrapper);
+      positionWrapper();
+      this.turnstileWidgetId = w.turnstile.render(this.turnstileWrapper, {
+        sitekey: this.captchaSiteKey,
+        callback: (token) => {
+          this.turnstileToken = token;
+        },
+        "expired-callback": () => {
+          this.turnstileToken = "";
+        },
+        "error-callback": () => {
+          this.turnstileToken = "";
+        },
+        theme: this.isDark() ? "dark" : "light",
+        size: "flexible"
+      });
+      window.addEventListener("scroll", positionWrapper, { passive: true });
+      window.addEventListener("resize", positionWrapper, { passive: true });
+    };
+    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;
@@ -1011,6 +1089,7 @@ var ModalRenderer = class {
         );
       });
     }
+    this.renderTurnstile();
     const backBtn = this.shadowRoot.getElementById("back-btn");
     if (backBtn) {
       backBtn.addEventListener("click", () => {
@@ -1538,6 +1617,8 @@ var Authon = class {
   providers = [];
   providerFlowModes = {};
   initialized = false;
+  captchaEnabled = false;
+  turnstileSiteKey = "";
   constructor(publishableKey, config) {
     this.publishableKey = publishableKey;
     this.config = {
@@ -1572,10 +1653,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);
@@ -1869,6 +1952,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));
   }
@@ -1880,6 +1971,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) {
@@ -1900,11 +1996,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));