react-secure-route

react-secure-route

A lightweight secure route components on top of react-router-dom.

It have private, public and protected route, which will give you facility to handle you restricted and authenticated route. These component also gives you route props.

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.