mohamadsdg/authenticated-react-router

extended components for handling authenticated routes in react-router

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;