# Enable CAPTCHA Protection

Add CAPTCHA Protection to your Supabase project

Supabase provides you with the option of adding CAPTCHA to your sign-in, sign-up, and password reset forms. This keeps your website safe from bots and malicious scripts. Supabase authentication has support for [hCaptcha](https://www.hcaptcha.com/) and [Cloudflare Turnstile](https://www.cloudflare.com/application-services/products/turnstile/).

## Sign up for CAPTCHA

Go to the [hCaptcha](https://www.hcaptcha.com/) 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.

![site_secret_settings.png](/docs/img/guides/auth-captcha/site_secret_settings.png)

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

![sites_dashboard.png](/docs/img/guides/auth-captcha/sites_dashboard.png)

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

![sitekey_settings.png](/docs/img/guides/auth-captcha/sitekey_settings.png)

Go to the [Cloudflare website](https://dash.cloudflare.com/login) and sign up for an account. On the Welcome page, head to the Turnstile section and add a new site. Create a site and take note of the **Sitekey** and **Secret Key** as shown below
![cloudflare_settings.png](/docs/img/guides/auth-captcha/cloudflare_settings.png)

## Enable CAPTCHA protection for your Supabase project

Navigate to the **[Auth](/dashboard/project/_/auth/protection)** section of your Project Settings in the Supabase Dashboard and find the **Enable CAPTCHA protection** toggle under Settings > Authentication > Bot and Abuse Protection > Enable CAPTCHA protection.

Select your CAPTCHA provider from the dropdown, enter your CAPTCHA **Secret key**, and click **Save**.

## Add the CAPTCHA frontend component

The frontend requires some changes to provide the CAPTCHA on-screen for the user. This example uses React and the corresponding CAPTCHA React component, but both CAPTCHA providers can be used with any JavaScript framework.

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

```bash
npm install @hcaptcha/react-hcaptcha
```

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

```javascript
import HCaptcha from '@hcaptcha/react-hcaptcha'
```

Let's create a empty state to store our `captchaToken`

```jsx
const [captchaToken, setCaptchaToken] = useState()
```

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

```jsx

```

We will 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. Let's set the token in the state using `setCaptchaToken`

```jsx
 {
    setCaptchaToken(token)
  }}
/>
```

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

```jsx
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.

```jsx
const captcha = useRef()
```

Let's add a ref attribute on the `HCaptcha` component and assign the `captcha` constant to it.

```jsx
 {
    setCaptchaToken(token)
  }}
/>
```

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

```jsx
captcha.current.resetCaptcha()
```

In order to test that this works locally we will need to use something like [ngrok](https://ngrok.com/) or add an entry to your hosts file. You can read more about this in the [hCaptcha docs](https://docs.hcaptcha.com/#local-development).

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.

```bash
npm install @marsidev/react-turnstile
```

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

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

Let's create an empty state to store our `captchaToken`

```jsx
const [captchaToken, setCaptchaToken] = useState()
```

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

```jsx

```

We will 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. Let's set the token in the state using `setCaptchaToken`:

```jsx
 {
    setCaptchaToken(token)
  }}
/>
```

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

```jsx
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](https://developers.cloudflare.com/turnstile/reference/testing/)

Run the application and you should now be provided with a CAPTCHA challenge.