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?
Quick Start
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. |