A lot of React discussion these days focuses on hooks, but sometimes an HOC (or Higher Order Component) is the right tool for the job, particularly when you want to be able to avoiding rendering the passed in component in certain cases. Here's an example of how you might implement a requireAuth HOC.
function requireAuth(Component){
return (props) => {
// Let's assume we have a hook for getting auth state
const auth = useAuth();
useEffect(() => {
// Redirect if not signed in
if (auth.isAuthenticated === false) {
// Use replace instead of push so you don't break back button
router.replace("/signin");
}
}, [auth]);
return auth.isAuthenticated === true
// Render component passed into requireAuth
? <Component {...props} />
// Show loading if not signed in (redirect is about to happen)
// or while waiting on auth state (isAuthenticated is undefined)
: <PageLoader />
};
};
// Usage: Simply wrap any component when exporting
export default requireAuth(AccountPage);
From a react noob's perspective, please keep these insights coming!
Glad you like it! Will keep sharing.