Protected routes In Reactjs

Question

I am facing an issue of protected routes in Reactjs when my app is initialize and start on port 3000. First time it doesn't redirect to login component. Also I write logic that without authentication first it goes to login component and also then if I manually typed path "/user/login" then login component shows.

My layout component

import React from 'react';
import { connect } from 'react-redux';
import Loadable from 'react-loadable';
import { BreadcrumbsItem } from 'react-breadcrumbs-dynamic';
import { Switch, Route, withRouter } from 'react-router-dom';

import { MAINTENANCE_MODE } from '../../common/constants';

import classes from './Layout.view.scss';
import ProtectedComponent from '../../components/ProtectedComponent';

const Loading = () => 'Loading...';

const Auth = Loadable({
  loader: () => import('../auth/Auth.container'),
  loading: Loading,
});

const Maintenance = Loadable({
  loader: () => import('../../components/Maintenance/Maintenance'),
  loading: Loading,
});

const Dashboard = Loadable({
  loader: () => import('../dashboard/views/dashboard'),
  loading: Loading,
});

const Layout = () => {
  return (
    <>
      <BreadcrumbsItem to="/" key="layout-breadcrumb">
        Home
      </BreadcrumbsItem>
      <div className={classes.layout}>
        <div className={classes.main}>
          <div className={classes.pageContent}>
            {MAINTENANCE_MODE === 'Yes'
              ? <Route path="/" component={Maintenance} />
              : (
                <Switch>
                  <Route
                    exact
                    path="/user/login"
                    component={Auth}
                  />
                  <ProtectedComponent
                    path="/dashboard"
                    component={Dashboard}
                  />
                </Switch>
              )}
          </div>
        </div>
      </div>
    </>
  );
};

Layout.defaultProps = {};

Layout.propTypes = {};

const mapStateToProps = () => ({});

export default withRouter(connect(mapStateToProps)(memo(Layout)));

My Protected Route Component

import React from 'react';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

import storage from '../common/storage';

const ProtectedComponent = ({ component: Component, isAuthenticated }) => (
  <Route
    render={() => (
      (isAuthenticated || get(storage.get('user'), 'token'))
        ? <Component />
        : <Redirect to="/user/login" />
    )}
  />
);

ProtectedComponent.defaultProps = {
  isAuthenticated: false,
};

ProtectedComponent.propTypes = {
  component: PropTypes.any.isRequired,
  isAuthenticated: PropTypes.bool,
};

export default ProtectedComponent;

Answer 1

Typo: You defined property as Component but you passing as component in prop.

<ProtectedComponent
   path="/dashboard"
   component={Dashboard}
  />

ProtectedComponent.propTypes = {
  Component: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.array,
  ]).isRequired,
  isAuthenticated: PropTypes.bool,
};

Answer 2

import React, { Component } from 'react';
import auth from '../services/authService' // here i am checking local storage user is login 
import {
  Route,
  Redirect,
} from "react-router-dom";
class ProtectedRoute extends Component {
  render() { 
    const {path, component: Component, render, ...rest} = this.props
    return (  

      <Route
        path={path} 
        {...rest}
        render={ props => {
          if(!auth.getCuurentUser()) return <Redirect to={{
              pathname: '/login',
              state: {from: props.location}
          }}/>
          return  Component ? <Component {...props}/> : render(props);
        }}
        
        />
    );
  }
}
 
export default ProtectedRoute;

App.js where i am write my route

 <ProtectedRoute path="/contact" component={Contact} />