Why?

• 
• No dependencies
• Light weighted
• Seperate route for public, authenticated and restricated.

Quick Start

Demo

Install

npm install react-secure-route # yarn add react-secure-route

Usage

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Link } from "react-router-dom";
import { Home, Login, About } from "./pages";
import { PrivateRoute, ProtectedRoute, PublicRoute } from "react-secure-route";

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(
    !!localStorage.getItem("isLoggedIn")
  );

  const renderHeader = () => {
    if (isLoggedIn) {
      return (
        <div>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <button
            onClick={() => {
              localStorage.removeItem("isLoggedIn");
              setIsLoggedIn(false);
            }}
          >
            Logout
          </button>
        </div>
      );
    }
    return (
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <button
          onClick={() => {
            localStorage.setItem("isLoggedIn", true);
            setIsLoggedIn(true);
          }}
        >
          Login
        </button>
      </div>
    );
  };

  return (
    <Router>
      {renderHeader()}
      <Switch>
        <PrivateRoute
          component={Home}
          exact
          isAuthenticated={isLoggedIn}
          redirect="/login"
          path="/"
        />
        <ProtectedRoute
          component={Login}
          restricted={isLoggedIn}
          exact
          redirect="/"
          path="/login"
        />
        <PublicRoute component={About} path="/about" exact />
        /**
         * You can also pass your component like this. You will not get the route props on you component.
          <PrivateRoute
            exact
            isAuthenticated={isLoggedIn}
            redirect="/login"
            path="/"
          >
            <Home />
          </PrivateRoute>
        */
      </Switch>
    </Router>
  );
};

export default App;

Note:- To work this module properly, kindly install react, react-router-dom, and prop-types.

PrivateRoute

This component handles authentication based on the passed props.

Props

| Prop | Required | Type | Default Value | Description | | ----------------- | -------- | ---- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | isAuthenticated | No | bool | false | if this is true and restricted props is false your actual component will render else redirect it to passed redirect prop route. | | component | No | React Component | _ | if component is passed inside component prop, you will get the route props on your component.| | children | No | React Component | _ | if component is passed as a chidren, you will not get the route props on your component. |
| redirect | No | string | /login | when authentication fails, it will redirect to the given path with the state from it got redirected. | | restricted | No | bool | false | if this is true it will redirect to passed redirect prop route. | | rest | No | _ | _ | you can pass the route props of react-router-dom as well. |

ProtectedRoute

This component handles only restricated route based on the passed props.

Props

| Prop | Required | Type | Default Value | Description | | ----------------- | -------- | ---- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | component | No | React Component | _ | if component is passed inside component prop, you will get the route props on your component.| | children | No | React Component | _ | if component is passed as a chidren, you will not get the route props on your component. |
| redirect | No | string | / | when authentication fails, it will redirect to the given path with the state from it got redirected. | | restricted | No | bool | false | if this is true it will redirect to passed redirect prop route. | | rest | No | _ | _ | you can pass the route props of react-router-dom as well. |

PublicRoute

This component is same as Route component of react-router-dom.

Props

| Prop | Required | Type | Default Value | Description | | ----------------- | -------- | ---- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | component | No | React Component | _ | if component is passed inside component prop, you will get the route props on your component.| | children | No | React Component | _ | if component is passed as a chidren, you will not get the route props on your component. |
| rest | No | _ | _ | you can pass the route props of react-router-dom as well. |