Tech Seeker

In this article, we are going to do ReactJS(v18) application authentication using the JWT Access Token and Refresh Token. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 important parts: Header Payload Signature Create ReactJS Application: Let's create a ReactJS application to accomplish our demo. npx create-react-app name-of-your-app Configure React Bootstrap Library: Let's install the React Bootstrap library npm install react-bootstrap bootstrap Now add the bootstrap CSS reference in 'index.js'. src/index.js: import 'bootstrap/dist/css/bootstrap.min.css' Create A React Component 'Layout': Let's add a React component like 'Layout' in 'components/shared' folders(new folders). src/components/shared/Layout.js: import Navbar from "react-bootstrap/Navbar"; import { Container } from "react-bootstrap"; import Nav from "react-boot

In this article, we will implement ReactJS application state management using Redux Toolkit with a CRUD example. Redux Toolkit For State Management: In the ReactJS application to share data between components consistently, we can use the Redux Toolkit.  The Redux Toolkit is built on top of the standard 'Redux' to overcome a few concerns like 'complexity to configure the redux', 'avoiding additional packages to integrate with redux', 'to avoid the too much boilerplate code generated by redux'. The main building component of Redux Toolkit are: Actions - actions represent events to trigger the reducer to update data into the store. Reducers - In general in 'Redux' reducer pure function to create the state instead of changing the state. But in 'Redux Toolkit' we can mutate the state directly, but internally using the 'Immer' library our logic generates a new state instead of mutating the existing state. Store - object where we store o