@authagonal/login 0.3.7 → 0.3.8

package/dist/types.d.ts

@@ -28,6 +28,8 @@ export interface ExternalProvider {
 }
 export interface ProvidersResponse {
     providers: ExternalProvider[];
+    /** Cloudflare Turnstile site key when configured; absent = Turnstile disabled (render no widget). */
+    turnstileSiteKey?: string;
 }
 export interface PasswordPolicyRule {
     rule: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authagonal/login",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Default login UI for Authagonal — runtime-configurable via branding.json",
   "type": "module",
   "license": "MIT",

package/src/api.ts

@@ -45,18 +45,18 @@ function setupTokenHeaders(token?: string): Record<string, string> {
   return token ? { 'X-MFA-Setup-Token': token } : {};
 }
 
-export function login(email: string, password: string, returnUrl?: string): Promise<MfaLoginResponse> {
+export function login(email: string, password: string, returnUrl?: string, turnstileToken?: string): Promise<MfaLoginResponse> {
   const url = returnUrl ? `/api/auth/login?returnUrl=${encodeURIComponent(returnUrl)}` : '/api/auth/login';
   return api<MfaLoginResponse>(url, {
     method: 'POST',
-    body: JSON.stringify({ email, password }),
+    body: JSON.stringify({ email, password, turnstileToken }),
   });
 }
 
-export function register(email: string, password: string, firstName?: string, lastName?: string): Promise<RegisterResponse> {
+export function register(email: string, password: string, firstName?: string, lastName?: string, turnstileToken?: string): Promise<RegisterResponse> {
   return api<RegisterResponse>('/api/auth/register', {
     method: 'POST',
-    body: JSON.stringify({ email, password, firstName, lastName }),
+    body: JSON.stringify({ email, password, firstName, lastName, turnstileToken }),
   });
 }
 

package/src/components/Turnstile.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+
+// Cloudflare Turnstile ("I'm human"). Renders the managed widget and reports the
+// token via onToken. Only mount this when a site key is configured (opt-in) — the
+// server returns turnstileSiteKey on /api/auth/providers when Turnstile is enabled.
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    turnstile?: any;
+  }
+}
+
+const SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+let scriptPromise: Promise<void> | null = null;
+
+function loadTurnstileScript(): Promise<void> {
+  if (typeof window !== 'undefined' && window.turnstile) return Promise.resolve();
+  if (scriptPromise) return scriptPromise;
+  scriptPromise = new Promise<void>((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = SCRIPT_SRC;
+    s.async = true;
+    s.defer = true;
+    s.onload = () => resolve();
+    s.onerror = () => {
+      scriptPromise = null;
+      reject(new Error('Failed to load Cloudflare Turnstile'));
+    };
+    document.head.appendChild(s);
+  });
+  return scriptPromise;
+}
+
+interface TurnstileProps {
+  siteKey: string;
+  /** Called with the token on success, or null when it expires / errors / is reset. */
+  onToken: (token: string | null) => void;
+  theme?: 'auto' | 'light' | 'dark';
+}
+
+export function Turnstile({ siteKey, onToken, theme = 'auto' }: TurnstileProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const widgetIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadTurnstileScript()
+      .then(() => {
+        if (cancelled || !containerRef.current || !window.turnstile) return;
+        widgetIdRef.current = window.turnstile.render(containerRef.current, {
+          sitekey: siteKey,
+          theme,
+          callback: (token: string) => onToken(token),
+          'expired-callback': () => onToken(null),
+          'error-callback': () => onToken(null),
+        });
+      })
+      .catch(() => onToken(null));
+
+    return () => {
+      cancelled = true;
+      if (widgetIdRef.current && window.turnstile) {
+        try {
+          window.turnstile.remove(widgetIdRef.current);
+        } catch {
+          /* widget already gone */
+        }
+        widgetIdRef.current = null;
+      }
+    };
+    // siteKey is stable for the page lifetime; re-render only if it changes.
+  }, [siteKey, theme, onToken]);
+
+  return <div ref={containerRef} className="flex justify-center" />;
+}

