246 hcaptcha

[jerohero]

closes #246

What is it supposed to do
Adds hCaptcha to verify humans who register and login. This is done through a puzzle that appears every single time. Users can't continue until they succeed.

How can we test your branch
Unfortunately hCaptcha is a bit of a pain to test, as there are some things you need to do to get it working.

1. Set up the branch as you normally would

2. Modify the backend .env file by adding the following entries:

   #CURRENT_APP_STATE=dev
   CURRENT_APP_STATE=prod
   HCAPTCHA_PROD_SECRET_KEY=0xeCC0EA91F78De070a80f3730318055C7e69807B2
   HCAPTCHA_DEV_SECRET_KEY=0x0000000000000000000000000000000000000000

   NOTE: When CURRENT_APP_STATE is set to dev, hCaptcha is essentially disabled (the captcha will send a valid token without requiring puzzles) so it doesn't hinder development. Set the value to prod to activate it and test its functionality. So make sure it's set to dev when you're not working on captcha!

3. Add a .env file to the frontend folder and add the following entries:

   #CURRENT_APP_STATE=dev
   CURRENT_APP_STATE=prod
   HCAPTCHA_PROD_SITE_KEY=031482b3-54e1-4beb-a0d7-dce10eecfdbf
   HCAPTCHA_DEV_SITE_KEY=10000000-ffff-ffff-ffff-000000000001

   NOTE: Make sure to restart the React application after making changes to the frontend .env file.

4. Find and open your hosts file; https://docs.rackspace.com/support/how-to/modify-your-hosts-file

5. Add a reference to localhost by adding "127.0.0.1 seaqull-test.com" to the hosts file and save it.

6. Visit http://seaqull-test.com:8080/. The application should load and hCaptcha should work on the register and login page.

FINAL NOTE: Cookies don't seem to be working on a custom localhost domain. Meaning that functionality like logging out or staying logged in will probably stop working for you.

Additional notes
At the moment there's still some doubt about hCaptcha. The puzzle always appearing while logging in is annoying, and the puzzles are irritatingly difficult. At least for now it seems like a good solution until we can get reCAPTCHA working somehow.

1. General checklist

• [x] a. Tested happy flow.
• [x] b. Tested unhappy flow.
• [x] c. No unexpected exceptions.
• [x] d. No code with high complexity. (Big O)
• [x] e. EOF newline.
• [x] f. No linter warnings or errors.

2. If relevant, front-end checklist

• [x] a. Responsive. (Desktop all the way to mobile 320px)
• [x] b. Using SCSS variables where relevant.
• [x] c. Relevant class names
• [x] d. No modified global SCSS properties, except if necessary and fully tested the impact.
• [x] e. Checked caniuse for more modern CSS properties.

3. If relevant, back-end checklist

• [x] a. No unhandled promise rejections.
• [x] b. Seeders still functional.
• [x] c. No primary-key violations.
• [x] d. Normalization, at least 3NF.
• [x] e. Used guards (middleware) where necessary and tested if route is guarded.

4. If relevant, test these browsers

• [x] a. Chrome
• [x] b. Firefox
• [ ] c. Opera
• [x] d. Edge
• [ ] e. Safari

[AjobK]

Also cors url

[jerohero]

Also cors url

I removed it (like it used to be) as a custom localhost domain apparently isn't required yet.

[jerohero]

Env files changed

Frontend

HCAPTCHA_PROD_SITE_KEY=031482b3-54e1-4beb-a0d7-dce10eecfdbf
HCAPTCHA_DEV_SITE_KEY=10000000-ffff-ffff-ffff-000000000001
NODE_ENV=development
secure=false

Backend

JWT_SECRET=KGn]FCx0w~TI
JWT_EXPIRATION_TIME=600000
secure=false
HCAPTCHA_PROD_SECRET_KEY=0xeCC0EA91F78De070a80f3730318055C7e69807B2
HCAPTCHA_DEV_SECRET_KEY=0x0000000000000000000000000000000000000000
HCAPTCHA_TEST_TOKEN=10000000-aaaa-bbbb-cccc-000000000001
NODE_ENV=development