Installing reCAPTCHA v3 on the CRYSTAL v1.0 project

These instructions assume that you already have connected domain and ssl certificate.

1. Enabling reCAPTCHA v3.

reCAPTCHA v3 will be triggered when a user registers, to enable it 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";
import { RECAPTCHA_V3_PUBLIC_KEY } from "../../constants/index.js";
// -- /reCAPTCHA v3

// -- reCAPTCHA v3 
const recaptchaV3 = useRecaptchaV3( 
RECAPTCHA_V3_PUBLIC_KEY, 
"Registration" 
); 
// -- /reCAPTCHA v3

Files where you need to uncomment the code:

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

\backend\src\routes\user-routes.js

2. Creating 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 && npm run buildProdDomain

3. Creating a .env file with the 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

4. 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 on 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 is working, 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, the registration should be successful.