React not redirecting after first login. But redirects after forcefully redirecting and doing a login action again

Question

I have a login form which on click calls the following function.

Which summarizing , gets a response from the api, if valid, sets a cookie, and then redirects using the this.props.history.push()

handleSubmit(event) {
    event.preventDefault();
    const { email, password } = this.state;
    axios({
        method: 'post',
        url: 'http://localhost:3003/login',
        data: qs.stringify({ email, password }),
        headers: {
            'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        }
    }).then(res => {
        console.log("set cookie")
        //the accestoken is set as a cookie in order to check routes
        Cookies.set('accesstoken', res.data.accesstoken);
        console.log("those are the props")
        console.log(this.props);

        this.props.history.push('/'); //the bug


    }).catch(err => {
        console.log(err)
    })  


}

But the problem im facing is that when I do the first login, the redirect wont work. It sets all the cookies and all that, but it never actually redirects the user to the desired directory. So im forced to redirect myself by typing my desired route in the browser search bar.

This means that once i force myself into the desired directory, if I logout (basically deleting cookies), and try to login again. This time the redirect works.

It will work up until I clear all my cache with ctrl+F5 which happens to cause the same issue I had in the first login, so I had to redirect myself manuall again.

EDIT: This is how my routes look

<BrowserRouter>
                <Switch>

                    <Route exact path="/login" render={(props) => <LoginPage {...props}/>} />

                    <PrivateRoute authed={this.state.isAuthenticated} exact path="/" render={(props) => <RegisterPage />} />

                </Switch>
            </BrowserRouter>

And those are my private routes

import { Route } from 'react-router-dom';

import React from 'react'; import { Redirect } from 'react-router';

export default ({ component: Component, render: renderFn, authed,  ...rest }) =>{
  //The privateroute is fed with the auth state of app.js and evaluates the render based on that . If flase always renders "/"
  if (Component){
    return (
      <Route
      {...rest}
      render={props =>
        authed === true ? (
          <Component {...props} />
        ) : (
            <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
          )
      }
    />
    )
  } else {
    return ( //Second case is for iframe based renders
      <Route {...rest} render={props => authed === true ? renderFn(props) : <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> } /> 
      );
  }
}

EDIT2:

app.js

    constructor(props) {
        super(props);

        console.log("PROPS APPJS")
        console.log(props)

        //checks if user is autheticated within the system in order to manage routes
        this.state = {
            authenticationChecked: false,
            isAuthenticated: false 

        }  



    }


    componentDidMount() {
        //calls the auth service to decide the auth state value
        isAuthenticated().then((result) => {
            if (result === true) {
                this.setState({ isAuthenticated: true, authenticationChecked: true})
            } else {
                this.setState({ isAuthenticated: false, authenticationChecked: true})
            }
        });
    }

    login = (email, password) => {
        var thiscomponent  = this;
        axios({
            method: 'post',
            url: 'http://localhost:3003/login',
            data: qs.stringify({ email, password }),
            headers: {
                'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
            }
        }).then(res => {
            console.log("set cookie")
            //the accestoken is set as a cookie in order to check routes
            Cookies.set('accesstoken', res.data.accesstoken);
            console.log("those are the props")
            console.log(this.props);
            this.setState({ isAuthenticated: true }, () => {
               thiscomponent.props.history.push('/'); //the bug
            })

        }).catch(err => {
            console.log(err)
        })  
    }

.
.
.
.
.
.
.
<BrowserRouter>
                <Switch>

                    <PrivateRoute authed={this.state.isAuthenticated} exact path="/" render={(props) => <NewLandingPage login={this.login} {...props} exact />} />
                </Switch>
            </BrowserRouter>

Login page

 handleSubmit(event) {
        const { email, password } = this.state;
        this.props.login(email, password)
        event.preventDefault();


    }

EDIT: login page props

  {"history":{"length":15,"action":"POP","location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""}},"location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""},"match":{"path":"/login","url":"/login","isExact":true,"params":{}}}

Answer 1

Where and when do you set isAuthenticated? – lehm.ro 7 mins ago
@lehm.ro in my app.js during the componentDidMount(), default isAuthenticated is false – mouchin777 6 mins ago And then once you redirect you have to use this.setState to make it true, otherwise your private route won't show. But for that you need to pass the true state up to app.js and then trigger a function to setState for isAuthenticated true, then redirect to that route

Setup your history to work in app.js without being passed by props: Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)

In order to make use of history in the App component use it with withRouter. You need to make use of withRouter only when your component is not receiving the Router props,

This may happen in cases when your component is a nested child of a component rendered by the Router or you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the Routes.

import React from 'react';
import { Route , withRouter} from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';

var selectedTab;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    selectedTab = 0;
  }

  handleClick(value) {
    selectedTab = value;
    // console.log(selectedTab);
    this.props.history.push('/Bldgs');
    // console.log(this.props);
  }

  render() {
    var _this = this;

    return (
      <div>
        <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
        <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
      </div>
    );
  }
}

export default withRouter(App);

[Documentation][1] on withRouter

[1]: https://reacttraining.com/react-router/web/api/withRouter

Change in App.js

<Route exact path="/login" render={(props) => <LoginPage login={this.login} {...props}   />} />

and add

login = (email, password) => {
    var thiscomponent = this;
    axios({
        method: 'post',
        url: 'http://localhost:3003/login',
        data: qs.stringify({ email, password }),
        headers: {
            'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        }
    }).then(res => {
        console.log("set cookie")
        //the accestoken is set as a cookie in order to check routes
        Cookies.set('accesstoken', res.data.accesstoken);
        console.log("those are the props")
        console.log(this.props);
        this.setState({ isAuthenticated: true }, () => {
           thiscomponent.props.history.push('/'); //the bug
        })

    }).catch(err => {
        console.log(err)
    })  
}

and in LoginPage

handleSubmit(event) {
    const { email, password } = this.state;
    this.props.login(email, password)
    event.preventDefault();
}