feat(client): protect /x route

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/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')
+      }
+    }, [auth, router])
+    if (auth === false || loading === true)
+      return null
+
+    return <Component {...props} />
+  }
+}