Private and Signed Out only routes

src/pages/signin.tsx

@@ -9,6 +9,7 @@ import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
+import signedOutRoute from '@/utils/route/signedOutRoute';
 import type { NextPageWithLayout } from '@/utils/types';
 
 import { handleCreateAccount } from '../utils/auth';
@@ -21,14 +22,14 @@ const SignInPage: NextPageWithLayout = () => {
   const signedIn = useAuthStore((store) => store.signedIn);
   const { redirect } = useSignInRedirect();
 
-  useClearCurrentComponent();
-
   useEffect(() => {
     if (signedIn) {
       redirect();
     }
   }, [redirect, signedIn]);
 
+  useClearCurrentComponent();
+
   const onSubmit = handleSubmit(async (data) => {
     if (!data.email) return;
 
@@ -85,7 +86,7 @@ const SignInPage: NextPageWithLayout = () => {
 };
 SignInPage.getLayout = useDefaultLayout;
 
-export default SignInPage;
+export default signedOutRoute(SignInPage);
 
 const StyledContainer = styled.div`
   width: 100%;

src/pages/signup.tsx

@@ -43,11 +43,12 @@ const SignUpPage: NextPageWithLayout = () => {
         openToast({
           title: '',
           type: 'INFO',
-          description: 'Passkey support is required for account creation. Try using an updated version of Chrome or Safari to create an account.',
+          description:
+            'Passkey support is required for account creation. Try using an updated version of Chrome or Safari to create an account.',
           duration: 5000,
-        })
+        });
       }
-    }
+    };
     checkPassKey();
   }, []);
 

src/utils/route/privateRoute.tsx

@@ -0,0 +1,20 @@
+import { useAuthStore } from '@/stores/auth';
+import type { NextComponentType } from 'next';
+import { useRouter } from 'next/router';
+
+const privateRoute = (Component: NextComponentType) => {
+  const Private = (props: any) => {
+    const signedIn = useAuthStore((store) => store.signedIn);
+    const router = useRouter();
+
+    if (!signedIn && router) {
+      // `signin` or `signup`?
+      router.push('/signup');
+    }
+    return <Component {...props} />;
+  };
+
+  return Private;
+};
+
+export default privateRoute;

src/utils/route/signedOutRoute.tsx

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router';
+
+import { useAuthStore } from '@/stores/auth';
+
+import type { NextPageWithLayout } from '../types';
+
+const signedOutRoute = (Component: NextPageWithLayout) => {
+  const SignedOut = (props: NextPageWithLayout) => {
+    const signedIn = useAuthStore((store) => store.signedIn);
+    const router = useRouter();
+
+    if (signedIn && router) {
+      router.push('/');
+    }
+    return <Component {...props} />;
+  };
+
+  return SignedOut;
+};
+
+export default signedOutRoute;