Captcha

Here you can read how to set up Google reCAPTCHA

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

reCAPTCHAreCAPTCHA

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:

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

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:

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:

                <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:

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:

    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:

`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:

@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);
    }

Token is valid only once and expires in 2 minutes.