Routes on front-end using react router

auth.js

class Auth {
  /**
   * Authenticate a user. Save a token string in Local Storage
   *
   * @param {string} token
   */
  /* eslint-disable no-undef */
  static authenticateUser (token) {
    localStorage.setItem('token', token)
  }

  static authNotified () {
    localStorage.setItem('authNotified', true)
  }

  static getAuthNotified () {
    return localStorage.getItem('authNotified')
  }

  static storeReferer (path) {
    localStorage.setItem('referer', path)
  }

  static getReferer () {
    return localStorage.getItem('referer')
  }

  /**
   * Check if a user is authenticated - check if a token is saved in Local Storage
   *
   * @returns {boolean}
   */
  static isUserAuthenticated () {
    return localStorage.getItem('token') !== null
  }

  /**
   * Deauthenticate a user. Remove a token from Local Storage.
   *
   */
  static deauthenticateUser () {
    localStorage.removeItem('token')
  }

  /**
   * Get a token value.
   *
   * @returns {string}
   */

  static getToken () {
    return localStorage.getItem('token')
  }
}

export default Auth

private-route.js

import React from 'react'
import PropTypes from 'prop-types'

import {
  Route,
  Redirect
} from 'react-router-dom'
import Auth from '../../modules/auth'

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    { ...rest }
    render={ props =>
      Auth.isUserAuthenticated() ? (
        <Component { ...props } />
      ) : (
        <Redirect
          to={ {
            pathname: '/',
            state: { from: props.location }
          } }
        />
      )
    }
  />
)

PrivateRoute.propTypes = {
  component: PropTypes.any,
  location: PropTypes.object
}

export default PrivateRoute

routes.js

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

import PrivateRoute from '../components/session/private-route'
import Session from '../components/session/session'
import ProfileContainer from '../containers/profile'
import TaskExplorer from '../components/task/task-explorer'

export default props => (
  <HashRouter>
    <Switch>
      <PrivateRoute path='/profile' component={ ProfileContainer } />
      <Route path='/tasks/explore' component={ TaskExplorer } />
      <Route exact path='/token/:token' component={ Session } />
    </Switch>
  </HashRouter>
)

Thnx for answering my question, well I used JWT token inside the cookie, while in the frontend react I wanted to use ur method but as you know the client cant read or view the cookie so it won't work at the private Route so my question is if there any way we can implement the private Router without viewing the token?

@karmelyoei See the discussion on the topic there are many opinions about cookie-based and local storage based methods.

The token is received on redirect and once stored, with JWT the only way to see is checking the localStorage, and even with possible attacks, this way is secure enough, otherwise, you will have to do a persistent session on the back-end. Any method front-end purely needs to store anywhere on the client-side.

Thnx bro!

Does this mean I can put the token in the local storage of the browser and access the private route?
I think it is better to store "isAuth" in redux store.

@rtvsk yes it means to store into the localStorage. The redux store is not persistent, so it would have to store on DB, maybe in the user database.