react-secure-route v0.0.2

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

ProtectedRoute

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

Props

PublicRoute

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

Props