🕸️Add it to your web app

After you have chosen a human proof service, you need to add the humanity proof service to your web application.

In this tutorial, we will show how to add it to React, but it can be implemented with any kind of library or framework.

First, we need to add the library of hCaptcha to our project, by using the command below:

npm install @hcaptcha/react-hcaptcha

Once you have installed the react-hcaptcha library, you need to import it on the file that will perform the call to the smart contract

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

After we installed the library and imported it in the component, we will add it to our code. Also, we need to import the clu3.js file, this function is the one that will send the information to our clu3 service.

// clu3. js file 
const clu3 = async (token, url, address) => {
    
    if (!token) {
        return {
            "type": 'error',
            "message": 'Please complete the captcha'
        };
    }

    const options = {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json;charset=UTF-8",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            'Access-Control-Allow-Headers': "Content-Type, Authorization",
        },
        body: JSON.stringify({
            token,
            senderAddress: address,
        }),

    };
    const myResponse =  fetch(url, options)
    .then((result) => result.json()).then(data =>{
        return data;
    });
 
    return myResponse;
};

export default clu3;

import clu3 from '../clu3.js';
const [token, setToken] = useState('');
const [args, setArgs] = useState<any[]>([]);
const [error, setError] = useState('');

const captchaRef = useRef<any>(null);

useEffect(() => {
        async function getClu3() {
            let url = config.url.API_URL +  'verify';
            let response = await clu3(token, url, address)
            if (response?.success) {
                setRes(response?.data);
                setArgs([response?.data.timestamp, response?.data.messageSignature])
            } else {
                setError(response.error)
            }
        }

        if (token)
            console.log(`hCaptcha Token: ${token}`);
            getClu3();
    
    }, [token]);

// On the return statement
<Captcha
    sitekey="YOUR_SITE_KEY_FROM_PREVIOUS_STEP"
    onLoad={onLoad}
    onVerify={setToken}
    ref={captchaRef}
    onExpire={() => setToken('')}
/>

After you have all set, next we go with the clu3-service