React CAPTCHA Integration

Create a user account or log in with an existing one. Then create a new CAPTCHA or select an existing one. If you’re unsure whether TrustCaptcha is right for you, try our CAPTCHA service risk-free for 14 days at no cost.

On the CAPTCHA overview page, you will find all the important information, such as the site key, secret key and licence key. Allow your websites to access your CAPTCHA by simply adding them to the access authorised domain list in the CAPTCHA security rules.

The following steps give you a rough idea of how to integrate the TrustCaptcha CAPTCHA widget into an React frontend. For precise, detailed instructions, please read the CAPTCHA integration guide for React in our documentation.

First, install our TrustCaptcha React package:

npm i @trustcomponent/trustcaptcha-react

Now insert the CAPTCHA widget, the so-called trustcaptcha-component HTML tag, into any HTML form:

import {TrustcaptchaComponent} from "@trustcaptcha/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?
For detailed instructions on integrating TrustCaptcha, please refer to our React CAPTCHA integration guide. A complete integration example for the React CAPTCHA can be found in our CAPTCHA Samples Repository on Github.

Other frontend technology instead of React?
If you do not want to use React or have several websites or applications, you can select a different framework or platform here. If there is no pre-built integration from us for your preferred frontend technology, your software developers can integrate the CAPTCHA themselves using our documentation or ask our support-team for a pre-built integration solution.

Once the CAPTCHA is complete, take the verification token and send it to your backend. In your backend, retrieve the CAPTCHA verification result from our servers and validate the result. Depending on how high the bot risk is, you decide how to proceed. You can find detailed information on backend integration and result validation in our documentation.

Prebuild backend integrations
You can use one of our pre-built integrations to integrate the CAPTCHA validation process into your backend service. If there is no pre-built integration from us for your preferred backend technology, your software developers can integrate the CAPTCHA themselves using using our documentation or ask our support-team for a pre-built integration solution.

You are now protected by TrustCaptcha - congratulations!