AuthComponent wrapper for handling restricted routes in react.

AuthRoute.js

//AuthRoute.js snippet
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

class AuthRoute extends React.Component {
  constructor(props) {
    super(props);

    this.authenticated = this.authenticated.bind(this);
  }

  authenticated() {
    // Check for the token here
    // If token does not exists, return false
    // If token exists, check if it is also in the redux state
    //  > if token is not in the redux state, validate token in the server
    //    > If validation failed, return false else return true and store in redux state
    // If token exists in redux state as well, return true
    return false;
  }

  render() {
    return(
      <div>
        {this.authenticated() ? this.props.children : <Redirect to={this.props.back}/> }
      </div>
    )
  }
}

export default AuthRoute;

Routes.js

import { Route, Switch } from 'react-router-dom';

import React from 'react';
import Property from './Property/Property';
import Upload from './Upload/Index';
import Cards from './Cards/Cards';
import AgentSignIn from './Agent/SignIn/SignIn';
import Protected from './Agent/Protected';
import SuperProtected from './Agent/superprotected';
import AuthRoute from './hoc/AuthRoute';

export default () => (
  <Switch>
    <Route exact path="/" component={Cards} />
    <Route exact path="/property/:name" component={Property} />
    <Route exact path="/property_upload" component={Upload} />
    <Route exact path="/agent/sign_in" component={AgentSignIn} />
    {/*<Route exact path="/agent/protected" component={Protected} />*/}
    <AuthRoute back={"/agent/sign_in"}>
      <Route exact path="/agent/protected" component={Protected} />
      <Route exact path="/agent/superprotected" component={SuperProtected} />
    </AuthRoute>
  </Switch>
)