Почему имя не будет отображаться в браузере при успешной авторизации?

Question

Я пытаюсь выяснить, почему после успешной аутентификации данные с созданной мной конечной точки не будут отображаться. В этом случае я пытаюсь отобразить name внутри моего Wall компонента, но безрезультатно. Я испробовал много разных способов для этой работы правильно, но в конечном итоге натолкнулся на стену (без каламбура) и не знаю, какое направление выбрать после того, как немного поработал с этим.

Имя, которое идет из конечной точки БУДЕТ отображаться тогда и только тогда, когда у меня есть блок if() (который находится внутри authSuccess()) внутри render() {...}. Кроме того, когда я обновляю sh страницу, она перенаправляется обратно на экран входа в систему, что явно неверно.

Как я могу отображать имя, полученное с моей конечной точки при успешной аутентификации?

Вот мой компонент для входа:

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import axios from "axios";
import Wall from "../Wall/Wall";
import Cookies from 'js-cookie';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            remember_me: true,
            name: '',
            logged_in_flag: false,
            access_token: null,
            auth: false
        }
        this.emailHandler = this.emailHandler.bind(this);
        this.passwordHandler = this.passwordHandler.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    emailHandler(e) {
        this.setState({
            email: e.target.value,
        });
    }

    passwordHandler(e) {
        this.setState({
            password: e.target.value,
        });
    }

    handleSubmit(e) {
        e.preventDefault();
        const user = {
            email: this.state.email,
            password: this.state.password,
            remember_me: this.state.remember_me
        }

        JSON.stringify(user);

        const headers = {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }

        const { history } = this.props;

        axios.post('endpoint/created/myendpoint.php', user, {headers})
            .then(response => {
                console.log(response.data[0].name);
                console.log(response.data.access_token);
                let set_access_token = Cookies.set("access_token", response.data.access_token);
                this.setState({
                    logged_in_flag: true,
                    name: response.data[0].name,
                    access_token: set_access_token,
                    auth: true
                });
                this.authSuccess(this.state.auth)
                Cookies.set("access_token", this.state.access_token);
                history.push('/wall-of-fame');

            }).catch(error => {
            console.log("AXIOS ERROR!! " + error);
        });
    }

    authSuccess(authenticated) {
        const {name} = this.state;

        if(authenticated) {
            console.log("inside if block in authSuccess() function");
            return(
                <Wall name={name}/>
            );
        }
        return <Login/>;
    }

    render() {
        return(
            <div id="login">
                <div className="container">
                    <div id="login-row" className="row justify-content-center align-items-center">
                        <div id="login-column" className="col-md-6">
                            <div id="login-box" className="col-md-12">
                                <form id="login-form" className="form" method="post" onSubmit={this.handleSubmit}>
                                    <div className="form-group">
                                        <label htmlFor="email" className="text-info">Email:</label><br/>
                                        <input type="text" name="email" id="email" className="form-control" onChange={this.emailHandler}/>
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="password" className="text-info">Password:</label><br/>
                                        <input type="password" name="password" id="password" className="form-control" onChange={this.passwordHandler}/>
                                    </div>
                                    <div className="form-group">
                                        <input type="submit" name="submit" className="btn btn-info btn-md" value="Submit"/>
                                    </div>
                                    <Link to="/register">
                                        <div id="register-link" className="text-right">
                                            <a href="#" className="text-info">Register here</a>
                                        </div>
                                    </Link>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Login;

Вот мое приложение. js:

import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';
import Login from './components/Login/Login';
import Wall from './components/Wall/Wall';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            auth: false
        };
    }

    componentDidMount() {
        // I'm not Unsure if I need to do anything here
        if(Cookies.get("access_token") !== null) {
            console.log("it's true!");
            this.setState({auth: true});
        } else {
            console.log("it's false");
        }
    }

    render() {
        return (
            <React.Fragment>
                <Switch>
                    <Route path="/login" component={Login}/>
                    <Route path="/wall-of-fame" component={Wall}/>
                </Switch>
            </React.Fragment>
        );
    }
}

export default App;

Вот моя стена. js:

import React, { Component } from 'react'

class Wall extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <h1>Hello, {this.props.name}!</h1>
        );
    }
}

export default Wall;