mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Kang MingandAndrew Smith
1e6745b7bc
* docs: add captcha guide * Update code syntax highlighting to use javascript Co-authored-by: Andrew Smith <andrew@supabase.io>
114 lines
3.6 KiB
Plaintext
114 lines
3.6 KiB
Plaintext
---
|
||
id: auth-captcha
|
||
title: 'Enable Captcha Protection'
|
||
description: Add Captcha Protection to your Supabase project
|
||
---
|
||
|
||
import Tabs from '@theme/Tabs'
|
||
import TabItem from '@theme/TabItem'
|
||
|
||
# hCaptcha guide
|
||
|
||
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/).
|
||
|
||
### Sign up for hCaptcha
|
||
|
||
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.
|
||
|
||
|
||
|
||
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.
|
||
|
||
|
||
|
||
### Enable hCaptcha protection for your Supabase project
|
||
|
||
Navigate to the **[Authentication](https://app.supabase.com/project/_/auth/settings)** page in the Supabase Dashboard and find the **Enable hCaptcha protection** toggle under the **Security and Protection** section.
|
||
|
||
|
||
|
||
Enter your hCaptcha **Secret key** and click **Save**.
|
||
|
||
### Add the hCaptcha frontend component
|
||
|
||
The frontend requires some changes to provide the captcha on-screen for the user. This example uses React and the hCaptcha React component, but hCaptcha 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
|
||
|
||
```html
|
||
<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`
|
||
|
||
```jsx
|
||
<HCaptcha
|
||
sitekey="your-sitekey"
|
||
onVerify={(token) => { 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
|
||
<HCaptcha
|
||
ref={captcha}
|
||
sitekey="your-sitekey"
|
||
onVerify={(token) => {
|
||
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).
|
||
|
||
Run the application and you should now be provided with a captcha challenge.
|