show when logged in

components/header.tsx

@@ -1,19 +1,28 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
+import UserContext from './user/context'
 
 export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
+  const { username, role } = useContext(UserContext)
   return (
-    <div className="flex flex-row items-center p-3 my-3 text-white bg-gray-600 rounded-sm">
+    <>
-      <h1 className="mr-3 flex-grow text-3xl">
+      <div className="flex flex-row items-center p-3 my-3 text-white bg-gray-600 rounded-sm">
-        <Link href="/">{label}</Link>
+        <h1 className="mr-3 flex-grow text-3xl">
-      </h1>
+          <Link href="/">{label}</Link>
-      <Image
+        </h1>
-        src="/logo.webp"
+        <Image
-        alt="Logo Freundeskreis VCP Rosenfeld"
+          src="/logo.webp"
-        width="160"
+          alt="Logo Freundeskreis VCP Rosenfeld"
-        height="44"
+          width="160"
-      />
+          height="44"
-    </div>
+        />
+      </div>
+      {username && (
+        <div>
+          FYI, you are logged in as <strong>{username}</strong>{' '}
+        </div>
+      )}
+    </>
   )
 }

components/user/context.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { UserData } from '../../lib/session'
+
+const UserContext = React.createContext<UserData>({
+  username: undefined,
+  role: undefined,
+})
+
+export default UserContext

pages/_app.tsx

@@ -1,10 +1,14 @@
-import React from 'react'
 import '../styles/index.css'
+import UserContext from '../components/user/context'
 
 export default function MyApp({ Component, pageProps }) {
+  const { username, role } = pageProps?.user || {}
+
   return (
     <div className="wrapper">
-      <Component {...pageProps} />
+      <UserContext.Provider value={{ username, role }}>
+        <Component {...pageProps} />
+      </UserContext.Provider>
     </div>
   )
 }