Skip to main content

React

Add hCaptcha to a React form with the official React component. It also supports Preact.

Install​

npm install @hcaptcha/react-hcaptcha

Get your public sitekey from Sites. Keep your secret on your server.

Add the widget​

The component loads the SDK automatically. This form sends h-captcha-response to your /login endpoint with the other fields.

import HCaptcha from '@hcaptcha/react-hcaptcha';

export default function LoginForm() {
  return (
    <form method="POST" action="/login">
      <input type="email" name="email" required />
      <input type="password" name="password" required />
      <HCaptcha sitekey="YOUR_SITE_KEY" />
      <button type="submit">Log in</button>
    </form>
  );
}

For asynchronous submissions, capture the token with onVerify, clear it on onExpire and onError, and call resetCaptcha() through a component ref after each attempt. Tokens cannot be reused. In Next.js App Router, place the widget in a Client Component with 'use client'.

Verify and test​

Your backend must verify the token before processing the login. See the Node.js example.

Use test keys and confirm missing or invalid tokens are rejected. Follow the local development instructions when running locally.