Auth

Enable Captcha Protection

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 and Cloudflare Turnstile.

Sign up for Captcha

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.

site_secret_settings.png

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

sites_dashboard.png

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

sitekey_settings.png

Enable Captcha protection for your Supabase project

Navigate to the Auth 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.


_10
npm install @hcaptcha/react-hcaptcha

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


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

Let's create a empty state to store our captchaToken


_10
const [captchaToken, setCaptchaToken] = useState()

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


_10
<HCaptcha />

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


_10
<HCaptcha
_10
sitekey="your-sitekey"
_10
onVerify={(token) => {
_10
setCaptchaToken(token)
_10
}}
_10
/>

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


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

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.


_10
const captcha = useRef()

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


_10
<HCaptcha
_10
ref={captcha}
_10
sitekey="your-sitekey"
_10
onVerify={(token) => {
_10
setCaptchaToken(token)
_10
}}
_10
/>

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


_10
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.

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