Facing issue while implementing authentication in reactjs

Question

I am trying to implement JWT authentication to my app, her am facing problem, please help me to resolve this as am beginner to reactjs.

After successful login I am getting below error:

Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(App)".

main App.js

import React from 'react';
import { Router, Route, Link } from 'react-router-dom';
import { PrivateRoute } from './_components';
import { LoginPage } from './LoginPage';
import { history, Role } from './_helpers';
// css
import './lib/reactifyCss';


// app component
import App from './container/App';


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

    this.state = {
      currentUser: null,
      isAdmin: false
    };
  }


  render() {
    return (
      <Router history={history}>
        <div>              
          <div className="jumbotron">
            <div className="container">
              <div className="row">
                <div className="col-md-6 offset-md-3">
                  <PrivateRoute exact path="/" component={App} />
                  <Route path="/login" component={LoginPage} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

export { MainApp }; 

layout App.js

/**
 * App.js Layout Start Here
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect, Route } from 'react-router-dom';
import { NotificationContainer } from 'react-notifications';

// rct theme provider
import RctThemeProvider from './RctThemeProvider';

//Main App
import RctDefaultLayout from './DefaultLayout';



class App extends Component {
    render() {

        return (
            <RctThemeProvider>
                <NotificationContainer />               
        <Route path="/app/dashboard" component={RctDefaultLayout} />
            </RctThemeProvider>
        );
    }
}

// map state to props
const mapStateToProps = ({ authUser }) => {
    const { user } = authUser;
    return { user };
};

export default connect(mapStateToProps)(App);

PrivateRoute.js

import { authenticationService } from '../_services';

export const PrivateRoute = ({ component: Component, roles, ...rest }) => (
    <Route {...rest} render={props => {
        const currentUser = authenticationService.currentUserValue;
        if (!currentUser) {
            // not logged in so redirect to login page with the return url
            return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        }

        // check if route is restricted by role
        if (roles && roles.indexOf(currentUser.role) === -1) {
            // role not authorised so redirect to home page
            return <Redirect to={{ pathname: '/'}} />
        }

        // authorised so return component
        return <Component {...props} />
    }} />
)

Answer 1

Provider, passes the store to the component nested within it and generally only needed to be applied to the root component

  <Provider store={store}>
    <Router history={history}>
      <div>              
        <div className="jumbotron">
          <div className="container">
            <div className="row">
              <div className="col-md-6 offset-md-3">
                <PrivateRoute exact path="/" component={App} />
                <Route path="/login" component={LoginPage} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Router>
  </Provider>

Answer 2

You have to wrap your root component with the Provider Higher-Order Component provided by react-redux library to make the store accessible everywhere.

See react-redux documentation about Provider here.