withAuth HOC in Private Page layout (#27)

Author: joaorodrs

src/contexts/AuthContext.tsx

@@ -5,6 +5,7 @@ import Router from "next/router";
 
 type AuthContextType = {
   isAuthenticated: boolean;
+  isLoading: boolean;
   user: User | null;
   signIn: (data: SigninValues) => Promise<void>;
   logout: () => void;
@@ -33,15 +34,20 @@ type User = {
 
 export function AuthProvider({ children }: Props) {
   const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
   const isAuthenticated = !!user;
 
   useEffect(() => {
     const { "nextjs-boilerplate-advanced.token": token } = parseCookies();
-    if (token) {
-      api.get("me").then(({ data }) => {
-        setUser(data);
-      });
+
+    if (!token) {
+      return setIsLoading(false);
     }
+
+    api.get("me").then(({ data }) => {
+      setUser(data);
+      setIsLoading(false);
+    });
   }, []);
 
   async function signIn(values: SigninValues) {
@@ -66,7 +72,9 @@ export function AuthProvider({ children }: Props) {
   }
 
   return (
-    <AuthContext.Provider value={{ isAuthenticated, signIn, logout, user }}>
+    <AuthContext.Provider
+      value={{ isAuthenticated, signIn, logout, user, isLoading }}
+    >
       {children}
     </AuthContext.Provider>
   );

src/hooks/useAuth.ts

@@ -0,0 +1,8 @@
+import { AuthContext } from "@/contexts/AuthContext";
+import { useContext } from "react";
+
+export default function useAuth() {
+  const authContext = useContext(AuthContext);
+
+  return authContext;
+}

src/layouts/PrivatePage.tsx

@@ -1,10 +1,12 @@
 import { Box, IconButton, Stack } from "@chakra-ui/react";
 import Image from "next/image";
-import React, { ReactNode, useCallback, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import logo from "@/assets/logo.svg";
 import { MdMenu } from "react-icons/md";
 import MainDrawer from "@/components/MainDrawer";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import useAuth from "@/hooks/useAuth";
 
 type Props = {
   children: ReactNode;
@@ -60,4 +62,27 @@ function PrivatePage({ children, title = "" }: Props) {
   );
 }
 
-export default PrivatePage;
+const withAuth = (Component: typeof PrivatePage) => {
+  const AuthenticatedComponent = (props: Props) => {
+    const router = useRouter();
+    const { user, isLoading } = useAuth();
+    const [renderPage, setRenderPage] = useState(false);
+
+    useEffect(() => {
+      if (isLoading) return;
+
+      if (!user?.id) {
+        router.replace("/login");
+        return;
+      }
+
+      setRenderPage(true);
+    }, [router, user, isLoading]);
+
+    return renderPage ? <Component {...props} /> : null;
+  };
+
+  return AuthenticatedComponent;
+};
+
+export default withAuth(PrivatePage);

src/pages/index.tsx

@@ -3,8 +3,6 @@ import PrivatePage from "@/layouts/PrivatePage";
 import { Container, Text } from "@chakra-ui/react";
 import React, { ReactElement, useContext } from "react";
 import type { NextPageWithLayout } from "./_app";
-import { GetServerSideProps } from "next";
-import { parseCookies } from "nookies";
 
 const Index: NextPageWithLayout = () => {
   const { user } = useContext(AuthContext);
@@ -19,23 +17,6 @@ const Index: NextPageWithLayout = () => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const { "nextjs-boilerplate-advanced.token": token } = parseCookies(ctx);
-
-  if (!token) {
-    return {
-      redirect: {
-        destination: "/login",
-        permanent: false,
-      },
-    };
-  }
-
-  return {
-    props: {},
-  };
-};
-
 Index.getLayout = function getLayout(page: ReactElement) {
   return <PrivatePage title="Dashboard">{page}</PrivatePage>;
 };