Captcha

import { useRef, useState } from "react";
import { Captcha, type CaptchaHandle } from "@itzsa/captcha";

export function LoginGate() {
  const captchaRef = useRef<CaptchaHandle>(null);
  const [verified, setVerified] = useState(false);

  function handleCaptchaVerified(valid: boolean) {
    setVerified(valid);
  }

  function onSubmit() {
    // Imperative check before submit
    if (!captchaRef.current?.validate()) return;
    // …submit form
  }

  return (
    <>
      <Captcha ref={captchaRef} onVerified={handleCaptchaVerified} />
      <button type="button" disabled={!verified} onClick={onSubmit}>
        Continue
      </button>
    </>
  );
}

const [apiError, setApiError] = useState<string | null>(null);

<Captcha
  ref={captchaRef}
  error={apiError}
  maxAttempts={5}
  verify={async ({ value, challengeId }) => {
    const res = await fetch("/api/captcha/verify", {
      method: "POST",
      body: JSON.stringify({ value, challengeId }),
    });
    if (!res.ok) throw new Error("verify_failed"); // → onError + status "error"
    return true;
  }}
  onError={(err) => console.warn(err.code, err.message)}
  onVerified={handleCaptchaVerified}
/>