cookie's now only used under /admin

components/auth.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+import { useSession, signIn } from 'next-auth/react'
+
+export default function Auth({ children }) {
+  const { data: session, status } = useSession()
+  const isUser = !!session?.user
+
+  useEffect(() => {
+    if (status === 'loading') return // Do nothing while loading
+    if (!isUser) signIn() // If not authenticated, force log in
+  }, [isUser, status])
+
+  if (isUser) {
+    return children
+  }
+
+  // Session is being fetched, or no user.
+  // If no user, useEffect() will redirect.
+  return <div>Loading...</div>
+}

components/header.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -43,7 +44,10 @@ export default function Header() {
         <div className="max-w-7xl mx-auto px-4 sm:px-6">
           <div className="relative flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
             <div className="flex justify-start lg:w-0 flex-1">
-              <Link href="/" className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
+              <Link
+                href="/"
+                className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl"
+              >
                 Pfadi-Bussle
               </Link>
             </div>
@@ -60,7 +64,6 @@ export default function Header() {
                   </a>
                 )
               })}
-              <User />
             </nav>
             <nav
               onClick={() => setHamburgerOpen(!hamburgerOpen)}
@@ -81,8 +84,9 @@ export default function Header() {
                 />
               </svg>
               <div
-                className={`${hamburgerOpen || 'hidden'
-                  } absolute z-10 mt-5 transform right-0`}
+                className={`${
+                  hamburgerOpen || 'hidden'
+                } absolute z-10 mt-5 transform right-0`}
               >
                 <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                   <div className="relative grid gap-2 bg-white px-4 py-2">
@@ -98,7 +102,6 @@ export default function Header() {
                         </a>
                       )
                     })}
-                    <User />
                   </div>
                 </div>
               </div>
@@ -108,4 +111,4 @@ export default function Header() {
       </div>
     </>
   )
-}
+}

components/user.tsx

@@ -24,4 +24,4 @@ export default function User() {
       </button>
     </>
   )
-}
+}