README
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
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. |