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

@@ -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,

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)

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) {

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} />
+  }
+}

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])