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,7 +84,8 @@ export default function Header() {
                 />
               </svg>
               <div
-                className={`${hamburgerOpen || 'hidden'
+                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">
@@ -98,7 +102,6 @@ export default function Header() {
                         </a>
                       )
                     })}
-                    <User />
                   </div>
                 </div>
               </div>

helpers/withAuth.tsx

@@ -0,0 +1,25 @@
+import { SessionProvider } from 'next-auth/react'
+import Auth from '../components/auth'
+import User from '../components/user'
+
+// This is the HOC
+function withAuth(WrappedComponent) {
+  // Return a new component
+  function withAuth({ session, ...pageProps }) {
+    // Render the WrappedComponent with additional props
+    return (
+      <SessionProvider session={session}>
+        <Auth>
+          <User />
+          <WrappedComponent {...pageProps} />
+        </Auth>
+      </SessionProvider>
+    )
+  }
+
+  withAuth.displayName = `withAuth(${WrappedComponent.displayName}`
+
+  return withAuth
+}
+
+export default withAuth

pages/_app.tsx

@@ -1,52 +1,16 @@
-import { AxiomWebVitals } from 'next-axiom'
-import { Analytics } from '@vercel/analytics/react';
-import { useEffect } from 'react'
-
-import type { AppProps } from 'next/app'
-
-import { useSession, signIn, SessionProvider } from 'next-auth/react'
-import Layout from '../components/layout';
+import { Analytics } from '@vercel/analytics/react'
+import Layout from '../components/layout'
 
 import '../styles/index.css'
 import '../styles/gfm.css'
 
-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>
-}
-
-export default function MyApp({
-  Component,
-  pageProps: { session, ...pageProps },
-}) {
+export default function MyApp({ Component, pageProps }) {
   return (
     <div className="flex flex-col min-h-screen">
-      <SessionProvider session={session}>
       <Layout>
-          {Component.authenticationRequired ? (
-            <Auth>
         <Component {...pageProps} />
-            </Auth>
-          ) : (
-            <Component {...pageProps} />
-          )}
         <Analytics />
       </Layout>
-      </SessionProvider>
-      <AxiomWebVitals />
     </div>
   )
 }

pages/admin/bookings/[uuid]/bill.tsx

@@ -9,6 +9,7 @@ import { log } from '../../../../helpers/log'
 import { getBillTotal, createBill, patchBill } from '../../../../helpers/bill'
 import { getBookingStatus } from '../../../../helpers/booking'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
+import withAuth from '../../../../helpers/withAuth'
 
 export const getServerSideProps = async (context) => {
   const milageMax = await getMilageMax()
@@ -197,7 +198,8 @@ function BookingBillPage({
                     >
                       -
                     </button>
-                    <label className="flabel inline">{`Kostenpunkt ${index + 1
+                    <label className="flabel inline">{`Kostenpunkt ${
+                      index + 1
                     }`}</label>
                   </div>
                   <div className="ml-10 mb-3" key={`input{index}`}>
@@ -262,4 +264,4 @@ function BookingBillPage({
 
 BookingBillPage.authenticationRequired = true
 
-export default BookingBillPage
+export default withAuth(BookingBillPage)

pages/admin/bookings/[uuid]/index.tsx

@@ -8,6 +8,7 @@ import { patchBooking } from '../../../../helpers/booking'
 import { log } from '../../../../helpers/log'
 import { BOOKING_STATUS } from '../../../../db/enums'
 import BookingTable from '../../../../components/bookingTable'
+import withAuth from '../../../../helpers/withAuth'
 
 export const getServerSideProps = getServerSideBooking
 
@@ -73,4 +74,4 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: IBooking }) {
 
 ShowBookingAdmin.authenticationRequired = true
 
-export default ShowBookingAdmin
+export default withAuth(ShowBookingAdmin)

pages/admin/index.tsx

@@ -1,5 +1,7 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import BookingTable from '../../components/bookingTable'
+import Layout from '../../components/layout'
+import withAuth from '../../helpers/withAuth'
 
 import { getServerSideRecentBookings } from '../../lib/getServerSideProps'
 
@@ -23,6 +25,4 @@ function AdminRecentBookings({ bookings }) {
   )
 }
 
-AdminRecentBookings.authenticationRequired = true
-
-export default AdminRecentBookings
+export default withAuth(AdminRecentBookings)