App.js

import React, { Component } from 'react';
import './App.css';
import { AuthProvider } from './Hoc/AuthProvider/AuthProvider';
import Login from './Containers/Login/Login';
import ProtectedRoute from './Components/ProtectedRoute/ProtectedRoute';

class App extends Component {

  render() {
    return (
     <AuthProvider>
      <div className="App">
        <Login />   

      </div>
    </AuthProvider>
    );
  }
}

export default App;

AuthProvider.js

import React, { Component } from 'react'
import axios from '../../axios';
import qs from 'qs';

const AuthContext = React.createContext();

class AuthProvider extends Component {

    state = {
        isAuth: false,
        username:'',
        password: ''
    }

    login = (props) => {

        const credentials = {
            _username: this.state.username,
            _password: this.state.password
        }

        
        axios.post('login_check', qs.stringify(credentials))
        .then(res => {

            window.localStorage.setItem('token', res.data.token);
            window.localStorage.setItem('refresh_token', res.data.refresh_token);

            if (res.status === 200 && res.statusText === 'OK' && res.data.token !== undefined && res.data.token !== null) {
                    this.setState({ isAuth: true })
                    console.log(window.localStorage.getItem('token'))
            }
            })
            .catch(error => {
                throw new Error(error);

            })
    }

    logout = () => {
        this.setState({ isAuth: false })
    }


   

    handleChange = (name) => event => {
        this.setState({
            [name]: event.target.value,
        });
    };

    
 

  render() {
    return (
        <AuthContext.Provider value={{ isAuth: this.state.isAuth, login: this.login, logout: this.logout, password: this.handleChange, name: this.handleChange }}>
            { this.props.children }
        </AuthContext.Provider>
    )
  }
}

const AuthConsumer = AuthContext.Consumer;

export { AuthProvider, AuthConsumer };

Dashboard.js

import React, { Component } from 'react'
import axios from '../../axios';

class Dashboard extends Component {
    


    componentDidMount() {

        axios.get('/users?order%5Bid%5D=DESC&page=',{ headers: { "Authorization": `Bearer ${window.localStorage.getItem('token')}` } })
        .then(res => {
            console.log(res)
        })
        console.log(window.localStorage.getItem('token'))
    }
    
    render() {
        return(
            <h2>Dashboard</h2>
        )
    }
}

export default Dashboard;

gistfile1.txt

// import React from 'react'
// const Dashboard = () => <h2>User Dashboard</h2>
// export default Dashboard

import React, { Component } from 'react'
import axios from '../../axios';

class Dashboard extends Component {
    


    componentDidMount() {

        axios.get('/users?order%5Bid%5D=DESC&page=',{ headers: { "Authorization": `Bearer ${window.localStorage.getItem('token')}` } })
        .then(res => {
            console.log(res)
        })
        console.log(window.localStorage.getItem('token'))
    }
    
    render() {
        return(
            <h2>Dashboard</h2>
        )
    }
}

export default Dashboard;

Login.js

import React, { Component } from 'react'
import { AuthConsumer } from '../../Hoc/AuthProvider/AuthProvider';
import LoginCard from '../../Components/LoginCard/LoginCard';
import  './Login.css';
import ProtectedRoute from '../../Components/ProtectedRoute/ProtectedRoute';
import Dashboard from '../../Components/Dashboard/Dashboard';

class Login extends Component {

    componentWillMount() {
    let w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight || e.clientHeight || g.clientHeight;

    this.setState({ x: x, y: y });
}


    render() {

        return (
            <header>
                
                <AuthConsumer>
                    {({ isAuth, login, logout, name, password }) => (
                        <div>
                            {isAuth ? ( <ProtectedRoute path='/dashboard' component={Dashboard} /> ) : (
                                <div>
                                <img alt='nature' className='login-bg' src={'https://source.unsplash.com/' + this.state.x + 'x' + this.state.y + '/?nature'} />
                                <LoginCard handlePassword={password('password')} handleChange={name('username')} clicked={login} />
                                </div>
                                )}
                        </div>
                    )}
                </AuthConsumer>
            </header>
        )
    }
}

export default Login;

LoginCard.js

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';

const styles = {
    card: {
        maxWidth: 345,
        position: 'fixed',
        left: 'calc(50% - 172.5px)',
        top: 'calc(50% - 212px)'
    },
    media: {
        height: 140,
    },
};

const MediaCard = (props)  => {
    const { classes } = props;
    return (
        <Card className={classes.card}>
            <CardActionArea style={{width:'100%'}}>
                <CardMedia
                    className={classes.media}
                    image="/images/cards/login.jpg"
                    title="Login"
                />
                <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                        Login
                </Typography>
    
            </CardContent>
            </CardActionArea>
            <CardActions>
            </CardActions>
            <TextField
                id="filled-name"
                label="Name"
                className={classes.textField}
                value={props.name}
                onChange={props.handleChange}
                margin="normal"
                variant="filled"
            />
            <TextField
                id="standard-password-input"
                label="Password"
                className={classes.textField}
                type="password"
                onChange={props.handlePassword}
                autoComplete="current-password"
                margin="normal"
            />
            <Button onClick={props.clicked} variant="contained" color="primary" className={classes.button}  size="medium" style={{display:'block', margin:'8px auto'}} >
                Login
             </Button>
        </Card>
    );
}



export default withStyles(styles)(MediaCard);

ProtectedRoute.js

import React from 'react'
import { AuthConsumer } from '../../Hoc/AuthProvider/AuthProvider';
import { Route, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, ...rest }) => (
    <AuthConsumer>
        {({ isAuth }) => (
            <Route render={props => 
                isAuth ? <Component {...props} />
                : <Redirect to='/' />
                }
                {...rest}
                />
        )}
    </AuthConsumer>
)

export default ProtectedRoute;