5
2 Comments

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);
  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
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 16 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments