From 33bb8afc4d01b35c72c6be2be1f624a347a68247 Mon Sep 17 00:00:00 2001
From: sripwoud <me@sripwoud.xyz>
Date: Mon, 9 Sep 2024 16:40:03 +0200
Subject: [PATCH] fix(client): protect `/x` route (#3)

* feat(client): protect `/x` route

* chore: add comment

* feat(client): do not show login button link on login page
---
 .biome.jsonc                       | 10 ++++++++
 client/src/app/x/page.tsx          | 39 ++++++++++++++++--------------
 client/src/components/Header.tsx   |  1 +
 client/src/components/withAuth.tsx | 21 ++++++++++++++++
 client/src/hooks/useAuthorized.ts  |  1 +
 5 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/withAuth.tsx

diff --git a/.biome.jsonc b/.biome.jsonc
index 226808c..82668c5 100644
--- a/.biome.jsonc
+++ b/.biome.jsonc
@@ -34,6 +34,16 @@
       "include": ["server/src/lib/verify.ts"],
       "linter": { "rules": { "style": { "noUnusedTemplateLiteral": "off", "useTemplate": "off" } } },
     },
+    {
+      "include": ["client/src/components/withAuth.tsx"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useExhaustiveDependencies": "off",
+          },
+        },
+      },
+    },
   ],
   "vcs": {
     "enabled": true,
diff --git a/client/src/app/x/page.tsx b/client/src/app/x/page.tsx
index 85642da..d8bb8c9 100644
--- a/client/src/app/x/page.tsx
+++ b/client/src/app/x/page.tsx
@@ -1,20 +1,23 @@
-export default function X() {
-  return (
-    <div className='flex flex-col items-center justify-center'>
-      <h1 className='text-3xl font-bold text-center text-violet'>Gallery</h1>
-      <div className='w-full max-w-5xl'>
-        <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 justify-items-center'>
-          {[0, 1, 2].map((index) => (
-            <div key={index} className='bg-wisteria p-4 rounded-lg shadow-lg w-full max-w-xs'>
-              <img
-                src={`/dog${index}.avif`}
-                alt={`Dog eating corndog AI generated drawing ${index + 1}`}
-                className='w-full h-auto rounded object-cover'
-              />
-            </div>
-          ))}
-        </div>
+'use client'
+import { withAuth } from 'c/withAuth'
+
+const X = () => (
+  <div className='flex flex-col items-center justify-center'>
+    <h1 className='text-3xl font-bold text-center text-violet'>Gallery</h1>
+    <div className='w-full max-w-5xl'>
+      <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 justify-items-center'>
+        {[0, 1, 2].map((index) => (
+          <div key={index} className='bg-wisteria p-4 rounded-lg shadow-lg w-full max-w-xs'>
+            <img
+              src={`/dog${index}.avif`}
+              alt={`Dog eating corndog AI generated drawing ${index + 1}`}
+              className='w-full h-auto rounded object-cover'
+            />
+          </div>
+        ))}
       </div>
     </div>
-  )
-}
+  </div>
+)
+
+export default withAuth(X)
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 3b45f89..81fc5fb 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -10,6 +10,7 @@ export const Header = () => {
   const pathname = usePathname()
 
   const render = () => {
+    if (pathname === '/login') return null
     if (loading === true) return <BeatLoader loading={true} size={10} color='#e0a3c8' />
 
     if (auth === true) {
diff --git a/client/src/components/withAuth.tsx b/client/src/components/withAuth.tsx
new file mode 100644
index 0000000..0acec5a
--- /dev/null
+++ b/client/src/components/withAuth.tsx
@@ -0,0 +1,21 @@
+import { useAuthorized } from 'h/useAuthorized'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import type { ComponentType } from 'react'
+
+export const withAuth = <P extends object>(Component: ComponentType<P>) => {
+  return function WithAuth(props: P) {
+    const { auth, loading } = useAuthorized()
+    const router = useRouter()
+    useEffect(() => {
+      if (auth === false) {
+        alert('Nice try! But we need to verify your age first.')
+        router.push('/login')
+      }
+    }, [loading])
+    if (auth === false || loading === true)
+      return null
+
+    return <Component {...props} />
+  }
+}
diff --git a/client/src/hooks/useAuthorized.ts b/client/src/hooks/useAuthorized.ts
index 5e2ee33..4c3c3ef 100644
--- a/client/src/hooks/useAuthorized.ts
+++ b/client/src/hooks/useAuthorized.ts
@@ -17,6 +17,7 @@ export const useAuthorized = () => {
   }
 
   useEffect(() => {
+    // TODO: of course this is unsecure because trivial to craft
     setAuth(Cookies.get(config.cookie.name) === 'true')
     setLoading(false)
   }, [setAuth])