# Captcha

To begin working with Google reCAPTCHA you should register your website on official google captcha website:

{% embed url="<https://www.google.com/recaptcha>" %}

After you registered you will see dashboard where you will be able to see analytics about how many users passed/failed captcha or how many users passes captcha without check. To get .env variables and setup other settings click on following icon:

<figure><img src="/files/t8b9pUsXtLdOe9AtH49b" alt=""><figcaption></figcaption></figure>

On settings page you will see next sections:

* reCAPTCHA keys - open that sections to see your .env variables (`SITE_KEY` and `SECRET_KEY`)
* Domains - add your production, stage domens here and do not forget to add localhost for correct captcha work while development
* Owners - add emails which you want grant access to captcha admin panel
* Security Preference - set up captcha diffuculty

<figure><img src="/files/X0nvD5WjS3JARNEARENQ" alt=""><figcaption></figcaption></figure>

After that you should set up **.env** variables to **ui** and **api**. In **api/.env** add variable `CAPTCHA_SECRET_TOKEN` with value of generated previously `SECRET KEY` (do the same on production deploy). In **ui** folder for development add `REACT_APP_CAPTCHA_SECRET` to **.env.develpment** with value of your `SITE_KEY`.

For correct build on frontend you should also add `REACT_APP_CAPTCHA_SECRET` to **.github/ui.yml** `builds-args` and for production add that argument to Dockerfile\_ui with following syntax:

```dockerfile
ARG REACT_APP_CAPTCHA_SECRET
ENV REACT_APP_CAPTCHA_SECRET=$REACT_APP_CAPTCHA_SECRET
RUN echo $REACT_APP_CAPTCHA_SECRET
```

To add reCAPTCHA on frontend you need to install `react-google-recaptcha`. After that use ReCAPTCHA component on your page:

```javascript
                <ReCAPTCHA
                    sitekey={constants.CAPTCHA_SECRET}
                    ref={captchaRef}
                    onChange={handleCaptchaChange}
                />
```

For correct usage pass required prop sitekey with value of your `REACT_APP_CAPTCHA_SECRET` variable. Moreover for correct reseting reCAPTCHA create reference with `useRef()` hook. You will be able to reset your reCAPTCHA in case of error or else cases in the following way:

```javascript
captchaRef.current.reset();
```

The `handleCaptchaChange` function will execute when the user completes the captcha, setting the generated captcha token in the page state. This token will then be passed to the API in the sign-in request. Code example:

```javascript
    const handleCaptchaChange = token => {
        setCaptchaToken(token);
    };
```

On backend you should add call to google api which will check if token is valid, you can write this check in controller or in service. Make a post request to google api on following URL:

```typescript
`https://www.google.com/recaptcha/api/siteverify?secret=${constants.CAPTCHA_SECRET_TOKEN}&response=${captchaToken}`
```

You should pass your secret key and token to check in search params. Then add check if `response.data.success` is true. If it is **false** throw `BadRequestException`. Full code example:

```typescript
@Post('sign-in')
    async authSignIn(
        @Body('credentials') credentials: AuthPayload,
        @Body('captchaToken') captchaToken
    ): Promise<UserTokens> {
        const response = await axios.post(
            `https://www.google.com/recaptcha/api/siteverify?secret=${constants.CAPTCHA_SECRET_TOKEN}&response=${captchaToken}`
        );

        if (!response.data.success) {
            throw new HttpException(
                {
                    message: 'Error',
                    description: 'Captcha token is not valid',
                    code: 'INVALID_CAPTCHA',
                },
                HttpStatus.BAD_REQUEST
            );
        }

        return await this.authService.emailPwdAuth(credentials);
    }
```

{% hint style="danger" %}
Token is valid only once and expires in 2 minutes.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://intercode.gitbook.io/intercode-saas-kit/features/captcha.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.