@micha.bigler/ui-core-micha 2.11.0 → 2.12.0

package/dist/auth/AuthContext.js

@@ -10,6 +10,7 @@ const DEFAULT_AUTH_METHODS = {
     password_reset: true,
     signup: true,
     signup_modes: ['self_signup_access_code'],
+    turnstile_site_key: '',
     password_change: true,
     social_login: true,
     social_providers: ['google', 'microsoft'],

package/dist/auth/authApi.js

@@ -341,7 +341,7 @@ export async function sendAdminInvite(email) {
         throw normaliseApiError(error, 'Auth.INVITE_FAILED');
     }
 }
-export async function submitRegistrationRequest({ email, mode, accessCode, registrationContextToken, registrationContext, }) {
+export async function submitRegistrationRequest({ email, mode, accessCode, registrationContextToken, registrationContext, turnstileToken, }) {
     const payload = { email, mode };
     if (accessCode)
         payload.access_code = accessCode;
@@ -351,6 +351,8 @@ export async function submitRegistrationRequest({ email, mode, accessCode, regis
     if (registrationContext) {
         payload.registration_context = registrationContext;
     }
+    if (turnstileToken)
+        payload.turnstile_token = turnstileToken;
     try {
         const res = await apiClient.post(`${USERS_BASE}/register-request/`, payload);
         return res.data;

package/dist/components/TurnstileWidget.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+const TURNSTILE_SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+const TURNSTILE_SCRIPT_SELECTOR = 'script[data-turnstile-api="true"]';
+let turnstileScriptPromise;
+function loadTurnstileScript() {
+    var _a;
+    if ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.render) {
+        return Promise.resolve(window.turnstile);
+    }
+    if (!turnstileScriptPromise) {
+        turnstileScriptPromise = new Promise((resolve, reject) => {
+            let script = document.querySelector(TURNSTILE_SCRIPT_SELECTOR);
+            if (!script) {
+                script = document.createElement('script');
+                script.src = TURNSTILE_SCRIPT_URL;
+                script.async = true;
+                script.defer = true;
+                script.dataset.turnstileApi = 'true';
+                document.head.appendChild(script);
+            }
+            script.addEventListener('load', () => {
+                var _a;
+                if ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.render) {
+                    resolve(window.turnstile);
+                }
+                else {
+                    reject(new Error('Turnstile did not initialize.'));
+                }
+            }, { once: true });
+            script.addEventListener('error', () => {
+                reject(new Error('Turnstile could not be loaded.'));
+            }, { once: true });
+        });
+    }
+    return turnstileScriptPromise;
+}
+export const TurnstileWidget = forwardRef(function TurnstileWidget({ siteKey, onToken }, ref) {
+    const containerRef = useRef(null);
+    const widgetIdRef = useRef(null);
+    const onTokenRef = useRef(onToken);
+    useEffect(() => {
+        onTokenRef.current = onToken;
+    }, [onToken]);
+    const reset = useCallback(() => {
+        var _a;
+        if (widgetIdRef.current !== null && ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.reset)) {
+            window.turnstile.reset(widgetIdRef.current);
+        }
+        onTokenRef.current('');
+    }, []);
+    useImperativeHandle(ref, () => ({ reset }), [reset]);
+    useEffect(() => {
+        if (!siteKey)
+            return undefined;
+        let cancelled = false;
+        loadTurnstileScript()
+            .then((turnstile) => {
+            if (cancelled || !containerRef.current)
+                return;
+            widgetIdRef.current = turnstile.render(containerRef.current, {
+                sitekey: siteKey,
+                callback: (token) => onTokenRef.current(token),
+                'expired-callback': reset,
+                'error-callback': () => onTokenRef.current(''),
+            });
+        })
+            .catch(() => {
+            if (!cancelled)
+                onTokenRef.current('');
+        });
+        return () => {
+            var _a;
+            cancelled = true;
+            if (widgetIdRef.current !== null && ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.remove)) {
+                window.turnstile.remove(widgetIdRef.current);
+            }
+            widgetIdRef.current = null;
+        };
+    }, [siteKey, reset]);
+    if (!siteKey)
+        return null;
+    return _jsx("div", { ref: containerRef, "data-testid": "turnstile-widget" });
+});

package/dist/pages/SignUpPage.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material';
 import { Helmet } from 'react-helmet';
@@ -7,6 +7,11 @@ import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
 import { submitRegistrationRequest } from '../auth/authApi';
+import { TurnstileWidget } from '../components/TurnstileWidget';
+const TURNSTILE_SIGNUP_MODES = new Set([
+    'self_signup_open',
+    'self_signup_email_domain',
+]);
 const MODE_LABELS = {
     self_signup_access_code: 'Auth.SIGNUP_ACCESS_CODE_TAB',
     self_signup_open: 'Auth.SIGNUP_OPEN_TAB',
@@ -47,6 +52,10 @@ export function SignUpPage() {
     const [submitting, setSubmitting] = useState(false);
     const [successKey, setSuccessKey] = useState(null);
     const [errorKey, setErrorKey] = useState(null);
+    const [turnstileToken, setTurnstileToken] = useState('');
+    const turnstileWidgetRef = useRef(null);
+    const turnstileRequired = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.turnstile_site_key)
+        && TURNSTILE_SIGNUP_MODES.has(mode);
     const pageSubtitle = useMemo(() => {
         if (mode === 'self_signup_qr' && tokenFromUrl) {
             return t('Auth.PAGE_SIGNUP_SUBTITLE_QR_READY', 'Enter your email address to complete sign-up with the QR link you opened.');
@@ -56,7 +65,11 @@ export function SignUpPage() {
     useEffect(() => {
         setMode(initialMode);
     }, [initialMode]);
+    useEffect(() => {
+        setTurnstileToken('');
+    }, [mode, authMethods === null || authMethods === void 0 ? void 0 : authMethods.turnstile_site_key]);
     const handleSubmit = async (event) => {
+        var _a;
         event.preventDefault();
         setSuccessKey(null);
         setErrorKey(null);
@@ -72,6 +85,8 @@ export function SignUpPage() {
             setErrorKey('Auth.SIGNUP_QR_INVALID');
             return;
         }
+        if (turnstileRequired && !turnstileToken)
+            return;
         setSubmitting(true);
         try {
             await submitRegistrationRequest({
@@ -79,11 +94,16 @@ export function SignUpPage() {
                 mode,
                 accessCode,
                 registrationContextToken: mode === 'self_signup_qr' ? tokenFromUrl : null,
+                turnstileToken: turnstileRequired ? turnstileToken : undefined,
             });
             setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
         }
         catch (err) {
             setErrorKey(err.code || 'Auth.INVITE_FAILED');
+            if (turnstileRequired) {
+                setTurnstileToken('');
+                (_a = turnstileWidgetRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+            }
         }
         finally {
             setSubmitting(false);
@@ -92,7 +112,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0, children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0 || (turnstileRequired && !turnstileToken), children: submitting
                             ? t('Auth.SIGNUP_SUBMITTING')
                             : t('Auth.SIGNUP_SUBMIT') })] }), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/auth/AuthContext.jsx

@@ -19,6 +19,7 @@ const DEFAULT_AUTH_METHODS = {
   password_reset: true,
   signup: true,
   signup_modes: ['self_signup_access_code'],
+  turnstile_site_key: '',
   password_change: true,
   social_login: true,
   social_providers: ['google', 'microsoft'],

package/src/auth/authApi.jsx

@@ -359,6 +359,7 @@ export async function submitRegistrationRequest({
   accessCode,
   registrationContextToken,
   registrationContext,
+  turnstileToken,
 }) {
   const payload = { email, mode };
   if (accessCode) payload.access_code = accessCode;
@@ -368,6 +369,7 @@ export async function submitRegistrationRequest({
   if (registrationContext) {
     payload.registration_context = registrationContext;
   }
+  if (turnstileToken) payload.turnstile_token = turnstileToken;
 
   try {
     const res = await apiClient.post(`${USERS_BASE}/register-request/`, payload);

package/src/components/TurnstileWidget.jsx

@@ -0,0 +1,99 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+const TURNSTILE_SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+const TURNSTILE_SCRIPT_SELECTOR = 'script[data-turnstile-api="true"]';
+
+let turnstileScriptPromise;
+
+function loadTurnstileScript() {
+  if (window.turnstile?.render) {
+    return Promise.resolve(window.turnstile);
+  }
+
+  if (!turnstileScriptPromise) {
+    turnstileScriptPromise = new Promise((resolve, reject) => {
+      let script = document.querySelector(TURNSTILE_SCRIPT_SELECTOR);
+      if (!script) {
+        script = document.createElement('script');
+        script.src = TURNSTILE_SCRIPT_URL;
+        script.async = true;
+        script.defer = true;
+        script.dataset.turnstileApi = 'true';
+        document.head.appendChild(script);
+      }
+
+      script.addEventListener('load', () => {
+        if (window.turnstile?.render) {
+          resolve(window.turnstile);
+        } else {
+          reject(new Error('Turnstile did not initialize.'));
+        }
+      }, { once: true });
+      script.addEventListener('error', () => {
+        reject(new Error('Turnstile could not be loaded.'));
+      }, { once: true });
+    });
+  }
+
+  return turnstileScriptPromise;
+}
+
+export const TurnstileWidget = forwardRef(function TurnstileWidget(
+  { siteKey, onToken },
+  ref,
+) {
+  const containerRef = useRef(null);
+  const widgetIdRef = useRef(null);
+  const onTokenRef = useRef(onToken);
+
+  useEffect(() => {
+    onTokenRef.current = onToken;
+  }, [onToken]);
+
+  const reset = useCallback(() => {
+    if (widgetIdRef.current !== null && window.turnstile?.reset) {
+      window.turnstile.reset(widgetIdRef.current);
+    }
+    onTokenRef.current('');
+  }, []);
+
+  useImperativeHandle(ref, () => ({ reset }), [reset]);
+
+  useEffect(() => {
+    if (!siteKey) return undefined;
+
+    let cancelled = false;
+    loadTurnstileScript()
+      .then((turnstile) => {
+        if (cancelled || !containerRef.current) return;
+
+        widgetIdRef.current = turnstile.render(containerRef.current, {
+          sitekey: siteKey,
+          callback: (token) => onTokenRef.current(token),
+          'expired-callback': reset,
+          'error-callback': () => onTokenRef.current(''),
+        });
+      })
+      .catch(() => {
+        if (!cancelled) onTokenRef.current('');
+      });
+
+    return () => {
+      cancelled = true;
+      if (widgetIdRef.current !== null && window.turnstile?.remove) {
+        window.turnstile.remove(widgetIdRef.current);
+      }
+      widgetIdRef.current = null;
+    };
+  }, [siteKey, reset]);
+
+  if (!siteKey) return null;
+
+  return <div ref={containerRef} data-testid="turnstile-widget" />;
+});

package/src/pages/SignUpPage.jsx

@@ -1,4 +1,10 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
   Alert,
@@ -13,6 +19,12 @@ import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
 import { submitRegistrationRequest } from '../auth/authApi';
+import { TurnstileWidget } from '../components/TurnstileWidget';
+
+const TURNSTILE_SIGNUP_MODES = new Set([
+  'self_signup_open',
+  'self_signup_email_domain',
+]);
 
 const MODE_LABELS = {
   self_signup_access_code: 'Auth.SIGNUP_ACCESS_CODE_TAB',
@@ -60,6 +72,11 @@ export function SignUpPage() {
   const [submitting, setSubmitting] = useState(false);
   const [successKey, setSuccessKey] = useState(null);
   const [errorKey, setErrorKey] = useState(null);
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const turnstileWidgetRef = useRef(null);
+
+  const turnstileRequired = Boolean(authMethods?.turnstile_site_key)
+    && TURNSTILE_SIGNUP_MODES.has(mode);
 
   const pageSubtitle = useMemo(() => {
     if (mode === 'self_signup_qr' && tokenFromUrl) {
@@ -78,6 +95,10 @@ export function SignUpPage() {
     setMode(initialMode);
   }, [initialMode]);
 
+  useEffect(() => {
+    setTurnstileToken('');
+  }, [mode, authMethods?.turnstile_site_key]);
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     setSuccessKey(null);
@@ -98,6 +119,8 @@ export function SignUpPage() {
       return;
     }
 
+    if (turnstileRequired && !turnstileToken) return;
+
     setSubmitting(true);
     try {
       await submitRegistrationRequest({
@@ -105,10 +128,15 @@ export function SignUpPage() {
         mode,
         accessCode,
         registrationContextToken: mode === 'self_signup_qr' ? tokenFromUrl : null,
+        turnstileToken: turnstileRequired ? turnstileToken : undefined,
       });
       setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
     } catch (err) {
       setErrorKey(err.code || 'Auth.INVITE_FAILED');
+      if (turnstileRequired) {
+        setTurnstileToken('');
+        turnstileWidgetRef.current?.reset();
+      }
     } finally {
       setSubmitting(false);
     }
@@ -186,10 +214,18 @@ export function SignUpPage() {
           />
         )}
 
+        {turnstileRequired && (
+          <TurnstileWidget
+            ref={turnstileWidgetRef}
+            siteKey={authMethods.turnstile_site_key}
+            onToken={setTurnstileToken}
+          />
+        )}
+
         <Button
           type="submit"
           variant="contained"
-          disabled={submitting || signupModes.length === 0}
+          disabled={submitting || signupModes.length === 0 || (turnstileRequired && !turnstileToken)}
         >
           {submitting
             ? t('Auth.SIGNUP_SUBMITTING')

package/tests/SignUpPage.test.jsx

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const authApi = vi.hoisted(() => ({
+  submitRegistrationRequest: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => vi.fn(),
+  useLocation: () => ({ search: '' }),
+}));
+vi.mock('react-helmet', () => ({ Helmet: ({ children }) => <>{children}</> }));
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key, fallback) => (typeof fallback === 'string' ? fallback : key) }),
+}));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { SignUpPage } from '../src/pages/SignUpPage';
+
+function renderSignUp({ signupModes, siteKey }) {
+  return render(
+    <AuthContext.Provider value={{ authMethods: {
+      signup: true,
+      signup_modes: signupModes,
+      turnstile_site_key: siteKey,
+    } }}>
+      <SignUpPage />
+    </AuthContext.Provider>,
+  );
+}
+
+describe('SignUpPage Turnstile integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.submitRegistrationRequest.mockResolvedValue({});
+    window.turnstile = {
+      render: vi.fn(() => 'widget-id'),
+      remove: vi.fn(),
+      reset: vi.fn(),
+    };
+  });
+
+  afterEach(() => {
+    cleanup();
+    delete window.turnstile;
+  });
+
+  it('renders only for open and email-domain signup modes when the site key is present', async () => {
+    renderSignUp({
+      signupModes: ['self_signup_open', 'self_signup_access_code', 'self_signup_email_domain'],
+      siteKey: 'site-key',
+    });
+
+    await waitFor(() => expect(screen.getByTestId('turnstile-widget')).toBeTruthy());
+    fireEvent.click(screen.getByRole('button', { name: 'self_signup_access_code' }));
+    expect(screen.queryByTestId('turnstile-widget')).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'self_signup_email_domain' }));
+    await waitFor(() => expect(screen.getByTestId('turnstile-widget')).toBeTruthy());
+  });
+
+  it('gates submission until verified and passes the Turnstile token to the registration API', async () => {
+    renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });
+
+    await waitFor(() => expect(window.turnstile.render).toHaveBeenCalledOnce());
+    fireEvent.change(screen.getByRole('textbox', { name: /Auth\.EMAIL_LABEL/ }), {
+      target: { value: 'ada@example.com' },
+    });
+
+    const submit = screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' });
+    expect(submit.disabled).toBe(true);
+
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1].callback('turnstile-token');
+    });
+
+    await waitFor(() => expect(submit.disabled).toBe(false));
+    fireEvent.click(submit);
+
+    await waitFor(() => expect(authApi.submitRegistrationRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        email: 'ada@example.com',
+        mode: 'self_signup_open',
+        turnstileToken: 'turnstile-token',
+      }),
+    ));
+  });
+
+  it('resets the widget after a failed protected signup submission', async () => {
+    authApi.submitRegistrationRequest.mockRejectedValue({ code: 'Auth.INVITE_FAILED' });
+    renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });
+
+    await waitFor(() => expect(window.turnstile.render).toHaveBeenCalledOnce());
+    fireEvent.change(screen.getByRole('textbox', { name: /Auth\.EMAIL_LABEL/ }), {
+      target: { value: 'ada@example.com' },
+    });
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1].callback('turnstile-token');
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }));
+
+    await waitFor(() => expect(window.turnstile.reset).toHaveBeenCalledWith('widget-id'));
+    expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }).disabled).toBe(true);
+  });
+
+  it('resets the widget and gates submission when its token expires', async () => {
+    renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });
+
+    await waitFor(() => expect(window.turnstile.render).toHaveBeenCalledOnce());
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1].callback('turnstile-token');
+    });
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }).disabled).toBe(false));
+
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1]['expired-callback']();
+    });
+
+    expect(window.turnstile.reset).toHaveBeenCalledWith('widget-id');
+    expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }).disabled).toBe(true);
+  });
+
+  it.each([
+    ['self_signup_access_code', 'site-key'],
+    ['self_signup_qr', 'site-key'],
+    ['self_signup_open', ''],
+  ])('does not render for %s without an eligible key/mode combination', async (mode, siteKey) => {
+    renderSignUp({ signupModes: [mode], siteKey });
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' })).toBeTruthy());
+    expect(screen.queryByTestId('turnstile-widget')).toBeNull();
+    expect(window.turnstile.render).not.toHaveBeenCalled();
+  });
+});

package/tests/authApiRegistration.test.js

@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const client = vi.hoisted(() => ({
+  post: vi.fn(),
+}));
+
+vi.mock('../src/auth/apiClient', () => ({ default: client }));
+
+import { submitRegistrationRequest } from '../src/auth/authApi';
+
+describe('submitRegistrationRequest', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('includes a Turnstile token in the registration payload', async () => {
+    client.post.mockResolvedValue({ data: { ok: true } });
+
+    await submitRegistrationRequest({
+      email: 'ada@example.com',
+      mode: 'self_signup_open',
+      turnstileToken: 'turnstile-token',
+    });
+
+    expect(client.post).toHaveBeenCalledWith('/api/users/register-request/', {
+      email: 'ada@example.com',
+      mode: 'self_signup_open',
+      turnstile_token: 'turnstile-token',
+    });
+  });
+});