show when logged in

components/header.tsx

@@ -1,9 +1,12 @@
-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">
           <Link href="/">{label}</Link>
@@ -15,5 +18,11 @@ export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
           height="44"
         />
       </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">
+      <UserContext.Provider value={{ username, role }}>
         <Component {...pageProps} />
+      </UserContext.Provider>
     </div>
   )
 }