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.

• Part 1 – Understanding authentication using JWT access token and refresh token with CSRF protection (You are here…)
• Part 2 – Implement authentication in Node.js using JWT token with CSRF protection
• Part 3 – Implement authentication in ReactJS using REST API with CSRF protection

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

• Access token:

  • Create access token using JWT to manage the API authentication.
  • Set a short expiry time like 15 mins for access token.
  • Return the access token in API response. At the other end we will use it to manage the private/secure REST API.
  • No need to store access tokens into the database at the backend side for authentication. We will directly verify it using the JWT package.
  • We will store it in memory instead of the localStorage or sessionStorage at the client side.

• Refresh token:

  • Create refresh token using JWT to manage the access token.
  • We will recommend you to set a long expiry time for refresh token i.e. 30 days or 60 days.
  • Make sure we will not return the refresh token in the API response. But instead of that we have to persist it in an HttpOnly secure cookie.
  • We’ll store refresh tokens in memory or database at the backend side.

• Silent authentication:

  • Silent authentication it’s required in below two cases.

    • As you know the access token has a short expiry time. Now it’s important to renew the access token just before it expires. So the user may have an uninterrupted session.
    • Because of storing access tokens in memory at the client side, we need to maintain the login session when re-opening the browser after closing it without logout.
  • We will perform the silent authentication to renew the access token with the help of refresh token.

• CSRF protection:

  • Cross-Site Request Forgery (CSRF or XSRF) is a one-click attack that forces logged in users to submit a request to a server without informing them. It mostly happens with the stored cookies.
  • To prevent CSRF attack, we will use XSRF token for real user identification. This token is also known as anti-CSRF token.
  • We will set XSRF token in cookie from server side and expect it to be in the header of each request.

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..!!