feat: Pomerium assertion headers used in UI now to display user info

package.json

@@ -13,6 +13,7 @@
     "check": "prettier --write . && eslint --fix"
   },
   "dependencies": {
+    "@pomerium/js-sdk": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

src/components/Chat.tsx

@@ -8,6 +8,7 @@ import type { Message } from 'ai'
 import { type Servers } from '../lib/schemas'
 import { ToolCallMessage } from './ToolCallMessage'
 import { useModel } from '../contexts/ModelContext'
+import { useUser } from '../contexts/UserContext'
 
 // Streamed event type
 type StreamEvent =
@@ -31,14 +32,15 @@ export function Chat() {
   const [streamBuffer, setStreamBuffer] = useState<StreamEvent[]>([])
   const [streaming, setStreaming] = useState(false)
   const { selectedModel } = useModel()
+  const { user } = useUser()
 
   const initialMessage = useMemo<Message>(
     () => ({
       id: generateMessageId(),
-      content: "👋 Hello! I'm your AI assistant. How can I help you today?",
+      content: `Hello ${user?.name?.split(' ')[0] ?? 'there'}! I'm your AI assistant. How can I help you today?`,
       role: 'assistant',
     }),
-    [],
+    [user?.name],
   )
 
   // Create a memoized body object that updates when selectedServers or model change

src/components/Header.tsx

@@ -12,9 +12,11 @@ import { ThemeToggle } from './ThemeToggle'
 import { Button } from './ui/button'
 import { ModelSelect } from './ModelSelect'
 import { useModel } from '../contexts/ModelContext'
+import { useUser } from '../contexts/UserContext'
 
 const Header: React.FC = () => {
   const { selectedModel, setSelectedModel } = useModel()
+  const { user, isLoading } = useUser()
   const [isDark, setIsDark] = useState(false)
 
   useEffect(() => {
@@ -46,7 +48,7 @@ const Header: React.FC = () => {
             <div className="px-2 py-1.5">
               <p className="text-sm font-medium">User Account</p>
               <p className="text-xs text-gray-500 dark:text-gray-400">
-                user@example.com
+                {isLoading ? 'Loading...' : user?.email}
               </p>
             </div>
             <DropdownMenuSeparator />
@@ -80,17 +82,26 @@ const Header: React.FC = () => {
             <DropdownMenuTrigger asChild>
               <Button
                 variant="secondary"
-                size="sm"
-                className="size-10 flex items-center justify-center rounded-full"
+                className="size-10 flex justify-center items-center rounded-full"
               >
-                <User className="h-5 w-5 text-secondary-foreground" />
+                <span className="sr-only">User menu</span>
+                {user?.picture ? (
+                  <img
+                    src={user.picture}
+                    alt={user.name}
+                    aria-hidden={true}
+                    className="size-8 rounded-full"
+                  />
+                ) : (
+                  <User className="size-4" />
+                )}
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
               <div className="px-2 py-1.5">
-                <p className="text-sm font-medium">User Account</p>
+                <p className="text-sm font-medium">{user?.name}</p>
                 <p className="text-xs text-gray-500 dark:text-gray-400">
-                  user@example.com
+                  {user?.email}
                 </p>
               </div>
               <DropdownMenuSeparator />

src/contexts/UserContext.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext } from 'react'
+import type { ReactNode } from 'react'
+import { getBrowserUser } from '@pomerium/js-sdk'
+import { useQuery } from '@tanstack/react-query'
+import type { UserInfo } from 'node_modules/@pomerium/js-sdk/lib/esm/types/utils'
+
+type UserContextType = {
+  user: UserInfo | undefined
+  isLoading: boolean
+  error: unknown
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined)
+
+async function fetchUserInfo(): Promise<UserInfo> {
+  const userInfo = await getBrowserUser()
+
+  return {
+    email: userInfo.email ?? '',
+    name: userInfo.name ?? '',
+    picture: userInfo.picture as string,
+  }
+}
+
+export function UserProvider({ children }: { children: ReactNode }) {
+  const {
+    data: user,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['user'],
+    queryFn: fetchUserInfo,
+  })
+
+  return (
+    <UserContext.Provider value={{ user, isLoading, error }}>
+      {children}
+    </UserContext.Provider>
+  )
+}
+
+export function useUser() {
+  const context = useContext(UserContext)
+  if (context === undefined) {
+    throw new Error('useUser must be used within a UserProvider')
+  }
+  return context
+}

src/routes/__root.tsx

@@ -7,6 +7,7 @@ import {
 } from '@tanstack/react-router'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ModelProvider } from '../contexts/ModelContext'
+import { UserProvider } from '../contexts/UserContext'
 
 import appCss from '../styles.css?url'
 import Header from '../components/Header'
@@ -59,11 +60,13 @@ export const Route = createRootRoute({
 
   component: () => (
     <QueryClientProvider client={queryClient}>
-      <ModelProvider>
-        <RootDocument>
-          <Outlet />
-        </RootDocument>
-      </ModelProvider>
+      <UserProvider>
+        <ModelProvider>
+          <RootDocument>
+            <Outlet />
+          </RootDocument>
+        </ModelProvider>
+      </UserProvider>
     </QueryClientProvider>
   ),
 })