Login App – Create login form in ReactJS using secure REST API – Part 3

Today we’ll show you how to create login form in ReactJS using secure REST API with example. It’s the last part of the login application where we will create the login form in ReactJS and integrate the Node.js secure REST API.

Way to create login form in ReactJS using secure REST API

  1. Create secure REST API
  2. Setup react application
  3. Create react components like Home, Login and Dashboard
  4. Implement authenticated routes
  5. Output

1. Create secure REST API

To create login application, we need secure REST API to integrate into the application. So we have already created the REST API in Node.js for authentication. Kindly refer the below article to create it or clone it from the GitHub repository.

Login App – Create REST API for authentication in Node.js using JWT – Part 2

After that just run the project so we can consume the REST API.

2. Setup react application

First, Let’s setup the simple react application to implement the login functionality. Following link will help you to create basic react application.

Create React Application

3. Create react components like Home, Login and Dashboard

Refer below link for routing, if you don’t know how to implement routing in react app.

Routing in React JS

For demo purpose we are creating these components and updating the css in “src” directory.

Home.js

Login.js

Dashboard.js

App.js

index.js

index.css

4. Implement authenticated routes

  • Create common utils

    To manage the login and logout functionality, we need to create a few functions in “Common.js” file which will help us to manage token and user data using sessionStorage. Here we create this file in “src/Utils” directory.

    src/Utils/Common.js

  • Integrate sign in API

    Let’s integrate the “/users/signin” API on the click event of the login button. Refer below link if you don’t know how to call API in ReactJS.

    API call in React JS

    Here, we used the axios for the API call. After successful login, we are storing the response data in sessionStorage and redirect it to the dashboard page. Also managing the loading and error flag via useState.

    src/Login.js

  • Manage the logout in dashboard

    On click of the Logout button, we are removing the data from the sessionStorage and redirect it to the login page. Also we are showing the user name on page of the Dashboard.

    src/Dashboard.js

  • Create public and private routes

    Utils/PrivateRoute.js

    Utils/PublicRoute.js

    Now we have to slightly update the routes in “App.js” to implement authentication.

  • Handle the browser refresh

    At last, we have to handle the browser refresh to authenticate the application. For that we will integrate one more API called “/verifyToken” and manage the authentication flag. Based on the authentication flag we will manage the loading screen.

    App.js

5. Output

Output - Create login form in ReactJS using secure REST API - Clue Mediator
Output – Create login form in ReactJS using secure REST API – Clue Mediator

In this article, we have covered the general straight forward flow of the authentication. Check out the below article where you will find the more secure way to implement authentication including refresh token and CSRF protection.

Login App with CSRF protection

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

15 Responses

  1. parsa says:

    hi clue its a very very helpful article thank you , but i have a huge problem with that and that is i can create a fake jwt token in my browser before login and can access to the privateroute how can i deal with that ?

    • Clue Mediator says:

      Hi, Parsa,
      Thank you for referring the article.

      You can follow the Part-2 article. This is all about the backend API including JWT token in Node.js.

      If you don’t know about the Node.js then you can directly clone the repository and start the project. Postman collection is also there to test the API.

      If you are still facing the issue then let us know we will help you to setup Part 2 and in future we are planning to host backend API on server so any one can access it for demo.

      Let us know if you still have any queries.

      Follow us on Facebook & Twitter to get latest update.
      – Clue Mediator

  2. parsa says:

    thanks for replying ,
    yeah i’ve done the node js and my server is responsing for veryfing token but in react i got confused in the privateroute part i use the getToken() method and this method just returning the sessionStorage token so i can simply change the sessionStorage token without login and type my component path in the url and get into it so is there any way to send the verify request to the server when routing ?

    • Clue Mediator says:

      Hi Parsa,
      You are right. Anyone can update the value of the sessionStorage and try to access the private routes. But in real project your private route is also verified with the next API request. Because after login your all API contains the token so it will be verify and if that is invalid or unauthorized then you can make force logout via middleware in ReactJS.

      In alternative way, you can use secure and httponly cookie to manage the token. We will write separate article on it.

      You can subscribe us for weekly email update of our news & articles.

      – Clue Mediator

  3. Iweb says:

    Hello,

    thank you very much for the effort provided and quite well detailed.

    just a question, I try to show / hide the “login” link if the user is already logged in, can you tell me how to do it please?

    • Clue Mediator says:

      Hello Iweb,
      We are glad you liked it.

      You can use the access token via localStorage to show/hide login link.

      Let us know if you still have any queries.

      Like us on Facebook & Share it.
      Happy Coding..!!!

  4. Ade Supriyadi says:

    Is it good for security, save token to session storage?
    we can see the token via inspect

    • Clue Mediator says:

      Hello Ade,
      You are right anyone can see the token via inspect. But make sure you are not going to store any sensitive details inside the token. In the alternative way, you can use the secure and httponly cookie to store the token.

      In the upcoming days, we will write the separate article on it.

      Subscribe us for weekly update or like and follow us for regular update.
      Happy Coding..!!!

  5. Ade Supriyadi says:

    Ok, I’ll wait that tutorial about secure and httponly cookie.

    I was subscribe.

    thank’s

  6. Diaa Saber says:

    Hello,
    Thank you very much for your effort. It really helped a lot.
    I have a question. So after generating the JWT token in the backend side and sending it in the response to the client side, how can I save this token and use it to send it in future API calls ?
    Is there an article you can suggest about this topic?

    • Clue Mediator says:

      Hello Diaa,
      Thank you for reading the article.

      If you check this article then you can see we have used the localStorage to manage the token and send it in the subsequent request.

      Moreover, If you want to manage the token via cookies and also want CSRF protection then check out the below article where you will find the more secure way to implement authentication including refresh token and CSRF protection.

      Login App with CSRF protection

      Hope you like it. Let us know if you have any further queries.

      Subscribe us for weekly updates or like and follow us for regular updates.

      Happy Coding..!!

  7. lisa says:

    Hİ! Thank you for this. I have a problem, when I clone and run the project and enter a made up email and password, I get
    Unhandled Rejection (TypeError): undefined is not an object (evaluating ‘error.response.status’)
    (anonymous function)
    src/Login.js:21

    can you help with that?
    Thanks a lot

  8. lisa says:

    please ignore my previous comment I have solved it

Leave a Reply

Your email address will not be published. Required fields are marked *