Installing reCAPTCHA v3 on the CRYSTAL v1.0 project

This instruction assumes that you already have installed domain and ssl-certificate.

1. Connecting reCAPTCHA v3.

To connect reCAPTCHA v3, you need to uncomment the code on the CRYSTAL v1.0 project, between the lines – ‘// — reCAPTCHA v3’ and ‘// — /reCAPTCHA v3’, as in the examples below:

// -- reCAPTCHA v3
    import { useRecaptchaV3 } from "../../hooks/useRecaptchaV3";
    // -- /reCAPTCHA v3

// -- reCAPTCHA v3
     const recaptchaV3PublicKey = import.meta.env.VITE_RECAPTCHA_V3_PUBLIC_KEY;
     const recaptchaV3 = useRecaptchaV3(
     recaptchaV3PublicKey,
     "Registration"
     );
     // -- /reCAPTCHA v3

Files where you need to uncomment the code:

\frontend\src\features\accessModal\AccessModal.jsx

\backend\src\routes\userRoutes.js

2. Create a .env file with the reCAPTCHA v3 public key.

Enter the command in the terminal, and replace the sample text with your reCAPTCHA v3 public key:

cd /var/www/crystal/frontend/env && echo VITE_RECAPTCHA_V3_PUBLIC_KEY=YourPublicKeyReCAPTCHAv3 > .env

Build the project with the command:

cd /var/www/crystal/frontend && pnpm buildProdDomain

3. Create a .env file with a reCAPTCHA v3 secret key.

Enter the command in the terminal, and replace the sample text with your reCAPTCHA v3 secret key:

cd /var/www/crystal/backend/env && echo RECAPTCHA_V3_SECRET_KEY=YourSecretKeyReCAPTCHAv3 >> .env

Restart the PM2 process with the command:

pm2 restart 0

5. Checking reCAPTCHA v3.

You can check if reCAPTCHA v3 works by going to the ‘reCaptchaV3.js’ file in the utils folder, along the path – ‘backend\src\utils\reCaptchaV3\reCaptchaV3.js’, and change the line – ‘else if (body.score < 0.5)’, to ‘else if (body.score < 1.5)’ , update the code on the project, as in point 16, instructions for deploying CRYSTAL v1.0 on VPC.

In this case, in order to update the project code on the VM and restart the PM2 process, you need to enter the command:

cd /var/www/crystal && git pull && pm2 restart 0

After updating the project code on the VM, open the site with the project in the Chrome browser and press ‘f12’, go to the tab – ‘Network’, do a test registration without closing the tab, click on the tab, the item ‘registration’ that appears, then select the item – ‘Answer’ in the menu that appears, there should be a line – ‘Registration error, possibly a bot detected’, this means that reCAPTCHA v3 works, since the maximum allowed score is 0.9 and you will not be able to register.

Change the line back to – ‘else if (body.score < 0.5)’, and refresh the project, then re-register, registration should be successful.