Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

Setup ReCaptcha and define CORS

Setup ReCaptcha and define CORS

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

Setup ReCaptcha and define CORSPrevious article: Optimize App and Setup Deployment Workflow.

For the Frontend, we will use ReCaptcha protected form;

For backend, we will define CORS, which will be receiving requests only from the Frontend.

Setup ReCaptcha protected frontend

Step one: We will get Recaptcha key from Google

Google Recaptcha setting domain page

Google Recaptcha setting domain page

Step two: Add our whitelist domain, then choose localhost and Netlify, then grab Recaptcha key, and finally, set up on Netlify first

Google Recaptcha api key

Google Recaptcha api key

Step three: Setting up on Netlify. Go to Netlify dashboard and setup Recaptcha Key as an environment variable

Netlify deploy setting page

Netlify deploy setting page

Step four: Now come back to local and install React Captcha package

Step five: Next step is to import Recaptcha

Step six: Add validation rule name Recaptcha as required

Step seven: We will create a function for initializing Recaptcha

Last step: Add <Recaptcha> component and a validation message

Your final result should look like the image below

ReCaptcha to login page

add ReCaptcha to login page

One more step: We’ll be adding register and forgot password form

add ReCaptcha to register page

add ReCaptcha to register page

add ReCaptcha to login page

add ReCaptcha to login page

You will be able to fill all input, but can’t submit without resolving the Recaptcha

this image show result when we didn't verify ReCaptcha

ReCaptcha require validation

The last thing is to push to GitHub which will also auto-deploy to Netlify

Setup CORS protected backend

Now we want to add whitelist IP or domain name to CORS option, open index.js on backend side then update CORS as seen in the image below;

If an error occurs, try changing to another domain

display CORS error result

CORS error result

Now push the updated code to Github. Finally, we can now protect our backend from unknown request

Conclusion

In this chapter, we have learned how to make our apps safe on the internet by setting up Recaptcha on React and CORS on Express. next chapter we will add redux that make our app are solid foundation one last thing your will find code for this chapter on this backend branch and frontend branch

 

Previous lessons:

Create Simple POS With React, Node and MongoDB #4: Optimize App and Setup Deployment Workflow
Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp
Create simple POS with React, Node and MongoDB #2: Auth state, Logout, Update Profile
Create a simple POS with React, Node and MongoDB #1: Register and Login with JWT

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. ...

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

Create simple POS with React.js, Node.js, and MongoDB #14: Export PDF, Excel, CSV, Bulk Delete, Inline Editing

In this chapter, we are going to continue from where we left off from the previous chapter. We are about to add more features to our react table to ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy