React: Authenticating on all Routes - reactjs

Question

I have an application that is using redux-oidc as a helper for authenticating users. I went through the example application on how to properly setup authenticating users, but in the example they would need to check if a user is logged in on every page before sending them to the login page.
The application I am building has a router with many different routes. I was wondering how to check if a user was logged on no mater which route they enter without having to duplicate the code for each component?
Router:
export default function Routes(props) {
return (
// Replace Router with our own component and add authenication
// https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71
<Router history={history}>
<Route path="/" component={HomePage}/>
<Route path="/test1" component={TestPage1}/>
<Route path="/test2" component={TestPage2}/>
<Route path="/test3" component={TestPage3}/>
<Route path="/callback" component={CallbackPage} />
</Router>
);
}
This is an example of a Router with 4 routes: Home, Test1, Test2, and Test3.
Home Page:
function HomePage(props) {
const { user } = props;
return !user || user.expired ? <LoginPage /> : (
<div>
<h1>Awesome Main Page!</h1>
<h3>{user ? user.profile.name : "Mister Unknown"}</h3>
</div>
);
}
In the Home Page component, we do a check for if the user is already authenticated. If they are not, then it goes to Login page.
Test Page:
function TestPage1(props) {
const { user } = props;
return !user || user.expired ? <LoginPage /> : (<div><h1>Test Page 1</h1><h3>{user ? user.profile.name : "Mister Unknown"}</h3></div>);
}
On each of the Test Page components in the routers, we also have to check if the user is authenticated. That seems to go against the DRY principles, and for each new route we create we would have to check for authentication again.
Is this the normal/proper way of checking authentication or is there a better way that abides by DRY principles?

Answer 1

no this is not the right way.
route.js
<Router history={history}>
<Switch>
<PublicRoute path="/" component={Home} exact= {true} />
<PrivateRoute path="/Test1" component = {Testpageone} />
<PrivateRoute path="/Test2" component= {Testpagetwo} />
</Switch>
</Router>
PrivateRoute.js
import {Redirect} from "react-router-dom"
const { user } = props;
return (
<Route
{...rest}
component={props =>
user ? (
<div>
<Component {...props} />
</div>
) : (
<Redirect to="/" />
)
}
/>
);
PublicRoute.js
const { user } = props;
return (
<Route
{...rest}
component={props =>
user ? <Redirect to="/test1" /> : <Component {...props} />
}
/>
);
};
hope this will help

Answer 2

I've always found the most reliable option is to deal with logins in most apps as part of API calls:
UI fragment calls API
If there is no valid token, or it has expired, then redirect to login
This deals with both initial login and session expiry
Key classes tend to focus on the following responsibilities:
API Client
Authentication and token handling
Your React views can then be written in a productive way without any OAuth plumbing. If interested take a look at my code sample write up.
I don't claim to be a big React JS expert, but happy to answer follow up questions on OAuth handling if it helps.