protected-react-routes-generator v1.0.4

Description

A React utility that is made to: 1. Handle the protected routes Logic with fully control over rendered route. 2. ensure that is the only allowed persona can access his specified routes. 3. Handle redirection 1. prevent login user to access route that not require authentication and viceversa.

You can play with Demo from here

Example

import React from 'react';
import { Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
// Utility
import RoutesConfiguration from 'protected-react-routes-generator';
// Routes
import CoursePayment from '../Payment/Course';
import PaymentResult from '../Payment/PaymentResult';
import Login from '../Screens/Login';
import SignUp from '../Screens/SignUp';
import Home from '../components/pages/Home';
import Faqs from '../components/pages/Faqs';
import PageNotFound from '../components/pages/pageNotFound';

function AppNavigation({ auth }) {
    const authorizedStructure = {
    fallbackPath: '/login',
    routes: [
      { path: '/payment/result', component: <PaymentResult /> },
      { path: '/course-payment/:id', component: <CoursePayment /> },
    ]
  };

  const unAuthorizedStructure = {
    fallbackPath: '/dashboard',
    routes: [
      { path: '/signup', component: <SignUp /> },
      { path: '/login/:resetAvailable?', component: <Login /> },
    ]
  };

  const anonymousStructure = {
    routes: [
      { path: '/', component: <Home /> },
      { path: '/home', component: <Home /> },
      { path: '/faqs', component: <Faqs /> },
      { path: '/404', component: <PageNotFound /> },
    ]
  };

  return(
    <ConnectedRouter history={history}>
      <Switch>
        {RoutesConfiguration({
          isAuthenticated: auth.isAuthenticated,
          anonymousStructure,
          authorizedStructure,
          unAuthorizedStructure,
          fallbackComponent: <PageNotFound />
        })}
      </Switch>
    </ConnectedRouter>
  );
}

const mapStateToProps = store => ({
  auth: store.auth
});

export default connect(mapStateToProps)(AppNavigation);

Explanation

The important thing is RoutesConfiguration function which accepts an object that has 5 props 1. isAuthenticated ----> Boolean 2. anonymousStructure ----> Object 3. authorizedStructure ----> Object 4. unAuthorizedStructure ----> Object 5. fallbackComponent ----> JSX Element

isAuthenticated

it's very important because it's used to differentiate LoggedIn/out users to give back the wanted routes.

anonymousStructure

it's an object that ONLY has 1 prop which is routes array each item is a route Model , these routes are allowed for all personas regardless he/she authenticated or not.

authorizedStructure

it's an object that ONLY has 2 props which is routes array each item is a route Model , these routes are allowed for LoggedIn users and the second option is fallbackPath: which is used to redirect to predefined url if a user didn't make a login then he tried to access a page from authorized routes . prop | sibling | Type | isRequired --------------------|----------------------------|---------|---------------------------------------- authorizedStructure | routes, fallbackPath | object | false routes | array of Route Model | array | true fallbackPath | none | string | true in case of routes is provided

unAuthorizedStructure

it's an object that ONLY has 2 props which is routes array each item is a route Model , these routes are allowed for LoggedOut users and the second option is fallbackPath: which is used to redirect to predefined url if a loggedIn user didn't make a logout then he tried to access a page from authorized routes .

fallbackComponent

it's a jsx component that is used as a fallback for the whole router Like ('404', NotFound)

route Model

  const unAuthorizedStructure = {
    fallbackPath: '/home',
    routes: [
      {/*  Route Model */
        /**
         * path: string
         * component: React.Component
         * routeProps: Object -----> To override route props
         * redirectPath: String ----> To redirect to specific location [ instead of fallbackPath ]
         * showRouteIf: Boolean ----> To decide when to show/hide the route
         */
      }
    ]
  }