Authentication with React and Node

5 min readOct 11, 2021

In the previous article I have explained how to authenticate in Node.js using bcryptjs and storing the data in a token.

In this article I will be continuing the same article but this time I will be connecting the frontend with backend i.e. connecting React.js to Node.js.

Prerequisites

To follow along with this tutorial, you will need have a look at my previous article: Authentication in Node.js

First we need to create our React.js app using a terminal command:

npx create-react-app frontend

The above command with take few minutes to execute. You can replace the “frontend” with the name of your choice. For simplicity purpose I have named it as frontend to differentiate between Node.js and React.js folders.

Once the command is successfully executed, you will be able to see something like this. This means that you have created the React.js app.

Now navigate to frontend folder using your terminal and execute a command “npm start”.

This will start your React.js app on port 3000 (default) and you can now see the basic prebuilt react template on this url: “http://localhost:3000/”.

Now open the main folder containing frontend and backend in your Visual Studio Code.

Now navigate to backend folder>src> and open a file app.js. You will see something like this:

Let now clear the code and write our own code:

Lets place a heading 1 in the div and see the output.

Creating a Login component

Now we will be making a login component in React and display the login form.

Before making a component, we will make a folder called components in src that will contain all the components.

Now the component is created, lets import it in App.js so that we can display the output.

Now once you start making any changes in Login component you will be able to see those changes on “http://localhost:3000/”

I have made this simple form with css/styling in index.css.

Handling User input

Now since we have created a form lets handle the user inputs and save it in a state using useState hook.

Here we have made two states called username and password respectively. We are also getting user value on input change and inserting the values in the states.

Next we will be sending the data of states to our backend using Axios.

Using Axios in React.js

Axios is a promise based HTTP client for the browser and Node. js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. It can be used in plain JavaScript or with a library such as Vue or React.

Installing Axios:

Run the following command in your frontend terminal:

npm install axios

Once axios if installed and initializing we will add an onClick function to our login button.

<button className=”btn btn-primary” onClick={login}>Login</button>

Lets make a function called Login and make a post request to backend route “/login” where we will be sending credentials to our backend server.

Now since we are sending the user credentials to backend and logging the response that we are getting from backend into our web browser console.

You might get an error as above. This is CORS error also called as Cross-origin resource sharing.

What is CORS

Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

CORS Error Solution:

To solve/remove cors error we will define our frontend port to backend and allow all request to our backend.

We will be install cors into our node.js backend terminal using the following command

npm install axios

Now reload the page and again try to login from your login form and see if the error is removed.

Now you might see this in your browser console. Lets expand it and see what this response contains.

Now there is too much details for us. We will only be using data.

Adding h5 and setting its value to status. I have initialized status useState.

var [status, setStatus] = useState(“”);

Let handle our axios responses.

Axios Response

Now here we are checking the responses the we are getting from backend after submitting user credentials.

Here we have made 3 conditions if the response is User authenticated! then we will set status to “User authenticated!”, if the response is Incorrect credentials! then we will set status to “Incorrect credentials!”, and the third condition is if we get and other unexpected response we will set it to Something went wrong!.

Lets see few screenshots.