React Redux Auth Middlware - reactjs

Question

I am doing a login application using react/redux, here is my flow.
User logs in using email/password pair and receives a token, which I
store in the cookie.
Once I have the token, I can get his credentials by doing a request on an /auth endpoint which retrieves his personal details - firstname, lastname, email.
I have a PrivateRoute which used to do the auth check, however I want to trigger the auth check on all routes, not only the private ones.
This way if the user is viewing the homepage I can still show his firstname in the navigation (for example)
The main issue seems to be the proper place to call the auth action.
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './store';
// Styling
import './App.css';
// Privat route
import PrivateRoute from './routes/PrivateRoute';
// Common
import Navigation from './components/common/Navigation';
// Components
import Login from './components/Login';
import Home from './components/Home';
import Profile from './components/Profile';
import ArticlesList from './components/Profile/ArticlesList';
import ArticleForm from './components/Profile/ArticleForm';
const App = () => (
<Provider store={store}>
<Router>
<Switch>
{/* Public routes */}
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
{/* Private routes */}
<PrivateRoute exact path="/profile" component={Profile} />
<PrivateRoute exact path="/profile/articles" component={ArticlesList} />
<PrivateRoute exact path="/profile/articles/new" component={ArticleForm} />
<PrivateRoute exact path="/profile/articles/:id(\d+)" component={ArticleForm} />
</Switch>
</Router>
</Provider>
);
export default App;
Here is a piece of my userActions.js where the auth action is defined
export const auth = () => async dispatch => {
dispatch({ type: AUTH_USER_REQUEST });
try{
let data = await UserService.auth();
dispatch({
type: AUTH_USER_SUCCESS,
payload: data
});
}catch(err){
dispatch({
type: AUTH_USER_ERROR,
payload: err.message
});
}
}
One of my ideas was to create a parent Route class to do the routing, and call the auth there.

Answer 1

To overcome it, I did something like the following by using Redux:
<Switch>
<Route
path="/"
component={this.props.auth.authenticationInProgress ? BlankPage :
(this.props.auth.isAuthenticated ? SegmentPage : LoginPage)}
exact={true}
/>
<Route component={NotFoundPage}/>
</Switch>
If the user logged in, the Route renders SegmentPage. Otherwise it renders LoginPage. Once login or logout process is triggered, the authentication is toggled and the page renders accordingly. Also I keep the status of authentication process so that no private data is shown to the user during the authentication check.