/react-private-public-routes

Private and public route with React-dom-router, Hooks, UseContext, UseRef,

Primary LanguageJavaScript

React-dom-router private & public routes with hooks.

React Router ships with a few hooks that let you access the state of the router and perform navigation from inside your components. I'm created a publicRoute & prvateRoute for user authentification, Private routes priotect with auth token PPublic routes are access without any authentication`.

Please note: You need to be using React >= 16.8 in order to use any of these hooks!

mainRoute

The main Route to navigate page.

import React, { useState, useMemo } from "react";
import { UserContext } from "./hooks/UserContext";
import { BrowserRouter, Switch } from 'react-router-dom';
import { Login, Home, PageOne, PageTwo, NoMatch } from './pages/'

import PublicRoute from './hooks/PublicRoute'
import PrivateRoute from './hooks/PrivateRoute'

function AppRouter() {
  const [user, setUser] = useState(null);

  const value = useMemo(() => ({ user, setUser }), [user, setUser]);

  return (

    <BrowserRouter>
      <UserContext.Provider value={value}>
        <Switch>
          <PublicRoute restricted={true} component={Login} path="/" exact />
          <PrivateRoute component={Home} path="/home" exact />
          <PrivateRoute component={PageOne} path="/page-1" exact />
          <PrivateRoute component={PageTwo} path="/page-2" exact />

          <PrivateRoute component={NoMatch} path="*" />
          <PublicRoute component={NoMatch} path="*" />

        </Switch>
      </UserContext.Provider>

    </BrowserRouter>
  );
}

export default AppRouter;

privateRoute

Private route allowes you only the page logged in.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../middleware/auth';

const PrivateRoute = ({ component: Component, ...rest }) => (
    // Show the component only when the user is logged in
    // Otherwise, redirect the user to /signin page
    <Route {...rest} render={props => (isLogin() ? <Component {...props} /> : <Redirect to="/" />)} />
)

export default PrivateRoute;

publicRoute

Public route no need for the authentification it call access without login.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../middleware/auth';

const PublicRoute = ({ component: Component, restricted, ...rest }) => (
    // restricted = false meaning public route
    // restricted = true meaning restricted route
    <Route {...rest} render={props => (isLogin() && restricted ? <Redirect to="/home" /> : <Component {...props} />)} />
)

export default PublicRoute;

authentication

Autthentication actions auth.js

// LOGIN
export const login = (props, d) => {
    if (d.username === 'user' && d.password === 'password') {
        localStorage.setItem('auth', d)
        props.history.push('/home');
    }
}

// LOGOUT
export const logout = () => localStorage.removeItem('auth')

// LOGIN STATUS
export const isLogin = () => {
    if (localStorage.getItem('auth')) return true;
    return false;
}

projectInstallation

To install the project in your local device.

  • clone https://github.com/sreenathkspanikker/react-private-public-routes.git
  • npm install / yarn add
  • npm start / yarn start

loginCredentials

  • username: user
  • password: password