How to write a requireAuth Higher Order Component

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);