package/src/pages/LoginPage.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { useSearchParams, Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { login, logout, ssoCheck, getProviders, getSession, ApiRequestError } from '../api';
+import { Turnstile } from '../components/Turnstile';
 import { useBranding } from '../branding';
 import type { ExternalProvider } from '../types';
 import { Button } from '@/components/ui/button';
@@ -45,6 +46,9 @@ export default function LoginPage() {
   const [ssoChecked, setSsoChecked] = useState(false);
   const [ssoChecking, setSsoChecking] = useState(false);
   const [providers, setProviders] = useState<ExternalProvider[]>([]);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState<string | undefined>(undefined);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const [turnstileKey, setTurnstileKey] = useState(0); // bump to re-mount the widget for a fresh challenge
   const [session, setSession] = useState<{ name: string; email: string } | null>(null);
   const [mfaPrompt, setMfaPrompt] = useState<{ returnUrl: string; userId: string; clientId: string } | null>(null);
 
@@ -92,7 +96,10 @@ export default function LoginPage() {
   // Fetch available external providers
   useEffect(() => {
     getProviders()
-      .then((res) => setProviders(res.providers ?? []))
+      .then((res) => {
+        setProviders(res.providers ?? []);
+        setTurnstileSiteKey(res.turnstileSiteKey);
+      })
       .catch(() => {});
   }, []);
 
@@ -148,7 +155,7 @@ export default function LoginPage() {
     setLoading(true);
 
     try {
-      const result = await login(email, password, returnUrl || undefined);
+      const result = await login(email, password, returnUrl || undefined, turnstileToken || undefined);
 
       if (result.mfaRequired && result.challengeId) {
         // Redirect to MFA challenge page
@@ -216,12 +223,20 @@ export default function LoginPage() {
           case 'password_required':
             setError(t('errorPasswordRequired'));
             break;
+          case 'captcha_failed':
+            setError(t('errorUnexpected'));
+            break;
           default:
             setError(err.message || t('errorUnexpected'));
         }
       } else {
         setError(t('errorUnexpected'));
       }
+      // Turnstile tokens are single-use — reset so a retry gets a fresh challenge.
+      if (turnstileSiteKey) {
+        setTurnstileToken(null);
+        setTurnstileKey((k) => k + 1);
+      }
     } finally {
       setLoading(false);
     }
@@ -393,7 +408,13 @@ export default function LoginPage() {
               />
             </div>
 
-            <Button type="submit" loading={loading} data-auth="submit-button">
+            {turnstileSiteKey && (
+              <div className="mb-4">
+                <Turnstile key={turnstileKey} siteKey={turnstileSiteKey} onToken={setTurnstileToken} />
+              </div>
+            )}
+
+            <Button type="submit" loading={loading} disabled={!!turnstileSiteKey && !turnstileToken} data-auth="submit-button">
               {loading ? t('signingIn') : t('signIn')}
             </Button>
 

package/src/pages/RegisterPage.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSearchParams, Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { register, getPasswordPolicy, ApiRequestError } from '../api';
+import { register, getPasswordPolicy, getProviders, ApiRequestError } from '../api';
 import type { PasswordPolicyRule } from '../types';
+import { Turnstile } from '../components/Turnstile';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -23,6 +24,16 @@ export default function RegisterPage() {
   const [loading, setLoading] = useState(false);
   const [policyRules, setPolicyRules] = useState<PasswordPolicyRule[]>([]);
   const [policyLoaded, setPolicyLoaded] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState<string | undefined>(undefined);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const [turnstileKey, setTurnstileKey] = useState(0);
+
+  // Turnstile site key is surfaced on /providers; absent = Turnstile disabled.
+  useEffect(() => {
+    getProviders()
+      .then((res) => setTurnstileSiteKey(res.turnstileSiteKey))
+      .catch(() => {});
+  }, []);
 
   function loadPolicy() {
     if (policyLoaded) return;
@@ -38,7 +49,7 @@ export default function RegisterPage() {
     setLoading(true);
 
     try {
-      await register(email, password, firstName || undefined, lastName || undefined);
+      await register(email, password, firstName || undefined, lastName || undefined, turnstileToken || undefined);
 
       // Redirect to login with success message
       const params = new URLSearchParams();
@@ -58,12 +69,20 @@ export default function RegisterPage() {
           case 'email_and_password_required':
             setError(t('errorEmailAndPasswordRequired'));
             break;
+          case 'captcha_failed':
+            setError(t('errorRegistrationFailed'));
+            break;
           default:
             setError(err.message || t('errorRegistrationFailed'));
         }
       } else {
         setError(t('errorRegistrationFailed'));
       }
+      // Turnstile tokens are single-use — reset so a retry gets a fresh challenge.
+      if (turnstileSiteKey) {
+        setTurnstileToken(null);
+        setTurnstileKey((k) => k + 1);
+      }
     } finally {
       setLoading(false);
     }
@@ -145,7 +164,13 @@ export default function RegisterPage() {
           </ul>
         )}
 
-        <Button type="submit" loading={loading}>
+        {turnstileSiteKey && (
+          <div className="mb-4">
+            <Turnstile key={turnstileKey} siteKey={turnstileSiteKey} onToken={setTurnstileToken} />
+          </div>
+        )}
+
+        <Button type="submit" loading={loading} disabled={!!turnstileSiteKey && !turnstileToken}>
           {loading ? t('registering') : t('registerButton')}
         </Button>
 

package/src/types.ts

@@ -33,6 +33,8 @@ export interface ExternalProvider {
 
 export interface ProvidersResponse {
   providers: ExternalProvider[];
+  /** Cloudflare Turnstile site key when configured; absent = Turnstile disabled (render no widget). */
+  turnstileSiteKey?: string;
 }
 
 export interface PasswordPolicyRule {