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>
)

Hey, can I ask you why you saved the token in the local storage while it's totally unsafe to use this method!

Hey @karmelyoei the token is used in the current session, and this is a simple implementation. In the context of single-page apps, and web applications with React, this is a common way used to authenticate and store the logged user.

There's a lot of discussion surrounding different methods of sign users into a system with JS:

• We use JWT tokens: https://jwt.io/
• https://stackoverflow.com/questions/44133536/is-it-safe-to-store-a-jwt-in-localstorage-with-reactjs

So it's a common use of tokens and maybe is not the most secure way, but is secure enough depending on the application.

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.