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
    }, [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);
  1. 2

    From a react noob's perspective, please keep these insights coming!

    1. 2

      Glad you like it! Will keep sharing.

Trending on Indie Hackers
✨ Let's hack Twitter ✨ 39 comments I quit everything. I'm going all-in on Web3. 33 comments "The Big Indie Maker Black Friday Sale, 2021" 🥳 11 comments My SEO experience 4 comments Not another Black Friday deal 2 comments I wish I'd self-published sooner, one year of eBooks. 1 comment