Login App with CSRF protection – Understanding authentication using JWT access token and refresh token – Part 1

In this article, we’ll show you how to implement secure login authentication using JWT access token and refresh token with CSRF protection.

Previously we have written an article that explains how to implement authentication in React App using Node.js. Over there we used the sessionStorage to manage the token at client side and at the server side we used only access token to manage the authentication. You can get the other two articles where you can find the way to create a REST API for authentication in Node.js and create a login form in ReactJS using Node.js REST API.

As per the request of our readers, we decided to share the knowledge of the secure login application using JWT access token and refresh token with Cross-site request forgery (CSRF or XSRF) and Cross-site scripting (XSS) protection in React & Node.js.

Securely using JWTs with CSRF protection and refresh tokens in React, Angular and Node.js, The Ultimate Guide to handling JWTs on frontend clients, Add Login Using the Authorization Code Flow, Token-based API authentication with CSRF XSS protection and JWT token, angularjs token authentication example, jwt token example, jwt best practices, jwt client side api authentication, json web token example in react js, Rest API angular authentication with jwt tutorial with step by step example for beginners, Basic understanding of the auth login form application using create-react-app.

What’s new in this article?

As you know we have already written an article on the Login App in which we explained all the steps in details about the authentication. But here we have added a few more features that will really help us to improve the security of the application.

At the server side (Node.js)

  • JWT access token with short expiry time to manage the authentication.
  • XSRF token for CSRF protection.
  • JWT refresh token to manage access token when it expires.
  • Manage JWT refresh token using secure and httpOnly cookie.
  • Manage XSRF token using normal cookie to avoid the CSRF attack.

At the client side (React)

  • Manage authentication using redux store.
  • Store JWT access token in redux instead of localStorage to avoid XSS attack.
  • Manage silent authentication with the help of the refresh token just before the access token gets expired.
  • Manage XSRF token to pass in every single request right after the successful login to avoid CSRF attack.

We planned to divide this article into three parts.

Implementation flow

In this article, we’ll explain the secure login implementation flow only.

For a login application we will use React as a frontend application. You can use any single page application (SPA) for client application. As a backend application we will create a secure REST API in Node.js.

Key part of the implementation of secure login application

Divide login application in two parts

  1. Node.js application (Backend)
  2. ReactJS application (Frontend)

1. Node.js Application (Backend)

2. ReactJS Application (Frontend)

In the next article, we’ll implement authentication in Node.js using JWT access token and refresh token.

That’s it for today. Thanks for reading.
Like share and follow us. Happy Coding..!!

You may also like...

Leave a Reply

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