React CAPTCHA Integration

Create a user account or log in with an existing one. Then create a new CAPTCHA or pick an existing one. If you want to try TrustCaptcha first, every plan comes with a 14-day free trial.

The CAPTCHA overview page shows your site key and license key, and you create your API key there. Add your website’s domains to the authorized domains in the CAPTCHA security rules so they can use your CAPTCHA.

The following steps show roughly how to add the TrustCaptcha widget to a React frontend. For the full instructions, read the CAPTCHA integration guide for React in our documentation.

First, install our TrustCaptcha React package:

npm i @trustcomponent/trustcaptcha-react

Then add the CAPTCHA widget, the trustcaptcha-component HTML tag, to any HTML form:

import {TrustcaptchaComponent} from "@trustcomponent/trustcaptcha-react";

function App() {

  function handleSuccess(verificationToken) { /* handle success */ }

  function handleError(error) { /* handle error */ }

  return (
    <div>
      <form>
        <!-- your input fields -->
        <TrustcaptchaComponent
          sitekey="<your_site_key>"
          onCaptchaSolved={event => handleSuccess(event.detail)}
          onCaptchaFailed={event => handleError(event.detail)}
        ></TrustcaptchaComponent>
        <!-- further input fields / submit button -->
      </form>
    </div>
  );
}

export default App;

The CAPTCHA widget will now be displayed on your React website:

Need detailed information about the React CAPTCHA integration?
Our React CAPTCHA integration guide has the detailed instructions, and our CAPTCHA samples repository on GitHub has a complete integration example.

Other frontend technology instead of React?
If you build with something other than React, or run several websites and apps, pick a different framework or platform here. If we have no pre-built integration for your frontend technology yet, your developers can integrate the CAPTCHA themselves using our documentation or ask our support team for a pre-built integration.

When the CAPTCHA is complete, send the verification token to your backend. There, fetch the verification result from our servers and check it. How you proceed depends on the bot risk. You can find details on backend integration and result validation in our documentation.

Pre-built backend integrations
Our pre-built integrations add the CAPTCHA validation to your backend service. If there is none for your backend technology yet, your developers can integrate the validation themselves using our documentation or ask our support team for a pre-built integration.

TrustCaptcha is now active. Send a test request and check that it goes through.