diff --git a/resources/js/components/turnstile_captcha.js b/resources/js/components/turnstile_captcha.js
new file mode 100644
index 00000000..3658adc7
--- /dev/null
+++ b/resources/js/components/turnstile_captcha.js
@@ -0,0 +1,147 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Turnstile } from "@marsidev/react-turnstile";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+
+// Turnstile does not always invoke onError when its iframe cannot be loaded (e.g. a network
+// error reaching challenges.cloudflare.com): the widget just never renders and never issues a
+// token. Without a token the backend rejects the form, so after this long without one we treat
+// the security check as failed and let the user retry it.
+export const CAPTCHA_LOAD_TIMEOUT_MS = 15000;
+
+export const CAPTCHA_STATUS = {
+  VERIFYING: "verifying",
+  // Turnstile is showing a challenge the user has to complete: not a load failure.
+  INTERACTIVE: "interactive",
+  SOLVED: "solved",
+  FAILED: "failed",
+};
+
+export const CAPTCHA_MESSAGES = {
+  VERIFYING: "Please wait while we verify you are human, then submit again.",
+  INTERACTIVE: "Complete the security check, then submit again.",
+  FAILED:
+    "We couldn't load the security check. Check your connection or disable any content blocker, then retry.",
+};
+
+// Id of the <script> that @marsidev/react-turnstile injects for api.js (its default).
+export const TURNSTILE_SCRIPT_ID = "cf-turnstile-script";
+
+/**
+ * State for a Turnstile-protected form. With an empty siteKey the captcha is disabled:
+ * nothing renders and ensureToken() always lets the form through.
+ */
+export const useTurnstileCaptcha = (siteKey) => {
+  const ref = useRef(null);
+  const [status, setStatus] = useState(CAPTCHA_STATUS.VERIFYING);
+  const [submitAttempted, setSubmitAttempted] = useState(false);
+  // Bumped to remount the widget when api.js itself has to be loaded again.
+  const [widgetKey, setWidgetKey] = useState(0);
+
+  useEffect(() => {
+    if (!siteKey || status !== CAPTCHA_STATUS.VERIFYING) {
+      return undefined;
+    }
+    const timer = setTimeout(
+      () => setStatus(CAPTCHA_STATUS.FAILED),
+      CAPTCHA_LOAD_TIMEOUT_MS
+    );
+    return () => clearTimeout(timer);
+  }, [siteKey, status]);
+
+  // Call before posting the form: true when it may be posted, otherwise it surfaces why not.
+  const ensureToken = () => {
+    if (!siteKey || ref.current?.getResponse()) {
+      return true;
+    }
+    setSubmitAttempted(true);
+    return false;
+  };
+
+  const onSuccess = () => {
+    setStatus(CAPTCHA_STATUS.SOLVED);
+    setSubmitAttempted(false);
+  };
+
+  const restart = () => {
+    setStatus(CAPTCHA_STATUS.VERIFYING);
+    ref.current?.reset();
+  };
+
+  const retry = () => {
+    setSubmitAttempted(false);
+    if (!window.turnstile) {
+      // api.js never loaded (blocked or a network error), so there is no widget for reset()
+      // to act on, and the library will not inject the script again while the failed
+      // <script> element is still in the DOM. Drop it and remount the widget to reload it.
+      document.getElementById(TURNSTILE_SCRIPT_ID)?.remove();
+      setStatus(CAPTCHA_STATUS.VERIFYING);
+      setWidgetKey((key) => key + 1);
+      return;
+    }
+    restart();
+  };
+
+  const onBeforeInteractive = () => setStatus(CAPTCHA_STATUS.INTERACTIVE);
+
+  const onError = () => setStatus(CAPTCHA_STATUS.FAILED);
+
+  let message = null;
+  if (status === CAPTCHA_STATUS.FAILED) {
+    message = CAPTCHA_MESSAGES.FAILED;
+  } else if (submitAttempted && status === CAPTCHA_STATUS.VERIFYING) {
+    message = CAPTCHA_MESSAGES.VERIFYING;
+  } else if (submitAttempted && status === CAPTCHA_STATUS.INTERACTIVE) {
+    message = CAPTCHA_MESSAGES.INTERACTIVE;
+  }
+
+  return {
+    siteKey,
+    ref,
+    widgetKey,
+    status,
+    message,
+    ensureToken,
+    onSuccess,
+    onBeforeInteractive,
+    restart,
+    retry,
+    onError,
+  };
+};
+
+/**
+ * Renders the Turnstile widget plus its status message and retry action.
+ * `captcha` is the object returned by useTurnstileCaptcha().
+ */
+export const TurnstileCaptcha = ({ captcha, className, errorClassName }) => {
+  if (!captcha.siteKey) {
+    return null;
+  }
+  return (
+    <Grid container item justifyContent="center">
+      <Turnstile
+        key={captcha.widgetKey}
+        ref={captcha.ref}
+        className={className}
+        siteKey={captcha.siteKey}
+        options={{ responseFieldName: "cf-turnstile-response" }}
+        onSuccess={captcha.onSuccess}
+        onBeforeInteractive={captcha.onBeforeInteractive}
+        onExpire={captcha.restart}
+        onTimeout={captcha.restart}
+        onError={captcha.onError}
+      />
+      {captcha.message && (
+        <div className={errorClassName} role="alert">
+          {captcha.message}
+        </div>
+      )}
+      {captcha.status === CAPTCHA_STATUS.FAILED && (
+        <Button type="button" size="small" color="primary" onClick={captcha.retry}>
+          Retry security check
+        </Button>
+      )}
+    </Grid>
+  );
+};
diff --git a/resources/js/login/components/otp_input_form.js b/resources/js/login/components/otp_input_form.js
index 1634f815..12ae7821 100644
--- a/resources/js/login/components/otp_input_form.js
+++ b/resources/js/login/components/otp_input_form.js
@@ -1,9 +1,9 @@
 import React from "react";
