Enable CAPTCHA Protection

Go to the hCaptcha website and sign up for an account. On the Welcome page, copy the Sitekey and Secret key.

If you have already signed up and didn't copy this information from the Welcome page, you can get the Secret key from the Settings page.

The Sitekey can be found in the Settings of the active site you created.

In the Settings page, look for the Sitekey section and copy the key.

Sign in to the Cloudflare dashboard and create a Turnstile widget by following Cloudflare's Create a widget guide.

Once the widget is created, copy the Sitekey and Secret Key — you need them in the next steps.

Install @hcaptcha/react-hcaptcha in your project as a dependency.

npm install @hcaptcha/react-hcaptcha

Now import the HCaptcha component from the @hcaptcha/react-hcaptcha library.

import HCaptcha from '@hcaptcha/react-hcaptcha'

Create an empty state to store the captchaToken

const [captchaToken, setCaptchaToken] = useState()

Now lets add the HCaptcha component to the JSX section of our code

Pass it the sitekey we copied from the hCaptcha website as a property along with a onVerify property which takes a callback function. This callback function will have a token as one of its properties. Set the token in the state using setCaptchaToken

Now lets use the CAPTCHA token we receive in our Zuvo signUp function.

await supabase.auth.signUp({
  email,
  password,
  options: { captchaToken },
})

We will also need to reset the CAPTCHA challenge after we have made a call to the function above.

Create a ref to use on our HCaptcha component.

const captcha = useRef()

Add a ref attribute on the HCaptcha component and assign the captcha constant to it.

Reset the captcha after the signUp function is called using the following code:

captcha.current.resetCaptcha()

In order to test that this works locally we will need to use something like ngrok or add an entry to your hosts file. You can read more about this in the hCaptcha docs.

The frontend requires some changes to provide the CAPTCHA on-screen for the user. Turnstile can be used with any JavaScript framework but we'll use React and the Turnstile React component for this example.

Install @marsidev/react-turnstile in your project as a dependency.

npm install @marsidev/react-turnstile

Now import the Turnstile component from the @marsidev/react-turnstile library.

import { Turnstile } from '@marsidev/react-turnstile'

Create an empty state to store the captchaToken

const [captchaToken, setCaptchaToken] = useState()

Now lets add the Cloudflare Turnstile component to the JSX section of our code:

Pass it the sitekey we copied from the Cloudflare website as a property along with a onSuccess property which takes a callback function. This callback function will have a token as one of its properties. Set the token in the state using setCaptchaToken:

We can now use the captchaToken we receive in our Zuvo signUp function.

await supabase.auth.signUp({
  email,
  password,
  options: { captchaToken },
})

To test locally, you will need to add localhost to the domain allowlist as per the Cloudflare docs