Sunday, July 28, 2019

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 -

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

If user is a valid user i.e authorized user then only user can see the private page

Steps to run the example -

>git clone

>cd auth-workflow

auth-workflow>npm install

auth-workflow>npm start