-import { Turnstile } from "@marsidev/react-turnstile";
 import Button from "@material-ui/core/Button";
 import Link from "@material-ui/core/Link";
 import OtpCodeInput from "./otp_code_input";
 import useOtpCountdown from "./use_otp_countdown";
+import { TurnstileCaptcha, useTurnstileCaptcha } from "../../components/turnstile_captcha";
 import styles from "../login.module.scss";
 
 const OTPInputForm = ({
@@ -20,13 +20,11 @@ const OTPInputForm = ({
   csrfToken,
   shouldShowCaptcha,
   captchaPublicKey,
-  onChangeCaptchaProvider,
-  onExpireCaptchaProvider,
-  onErrorCaptchaProvider,
   onReset,
   loginAttempts,
 }) => {
-  const showCaptcha = shouldShowCaptcha();
+  // The captcha only applies once the failed-attempts threshold is reached.
+  const captcha = useTurnstileCaptcha(shouldShowCaptcha() ? captchaPublicKey : "");
   const { secondsLeft, expired } = useOtpCountdown(otpLifetime ?? 0, codeVersion);
   // The countdown only renders when this page view knows when the code was
   // issued (a fresh emitOTP in this session). After a failed-submit page
@@ -36,7 +34,7 @@ const OTPInputForm = ({
   const blockExpired = countdownActive && expired;
 
   const handleSubmit = (ev) => {
-    if (blockExpired || !onAuthenticate(ev.target))
+    if (blockExpired || !captcha.ensureToken() || !onAuthenticate(ev.target))
     {
       ev.preventDefault();
     }
@@ -98,16 +96,11 @@ const OTPInputForm = ({
         id="login_attempts"
         name="login_attempts"
       />
-      {showCaptcha && captchaPublicKey && (
-        <Turnstile
-          className={styles.turnstile}
-          siteKey={captchaPublicKey}
-          options={{ responseFieldName: "cf-turnstile-response" }}
-          onSuccess={onChangeCaptchaProvider}
-          onExpire={onExpireCaptchaProvider}
-          onError={onErrorCaptchaProvider}
-        />
-      )}
+      <TurnstileCaptcha
+        captcha={captcha}
+        className={styles.turnstile}
+        errorClassName={styles.error_label}
+      />
     </form>
   );
 };
diff --git a/resources/js/login/components/password_input_form.js b/resources/js/login/components/password_input_form.js
index 96e5a1cc..adfc947d 100644
--- a/resources/js/login/components/password_input_form.js
+++ b/resources/js/login/components/password_input_form.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { Turnstile } from "@marsidev/react-turnstile";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
@@ -12,6 +11,7 @@ import IconButton from "@material-ui/core/IconButton";
 import ExistingAccountActions from "./existing_account_actions";
 import styles from "../login.module.scss";
 import HTMLRender from "../../shared/HTMLRender";
+import { TurnstileCaptcha, useTurnstileCaptcha } from "../../components/turnstile_captcha";
 
 const PasswordInputForm = ({
   formAction,
@@ -27,9 +27,6 @@ const PasswordInputForm = ({
   csrfToken,
   shouldShowCaptcha,
   captchaPublicKey,
-  onChangeCaptchaProvider,
-  onExpireCaptchaProvider,
-  onErrorCaptchaProvider,
   handleEmitOtpAction,
   forgotPasswordAction,
   loginAttempts,
@@ -41,8 +38,11 @@ const PasswordInputForm = ({
   // their save/update prompt off the browser's real submit event, and the backend
   // login strategies respond with a redirect + flashed session state that only a
   // top-level navigation consumes correctly.
+  // The captcha only applies once the failed-attempts threshold is reached.
+  const captcha = useTurnstileCaptcha(shouldShowCaptcha() ? captchaPublicKey : "");
+
   const handleSubmit = (ev) => {
-    if (!onAuthenticate(ev.target)) {
+    if (!captcha.ensureToken() || !onAuthenticate(ev.target)) {
       ev.preventDefault();
     }
   };
@@ -166,16 +166,11 @@ const PasswordInputForm = ({
         id="login_attempts"
         name="login_attempts"
       />
-      {shouldShowCaptcha() && captchaPublicKey && (
-        <Turnstile
-          className={styles.turnstile}
-          siteKey={captchaPublicKey}
-          options={{ responseFieldName: "cf-turnstile-response" }}
-          onSuccess={onChangeCaptchaProvider}
-          onExpire={onExpireCaptchaProvider}
-          onError={onErrorCaptchaProvider}
-        />
-      )}
+      <TurnstileCaptcha
+        captcha={captcha}
+        className={styles.turnstile}
+        errorClassName={styles.error_label}
+      />
       <ExistingAccountActions
         emitOtpAction={handleEmitOtpAction}
         userName={userNameValue}
diff --git a/resources/js/login/login.js b/resources/js/login/login.js
index f85e6894..074cbb4b 100644
--- a/resources/js/login/login.js
+++ b/resources/js/login/login.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { Turnstile } from "@marsidev/react-turnstile";
 import ReactDOM from "react-dom";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
@@ -72,7 +71,6 @@ class LoginPage extends React.Component {
         message: null,
         severity: "info",
       },
-      captcha_value: "",
       showPassword: false,
       disableInput: false,
       authFlow: props.flow,
@@ -122,9 +120,6 @@ class LoginPage extends React.Component {
     this.onValidateEmail = this.onValidateEmail.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
     this.onAuthenticate = this.onAuthenticate.bind(this);
-    this.onChangeCaptchaProvider = this.onChangeCaptchaProvider.bind(this);
-    this.onExpireCaptchaProvider = this.onExpireCaptchaProvider.bind(this);
-    this.onErrorCaptchaProvider = this.onErrorCaptchaProvider.bind(this);
     this.onUserPasswordChange = this.onUserPasswordChange.bind(this);
     this.onOTPCodeChange = this.onOTPCodeChange.bind(this);
     this.shouldShowCaptcha = this.shouldShowCaptcha.bind(this);
@@ -255,15 +250,6 @@ class LoginPage extends React.Component {
           });
           return false;
         }
-
-        if (this.state.captcha_value == "" && this.shouldShowCaptcha()) {
-          this.setState({
-            ...this.state,
-            disableInput: false,
-            errors: { ...this.state.errors, password: "you must check CAPTCHA" },
-          });
-          return false;
-        }
     }
 
     return true;
@@ -285,18 +271,6 @@ class LoginPage extends React.Component {
     return true;
   }
 
-  onChangeCaptchaProvider(value) {
-    this.setState({ ...this.state, captcha_value: value });
-  }
-
-  onExpireCaptchaProvider() {
-    this.setState({ ...this.state, captcha_value: "" });
-  }
-
-  onErrorCaptchaProvider() {
-    this.setState({ ...this.state, captcha_value: "" });
-  }
-
   onHandleUserNameChange(ev) {
     let { value, id } = ev.target;
     this.setState({ ...this.state, user_name: value });
@@ -797,19 +771,6 @@ class LoginPage extends React.Component {
     });
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    if (
-      this.state.user_verified &&
-      this.existingUserCanContinue() &&
-      prevState.authFlow !== this.state.authFlow
-    ) {
-      this.setState({
-        ...this.state,
-        captcha_value: "",
-      });
-    }
-  }
-
   render() {
     const showTwoFactorForm = this.state.authFlow === FLOW.MFA;
     const showRecoveryForm = this.state.authFlow === FLOW.RECOVERY;
@@ -940,9 +901,6 @@ class LoginPage extends React.Component {
                   handleClickShowPassword={this.handleClickShowPassword}
                   handleMouseDownPassword={this.handleMouseDownPassword}
                   shouldShowCaptcha={this.shouldShowCaptcha}
-                  onChangeCaptchaProvider={this.onChangeCaptchaProvider}
-                  onExpireCaptchaProvider={this.onExpireCaptchaProvider}
-                  onErrorCaptchaProvider={this.onErrorCaptchaProvider}
                   handleEmitOtpAction={this.handleEmitOtpAction}
                 />
                 <HelpLinks
@@ -976,9 +934,6 @@ class LoginPage extends React.Component {
                   loginAttempts={this.props?.loginAttempts}
                   onCodeChange={this.onOTPCodeChange}
                   shouldShowCaptcha={this.shouldShowCaptcha}
-                  onChangeCaptchaProvider={this.onChangeCaptchaProvider}
-                  onExpireCaptchaProvider={this.onExpireCaptchaProvider}
-                  onErrorCaptchaProvider={this.onErrorCaptchaProvider}
                   onReset={this.handleDelete}
                   onAuthenticate={this.onAuthenticate}
                 />
diff --git a/tests/js/components/turnstile_captcha.test.js b/tests/js/components/turnstile_captcha.test.js
new file mode 100644
index 00000000..f4e0b3af
--- /dev/null
+++ b/tests/js/components/turnstile_captcha.test.js
@@ -0,0 +1,207 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+
+jest.mock('@marsidev/react-turnstile', () => require('../helpers/turnstile_mock'));
+
+import { mockTurnstile } from '../helpers/turnstile_mock';
+import {
+  TurnstileCaptcha,
+  useTurnstileCaptcha,
+  CAPTCHA_LOAD_TIMEOUT_MS,
+  CAPTCHA_MESSAGES,
+  TURNSTILE_SCRIPT_ID,
+} from '../../../resources/js/components/turnstile_captcha';
+
+// Minimal Turnstile-protected form, wired the way the auth pages wire it.
+const ProtectedForm = ({ siteKey, onPost }) => {
+  const captcha = useTurnstileCaptcha(siteKey);
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (captcha.ensureToken()) onPost();
+      }}
+    >
+      <TurnstileCaptcha captcha={captcha} errorClassName="error" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+const submit = () => fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+const retryButton = () => screen.queryByRole('button', { name: /retry security check/i });
+const solve = () => {
+  mockTurnstile.token = 'turnstile-token';
+  act(() => mockTurnstile.props.onSuccess('turnstile-token'));
+};
+
+describe('TurnstileCaptcha / useTurnstileCaptcha', () => {
+  let onPost;
+
+  beforeEach(() => {
+    mockTurnstile.clear();
+    onPost = jest.fn();
+    // api.js loaded: the global Turnstile API exists (cases below delete it when needed).
+    window.turnstile = {};
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    delete window.turnstile;
+    document.getElementById(TURNSTILE_SCRIPT_ID)?.remove();
+  });
+
+  it('asks the user to wait, instead of to "check the captcha", when submitted before a token exists', () => {
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    submit();
+
+    expect(screen.getByRole('alert')).toHaveTextContent(CAPTCHA_MESSAGES.VERIFYING);
+    expect(screen.queryByText(/remember to check the captcha/i)).not.toBeInTheDocument();
+    expect(onPost).not.toHaveBeenCalled();
+  });
+
+  it('lets the form through and clears the waiting message once a token is issued', () => {
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    submit();
+    solve();
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+
+    submit();
+    expect(onPost).toHaveBeenCalledTimes(1);
+  });
+
+  it('posts the response under the field name the backend validates', () => {
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    expect(mockTurnstile.props.siteKey).toBe('site-key');
+    expect(mockTurnstile.props.options).toEqual({ responseFieldName: 'cf-turnstile-response' });
+  });
+
+  it('reports a failed security check with a retry when no token arrives (iframe never loaded)', () => {
+    jest.useFakeTimers();
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS - 1));
+    expect(screen.queryByText(CAPTCHA_MESSAGES.FAILED)).not.toBeInTheDocument();
+
+    act(() => jest.advanceTimersByTime(1));
+    expect(screen.getByRole('alert')).toHaveTextContent(CAPTCHA_MESSAGES.FAILED);
+
+    fireEvent.click(retryButton());
+    expect(mockTurnstile.reset).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText(CAPTCHA_MESSAGES.FAILED)).not.toBeInTheDocument();
+    expect(retryButton()).not.toBeInTheDocument();
+
+    // The retried widget gets a fresh timeout window.
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS));
+    expect(screen.getByText(CAPTCHA_MESSAGES.FAILED)).toBeInTheDocument();
+  });
+
+  it('reloads api.js on retry when the script itself never loaded', () => {
+    jest.useFakeTimers();
+    delete window.turnstile;
+    const failedScript = document.createElement('script');
+    failedScript.id = TURNSTILE_SCRIPT_ID;
+    document.head.appendChild(failedScript);
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+    expect(mockTurnstile.mounts).toBe(1);
+
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS));
+    fireEvent.click(retryButton());
+
+    // The failed <script> is dropped and the widget remounted, so the library injects
+    // api.js again; reset() would be a no-op without a widget.
+    expect(document.getElementById(TURNSTILE_SCRIPT_ID)).toBeNull();
+    expect(mockTurnstile.mounts).toBe(2);
+    expect(mockTurnstile.reset).not.toHaveBeenCalled();
+    expect(screen.queryByText(CAPTCHA_MESSAGES.FAILED)).not.toBeInTheDocument();
+
+    // The reloaded widget can still succeed and unblock the form.
+    solve();
+    submit();
+    expect(onPost).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not report a load failure while the user is completing an interactive challenge', () => {
+    jest.useFakeTimers();
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    act(() => mockTurnstile.props.onBeforeInteractive());
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS * 2));
+
+    expect(screen.queryByText(CAPTCHA_MESSAGES.FAILED)).not.toBeInTheDocument();
+    submit();
+    expect(onPost).not.toHaveBeenCalled();
+    expect(screen.getByRole('alert')).toHaveTextContent(CAPTCHA_MESSAGES.INTERACTIVE);
+
+    solve();
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('re-arms the load timeout when the widget restarts after an interactive challenge', () => {
+    jest.useFakeTimers();
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    act(() => mockTurnstile.props.onBeforeInteractive());
+    act(() => mockTurnstile.props.onTimeout());
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS));
+
+    expect(screen.getByText(CAPTCHA_MESSAGES.FAILED)).toBeInTheDocument();
+  });
+
+  it('does not report a failure once a token arrived before the timeout', () => {
+    jest.useFakeTimers();
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    solve();
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS * 2));
+
+    expect(screen.queryByText(CAPTCHA_MESSAGES.FAILED)).not.toBeInTheDocument();
+  });
+
+  it('reports a failed security check with a retry when Turnstile raises an error', () => {
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    act(() => mockTurnstile.props.onError('200500'));
+
+    expect(screen.getByRole('alert')).toHaveTextContent(CAPTCHA_MESSAGES.FAILED);
+    expect(retryButton()).toBeInTheDocument();
+  });
+
+  it('recovers if Turnstile succeeds on its own after an error', () => {
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    act(() => mockTurnstile.props.onError('200500'));
+    solve();
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(retryButton()).not.toBeInTheDocument();
+  });
+
+  it('re-runs the widget when the token expires and blocks the post until a new one arrives', () => {
+    render(<ProtectedForm siteKey="site-key" onPost={onPost} />);
+
+    solve();
+    mockTurnstile.token = undefined;
+    act(() => mockTurnstile.props.onExpire());
+
+    expect(mockTurnstile.reset).toHaveBeenCalledTimes(1);
+    submit();
+    expect(onPost).not.toHaveBeenCalled();
+    expect(screen.getByRole('alert')).toHaveTextContent(CAPTCHA_MESSAGES.VERIFYING);
+  });
+
+  it('renders nothing and never blocks the post when no site key is configured', () => {
+    jest.useFakeTimers();
+    render(<ProtectedForm siteKey="" onPost={onPost} />);
+
+    expect(screen.queryByTestId('turnstile')).not.toBeInTheDocument();
+    act(() => jest.advanceTimersByTime(CAPTCHA_LOAD_TIMEOUT_MS * 2));
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+
+    submit();
+    expect(onPost).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/tests/js/helpers/turnstile_mock.js b/tests/js/helpers/turnstile_mock.js
new file mode 100644
index 00000000..175bb728
--- /dev/null
+++ b/tests/js/helpers/turnstile_mock.js
@@ -0,0 +1,30 @@
+// Test double for @marsidev/react-turnstile. Use it with:
+//   jest.mock('@marsidev/react-turnstile', () => require('<relative path>/helpers/turnstile_mock'));
+// It records the callbacks the page wires up (so a test can fire onSuccess / onError) and
+// exposes the imperative handle (getResponse / reset) the page reads through its ref.
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+
+export const mockTurnstile = {
+  props: null,
+  token: undefined,
+  mounts: 0,
+  reset: jest.fn(),
+  clear() {
+    this.props = null;
+    this.token = undefined;
+    this.mounts = 0;
+    this.reset.mockClear();
+  },
+};
+
+export const Turnstile = forwardRef((props, ref) => {
+  mockTurnstile.props = props;
+  useEffect(() => {
+    mockTurnstile.mounts += 1;
+  }, []);
+  useImperativeHandle(ref, () => ({
+    getResponse: () => mockTurnstile.token,
+    reset: mockTurnstile.reset,
+  }));
+  return <div data-testid="turnstile" />;
+});
diff --git a/tests/js/login/components/login-captcha.test.js b/tests/js/login/components/login-captcha.test.js
new file mode 100644
index 00000000..3bb5bd76
--- /dev/null
+++ b/tests/js/login/components/login-captcha.test.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+
+jest.mock('@marsidev/react-turnstile', () => require('../../helpers/turnstile_mock'));
+
+import { mockTurnstile } from '../../helpers/turnstile_mock';
+import { CAPTCHA_MESSAGES } from '../../../../resources/js/components/turnstile_captcha';
+import PasswordInputForm from '../../../../resources/js/login/components/password_input_form';
+import OTPInputForm from '../../../../resources/js/login/components/otp_input_form';
+
+// Once the failed-attempts threshold is reached both login forms gate their native POST on
+// a Turnstile token. Without one they must not call onAuthenticate and must ask the user to
+// wait (or offer a retry when Turnstile fails), instead of "you must check CAPTCHA".
+
+const COMMON = {
+  formAction: '/auth/login',
+  disableInput: false,
+  userNameValue: 'ada@example.com',
+  csrfToken: 'csrf-token',
+  captchaPublicKey: 'site-key',
+  loginAttempts: 3,
+};
+
+const FORMS = [
+  {
+    name: 'PasswordInputForm',
+    Form: PasswordInputForm,
+    submitLabel: /^continue$/i,
+    props: {
+      ...COMMON,
+      showPassword: false,
+      passwordValue: 'secret-password',
+      passwordError: '',
+      onUserPasswordChange: jest.fn(),
+      handleClickShowPassword: jest.fn(),
+      handleMouseDownPassword: jest.fn(),
+      handleEmitOtpAction: jest.fn(),
+      forgotPasswordAction: '/auth/password/reset',
+      maxLoginFailedAttempts: 10,
+      userIsActive: true,
+      helpAction: '/help',
+    },
+  },
+  {
+    name: 'OTPInputForm',
+    Form: OTPInputForm,
+    submitLabel: /^continue$/i,
+    props: {
+      ...COMMON,
+      otpCode: '123456',
+      otpError: '',
+      otpLength: 6,
+      otpLifetime: null,
+      codeVersion: 0,
+      onCodeChange: jest.fn(),
+      onReset: jest.fn(),
+    },
+  },
+];
+
+describe.each(FORMS)('$name captcha gate', ({ Form, props, submitLabel }) => {
+  let onAuthenticate;
+
+  const renderForm = (overrides = {}) =>
+    render(<Form {...props} onAuthenticate={onAuthenticate} {...overrides} />);
+  const clickSubmit = () => fireEvent.click(screen.getByRole('button', { name: submitLabel }));
+
+  beforeEach(() => {
+    mockTurnstile.clear();
+    // Returning false keeps jsdom from attempting the native navigation.
+    onAuthenticate = jest.fn(() => false);
+    // api.js loaded: retry resets the existing widget.
+    window.turnstile = {};
+  });
+
+  afterEach(() => {
+    delete window.turnstile;
+  });
+
+  it('has no captcha and submits normally below the failed-attempts threshold', () => {
+    renderForm({ shouldShowCaptcha: () => false });
+
+    expect(screen.queryByTestId('turnstile')).not.toBeInTheDocument();
+    clickSubmit();
+    expect(onAuthenticate).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not authenticate before Turnstile issues a token and asks the user to wait', () => {
+    renderForm({ shouldShowCaptcha: () => true });
+
+    clickSubmit();
+
+    expect(onAuthenticate).not.toHaveBeenCalled();
+    expect(screen.getByRole('alert')).toHaveTextContent(CAPTCHA_MESSAGES.VERIFYING);
+    expect(screen.queryByText(/must check captcha/i)).not.toBeInTheDocument();
+  });
+
+  it('authenticates once Turnstile has issued a token', () => {
+    renderForm({ shouldShowCaptcha: () => true });
+
+    mockTurnstile.token = 'turnstile-token';
+    act(() => mockTurnstile.props.onSuccess('turnstile-token'));
+    clickSubmit();
+
+    expect(onAuthenticate).toHaveBeenCalledTimes(1);
+  });
+
+  it('offers a retry when Turnstile fails', () => {
+    renderForm({ shouldShowCaptcha: () => true });
+
+    act(() => mockTurnstile.props.onError('200500'));
+
+    expect(screen.getByText(CAPTCHA_MESSAGES.FAILED)).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /retry security check/i }));
+    expect(mockTurnstile.reset).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not gate the submit when no site key is configured', () => {
+    renderForm({ shouldShowCaptcha: () => true, captchaPublicKey: '' });
+
+    expect(screen.queryByTestId('turnstile')).not.toBeInTheDocument();
+    clickSubmit();
+    expect(onAuthenticate).toHaveBeenCalledTimes(1);
+  });
+});