2.0.0 • Published 3 years ago
authenticated-react-router v2.0.0
authenticated-react-router
extended components for handling authenticated routes in react-router, manage your private and public routes easily. just replace Main Route component with AuthenticatedRouter or UnauthenticatedRouter components, see below for installation and use cases.
Installation
Yarn
$ yarn add authenticated-react-router
Usage
AuthenticatedRoute
only allow authenticated (logged in) users to pass the route, particulary use for private routes such as profile section that need user to be logged in.
Props
Prop | Description |
---|---|
isAuthenticated | a boolean flag that show user is logged in or not |
redirect | if user was not logged in redirect user to this location, often is /login page |
path | Same as React-Router |
component | Same as React-Router |
import React, { Component } from "react";
import { Route } from "react-router-dom";
import { AuthenticatedRoute } from "authenticated-react-router";
//
import Profile from "./components/Profile";
import Login from "./components/Login";
import Register from "./components/Register";
class App extends Component {
render() {
return (
<section>
<AuthenticatedRoute
path="/profile"
redirect="/login"
isAuthenticated={this.props.isAuthenticated}
component={Profile}
/>
<Route exact path="/search" component={Search} />
</section>
);
}
}
export default App;
UnauthenticatedRoute
force logged in users redirect to pass this route, particularly use for login or register routes that logged in user doesn't need to see.
Props
Prop | Description |
---|---|
isAuthenticated | a boolean flag that show user is logged in or not |
redirect | if user was logged in redirect user to this location, modules will automatically redirect user where he is came but for general purporse you must pass an generic url for example /profile page |
path | Same as React-Router |
component | Same as React-Router |
import React, { Component } from "react";
import { Route } from "react-router-dom";
import { UnauthenticatedRoute } from "authenticated-react-router";
//
import Profile from "./components/Profile";
import Login from "./components/Login";
import Register from "./components/Register";
class App extends Component {
render() {
return (
<section>
<UnauthenticatedRoute
path="/login"
isAuthenticated={this.props.isAuthenticated}
redirect="/profile"
component={Login}
/>
<UnauthenticatedRoute
path="/register"
isAuthenticated={this.props.isAuthenticated}
redirect="/profile"
component={Register}
/>
<Route exact path="/search" component={Search} />
</section>
);
}
}
export default App;