Authenticate private routes with API - reactjs

Question

I am trying to authenticate private routes. I have it working by checking for a cookie before allowing access. However, cookies can be spoofed so I have an API end point which accepts the cookie and returns whether its valid or not.
Working version without API:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
cookies.get('sessionid') ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/',
state: { from: props.location }
}}/>
)
)}/>
)
ReactDOM.render((
<Router>
<Switch>
<Route exact path="/" component={Login}/>
<PrivateRoute exact path="/home" component={Home} />
<PrivateRoute exact path="/upload" component={Upload}/>
<PrivateRoute exact path="/logout" component={Logout}/>
<PrivateRoute exact path="/review" component={Review}/>
<Route component={ NotFound } />
</Switch>
</Router>
), document.getElementById('root'))
Additional code for API call:
axios.post(process.env.REACT_APP_API_URL+'/account/validate-session', {
t1_session_id: cookies.get('sessionid')
})
.then(function (response) {
if(response.data.status === "OK"){
console.log('authenticated go to private route');
} else {
console.log('not valid, redirect to index');
}
}.bind(this))
.catch(function (error) {
console.log('not valid, redirect to index');
}.bind(this));
The issue is I am not sure how to incorporate the API section of code into the main route section.
Thanks

Answer 1

Well, I guess you must write a wrapper component for it. Let's try:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import YourComponent from './path/to/YourComponent';
class WrapperComponent extends Component {
constructor(props) {
super(props);
this.state = {
isAuth: false
};
}
componentDidMount() {
axios.post(process.env.REACT_APP_API_URL+'/account/validate-session', {
t1_session_id: cookies.get('sessionid')
})
.then(function (response) {
if(response.data.status === "OK"){
this.setState({isAuth: true})
} else {
this.setState({isAuth: false})
}
}.bind(this))
.catch(function (error) {
console.log('not valid, redirect to index');
}.bind(this));
}
render() {
return (this.state.isAuth ? <YourComponent /> : null);
}
}
export default WrapperComponent;
And now your route must redirect to WrapperComponent:
const PrivateRoute = ({ component: WrapperComponent, ...rest }) => (
<Route {...rest} render={props => (
<WrapperComponent {...props}/>
)}/>
)

Answer 2

Every user can only spoof his own cookie. Likewise, a user can spoof the entire JS code that runs in his browser. Therefore, calling the server for verifying the cookie will not mitigate your vulnerability so much.
Instead, you should trust the cookie in your JS code, and check the cookie in every operation in the server that requires login.
Notice that a cookie is not the safest way of identifying a user since it's a subject to CSRF attack. You should either use JWT or check the referer.
Anyway if you decide to adhere your idea of asking the server whether the cookie is valid, I would adopt arikanmstf's answer, except you should handle three cases: auth=true, auth=false and auth=null, since if we're yet to get an answer from the server we want just to hide the element, but if we got a negative answer, we wanna redirect the user.
constructor(props) {
super(props);
this.state = {
isAuth: null
};
}
render() {
if(this.state.isAuth === null) return null;
return (this.state.isAuth ? <YourComponent /> : <Redirect ... />
}