https://github.com/alicw/emailjs-with-recaptcha-v3-demo

Web email form demo with Google reCAPTCHAv3
https://github.com/alicw/emailjs-with-recaptcha-v3-demo

axios captcha dotenv emailjs express expressjs postgres postgresql react react-router reacthook reacthooks reactjs recaptchav3 webpack

Last synced: about 2 months ago
JSON representation

Web email form demo with Google reCAPTCHAv3

• Host: GitHub
• URL: https://github.com/alicw/emailjs-with-recaptcha-v3-demo
• Owner: AliCW
• Created: 2024-08-19T23:23:29.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T21:51:13.000Z (4 months ago)
• Last Synced: 2024-10-16T12:21:14.470Z (2 months ago)
• Topics: axios, captcha, dotenv, emailjs, express, expressjs, postgres, postgresql, react, react-router, reacthook, reacthooks, reactjs, recaptchav3, webpack
• Language: JavaScript
• Homepage:
• Size: 792 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# EmailJS-with-reCAPTCHA-v3-demo

Both front & backend are built with JavaScript. The backend uses postgresql (https://www.postgresql.org/) & express (https://expressjs.com/) with JS to seed & query the database. The frontend uses ReactJS with hooks (https://react.dev/) utilising webpack (https://webpack.js.org/) as configuration.

The repo provides basic email functionality provided utilising EmailJS (https://www.emailjs.com/) with google reCAPTCHA-v3 running (https://developers.google.com/recaptcha) in the background. The user is tested against reCAPTCHA for bot checking, for the purposes of demonstration, no failing score has been currently set. The email form itself requires name, message & reply address, providing the captcha does not fail, the backend is queried for the emailKS keys & templates & sent. The address recipient & email template defintions are expressed within the emailJS settings.

## Setup

Clone the repository:

    git clone https://github.com/AliCW/EmailJS-with-reCAPTCHA-v3-demo.git

Register a new site with reCAPTCHA & select version 3 (https://www.google.com/recaptcha/admin/create) - for the purposes of this demonstration, the only domain added is `localhost`. Be sure to make note of the `Site Key` & `Secret Key`.

Sign in & register with emailJS (https://dashboard.emailjs.com/sign-in). Add your target email address to the dashboard & edit the template if required. Make note of the public key, private key, service ID & template ID.

## BE

Initialise the /be folder:

    npm init

Create environment variables in the be/ root, `.env.test` & `.env.development` & assign the database names; `.test` as `PGDATABASE=emailjs_demo_test` & `.development` as `PGDATABASE=emailjs_demo`. The default address is set to 127.0.0.1:9090

Create your development data structure, the format should be identical to the test data but with the keys replaced. You can change the run-seed.js file to swap between seeding the test & development data if you wish. Once set, run the below to create the databases:

    npm run setup-dbs

Now seed the database:

    npm run seed

Start the database: 

    npm start

### Endpoints

Return all public keys

    GET - 127.0.0.1:9090/api/all/public_keys

Return reCAPTCHA public key

    GET - 127.0.0.1:9090/api/email_js/public_key

Returns emailJS public key & templates used for

    GET - 127.0.0.1:9090/api/send_email

Checks the user's reCAPTCHA response with google

    POST - 127.0.0.1:9090/api/reCAPTCHA/check, {"props": }

## FE

Initialise the /fe folder:

    npm init

To start the frontend:

    npm start

The default address is set to 127.0.0.1:3000

Once arriving at the webpage, the users is checked by reCAPTCHA & verified by google on the backend, if verification fails, the form is automatically closed & displays & error response element to the user.