React with Redux authorization workflow example (react-router-dom v6)

This a simple React example which demonstrates how to restrict access to routes to authenticated users.

Complete source code can be found in GitHub -
https://github.com/madan712/auth-workflow

Below packages are used in this example -

• React router - React Router is used to manage navigation in react application
• Redux - Redux is used to manage state of react applications
• react-router-dom v6 - React routing library
• react-bootstrap - React-Bootstrap is a complete re-implementation of the Bootstrap components using React
• react-redux-toastr - Used to show alert messages
• Webpack - Webpack is used to create prod ready build which can be used to deployed in production
• Babel - Babel is used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

About the example - We have a landing page i.e public page which can be viewed by anyone. As this is a public page, user need not required to go through any sort of authorization

Our private page is a restricted page. If user clicks on private page link, user is taken to login page where user is asked to enter user name and password

Example with React, Redux and Axios API

In previous article we have seen a simple react with redux example. In this article we will add Axios api to it. Axios is used for Promise based HTTP client for the browser and node.js. To know more about axios package, click here.

In this example we will get input name from user and hit a hello world rest endpoint. For running this example you may need to install below packages -

• redux
• react-redux
• axios
• redux-thunk

App.js

Simple React + Redux example

In the previous article we have seen Spring boot with react example. In this example we will see how to configure React with Redux. Now what is all this fuss about Redux?

In simple term Redux is used to manage state of your application. As your application starts growing it gets difficult to manage state of your application. This is when Redux comes to help you.

Redux data flow

Lets see a simple counter example. Assuming npm is already installed in your machine. If not, install npm.