User authentication in MERN stack (Frontend and Backend connection)

Throughout this informative journey of User authentication in MERN stack till now we have seen-

• User authentication in MERN stack (Backend)

• User authentication in MERN stack (Frontend)

In this tutorial we will be concentrating on the Frontend and the Backend connection.

• We will take a closer look at the CORS error and also the solution for the same.

Prerequisites

• Basic understanding of form handling in react.(Form handling)

So lets begin with the connection.

Signup Form

First of all we will create a function to handle the form on submit.

In this function-

• First we are taking the values of all the fields.

• Then asynchronously using async and await we are setting up the fetch function where

  • First parameter is the URL of the backend server.
  • Then we specify the method i.e method:"POST".
  • After specifying the method we set the headers i.e headers:{ "Content-Type":"application/json" } and send the content of the field in the string format using body:JSON.stringify({ username, email , password , confirmpassword })

Once the function is completed we will call it from the Submit button using onClick.

Login Form

The setup of the function which handles the form on submit is similar to the signup form onRegister function.

And once the function setup is done we call the function in the submit button similar to signup form.

Once the login and the signup form setup is completed the major part is handling the CORS error.

Now lets take a quick peek at the CORS error:

The CORS error can be solved by adding the Proxy server in the package.json file of the Client side

So in this tutorial we have seen the connection of Frontend and Backend. We have covered -

• The setup of the function that handles the login and the signup form on submit.
• The CORS error. Also the solution for the same.

With this, we have completed the user authentication in MERN stack.