feat: show the signed-in user and a Sign out action in the header

src/app/logout/route.test.ts

@@ -0,0 +1,76 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { safeRedirectPath } from '@/lib/urlUtils'
+
+import { GET } from './route'
+
+const cookieJar = vi.hoisted(() => ({ names: [] as string[] }))
+vi.mock('next/headers', () => ({
+  cookies: async () => ({
+    getAll: () => cookieJar.names.map((name) => ({ name, value: 'x' })),
+  }),
+}))
+
+describe('safeRedirectPath', () => {
+  it('keeps same-origin absolute paths', () => {
+    expect(safeRedirectPath('/v2/projects/foo')).toBe('/v2/projects/foo')
+  })
+
+  it('rejects off-site redirects', () => {
+    for (const bad of ['//evil.com', 'https://evil.com', '/\\evil.com', null]) {
+      expect(safeRedirectPath(bad)).toBe('/v2/projects')
+    }
+  })
+})
+
+describe('GET /v2/logout', () => {
+  beforeEach(() => {
+    cookieJar.names = []
+    delete process.env.OIDC_LOGOUT_URL
+  })
+
+  it('expires every ALB session cookie shard and redirects', async () => {
+    cookieJar.names = [
+      'AWSELBAuthSessionCookie-0',
+      'AWSELBAuthSessionCookie-1',
+      'unrelated',
+    ]
+    const res = await GET(new Request('https://flyte.example/v2/logout'))
+
+    expect(res.status).toBe(302)
+    expect(res.headers.get('location')).toBe('https://flyte.example/v2/projects')
+
+    const setCookie = res.headers.getSetCookie()
+    expect(setCookie.every((c) => c.includes('Max-Age=0'))).toBe(true)
+    expect(setCookie.some((c) => c.includes('unrelated'))).toBe(false)
+    for (const name of ['AWSELBAuthSessionCookie-0', 'AWSELBAuthSessionCookie-1']) {
+      expect(setCookie.filter((c) => c.startsWith(`${name}=`))).toHaveLength(1)
+    }
+  })
+
+  it('expires the shards even when the proxy forwards no cookies', async () => {
+    const res = await GET(new Request('https://flyte.example/v2/logout'))
+    const setCookie = res.headers.getSetCookie()
+    expect(setCookie).toHaveLength(4)
+    expect(setCookie[0]).toContain('AWSELBAuthSessionCookie-0=;')
+  })
+
+  it('redirects to the IdP when OIDC_LOGOUT_URL is set', async () => {
+    process.env.OIDC_LOGOUT_URL = 'https://okta.example/oauth2/v1/logout'
+    const res = await GET(new Request('https://flyte.example/v2/logout'))
+    expect(res.headers.get('location')).toBe(
+      'https://okta.example/oauth2/v1/logout',
+    )
+  })
+
+  it('ignores an attacker-supplied redirect_url', async () => {
+    const res = await GET(
+      new Request('https://flyte.example/v2/logout?redirect_url=//evil.com'),
+    )
+    expect(res.headers.get('location')).toBe('https://flyte.example/v2/projects')
+  })
+})

src/app/logout/route.ts

@@ -0,0 +1,68 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import { safeRedirectPath } from '@/lib/urlUtils'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * ALB shards the OIDC session across `AWSELBAuthSessionCookie-0`, `-1`, … as the
+ * token grows, so we expire every cookie with this prefix rather than a fixed pair.
+ */
+const ALB_SESSION_COOKIE_PREFIX = 'AWSELBAuthSessionCookie'
+
+/**
+ * Shards expired unconditionally. The load balancer does not necessarily forward
+ * its own session cookie to the target, so "expire what the request carries" can
+ * clear nothing at all and leave the user signed in. Deleting a cookie that was
+ * never set is a no-op, so covering the usual shard count is the cheap way to be
+ * certain — anything the request does carry is expired on top of these.
+ */
+const ALB_SESSION_COOKIE_SHARDS = 4
+
+/** ALB sets its session cookies host-only on `/`; deletion must match. */
+const EXPIRED = 'Path=/; Max-Age=0; Expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly; Secure; SameSite=Lax'
+
+/**
+ * Signs the user out by expiring the ALB OIDC session cookies.
+ *
+ * ponytail: clearing the cookie only ends the *ALB* session. If the IdP session is
+ * still live, the next request re-authenticates silently — set `OIDC_LOGOUT_URL`
+ * (e.g. the Okta `/v1/logout` endpoint) to end that one too.
+ */
+export async function GET(request: Request) {
+  const url = new URL(request.url)
+  const target =
+    process.env.OIDC_LOGOUT_URL ||
+    new URL(safeRedirectPath(url.searchParams.get('redirect_url')), url.origin)
+      .toString()
+
+  const response = NextResponse.redirect(target, 302)
+
+  const forwarded = (await cookies())
+    .getAll()
+    .map((c) => c.name)
+    .filter((name) => name.startsWith(ALB_SESSION_COOKIE_PREFIX))
+
+  // Logged because whether the proxy forwards its session cookie decides whether
+  // the request-derived names above are ever non-empty.
+  console.log('[logout] proxy session cookies on request:', forwarded)
+
+  const names = new Set([
+    ...forwarded,
+    ...Array.from(
+      { length: ALB_SESSION_COOKIE_SHARDS },
+      (_, i) => `${ALB_SESSION_COOKIE_PREFIX}-${i}`,
+    ),
+  ])
+
+  for (const name of names) {
+    response.headers.append('set-cookie', `${name}=; ${EXPIRED}`)
+  }
+
+  return response
+}

src/components/Header/Header.test.tsx

@@ -0,0 +1,39 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Header } from './Header'
+
+const identity = vi.hoisted(() => ({ data: undefined as unknown }))
+vi.mock('@/hooks/useIdentity', () => ({ useIdentity: () => identity }))
+
+describe('Header', () => {
+  it('renders no user menu when there is no identity', () => {
+    identity.data = undefined
+    render(<Header />)
+    expect(screen.queryByLabelText('User menu')).not.toBeInTheDocument()
+  })
+
+  it('shows the user name and confirms before signing out', async () => {
+    identity.data = {
+      givenName: 'Kevin',
+      familyName: 'Su',
+      email: '',
+      subject: 'k',
+    }
+    render(<Header />)
+    expect(screen.getByText('Kevin Su')).toBeInTheDocument()
+
+    // The menu item opens the confirmation rather than signing out directly.
+    await userEvent.click(screen.getByLabelText('User menu'))
+    expect(screen.queryByText('Sign out of Flyte?')).not.toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Sign out' }))
+    expect(screen.getByText('Sign out of Flyte?')).toBeInTheDocument()
+  })
+})

src/components/Header/Header.tsx

@@ -4,19 +4,85 @@
 
 'use client'
 
-import React from 'react'
+import React, { useMemo, useState } from 'react'
+
+import { type MenuItem, PopoverMenu } from '@/components/Popovers'
+import { SignOutPanel } from '@/components/SignOutPanel'
+import { UserIcon } from '@/components/UserIdentityInfo'
+import { useIdentity } from '@/hooks/useIdentity'
+import { resolveUserNameFields } from '@/lib/userIdentityUtils'
 
 interface HeaderProps {
   logoComponent?: React.ReactNode
   showSearch?: boolean
 }
 
 export function Header({ logoComponent }: HeaderProps) {
+  const { data: identity } = useIdentity()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [signOutOpen, setSignOutOpen] = useState(false)
+
+  const menuItems: MenuItem[] = useMemo(
+    () => [
+      {
+        id: 'logout',
+        type: 'custom',
+        component: (
+          <button
+            type="button"
+            className="flex w-full cursor-pointer items-center px-4.5 py-2 text-left text-[13px] text-(--system-gray-6)"
+            onClick={() => {
+              setMenuOpen(false)
+              setSignOutOpen(true)
+            }}
+          >
+            Sign out
+          </button>
+        ),
+      },
+    ],
+    [],
+  )
+
+  const { firstName, lastName, userIdentityString } = resolveUserNameFields(
+    identity?.givenName,
+    identity?.familyName,
+    identity?.email,
+    identity?.subject,
+  )
+
   return (
     <div
       className={`flex h-[56px] w-full items-center justify-between bg-(--system-gray-1) px-5 py-3`}
     >
       {logoComponent ? logoComponent : <div />}
+      {/* No identity — nothing is authenticating this deployment, so no menu. */}
+      {identity && (
+        <PopoverMenu
+          items={menuItems}
+          showChevron={false}
+          showCheckboxes={false}
+          noSelectedBackground={true}
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          placement="bottom-end"
+        >
+          <button
+            type="button"
+            className="cursor-pointer rounded-full !p-0 focus:ring-2 focus:ring-(--union) focus:ring-offset-2 focus:ring-offset-(--system-gray-1) focus:outline-none"
+            aria-label="User menu"
+          >
+            <UserIcon
+              firstName={firstName}
+              lastName={lastName}
+              userIdentityString={userIdentityString}
+              showUserName
+            />
+          </button>
+        </PopoverMenu>
+      )}
+      {/* Outside the menu so closing the popover doesn't unmount the dialog. */}
+      <SignOutPanel open={signOutOpen} onCancel={() => setSignOutOpen(false)} />
     </div>
   )
 }

src/components/SignOutPanel.test.tsx

@@ -0,0 +1,33 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { SignOutPanel } from './SignOutPanel'
+
+const location = vi.hoisted(() => ({ href: '' }))
+vi.mock('@/lib/windowUtils', () => ({ getWindow: () => ({ location }) }))
+
+describe('SignOutPanel', () => {
+  it('renders nothing while closed', () => {
+    render(<SignOutPanel open={false} onCancel={vi.fn()} />)
+    expect(screen.queryByText('Sign out of Flyte?')).not.toBeInTheDocument()
+  })
+
+  it('confirms to the logout url and cancels without leaving', async () => {
+    const onCancel = vi.fn()
+    render(<SignOutPanel open onCancel={onCancel} />)
+    expect(screen.getByText('Sign out of Flyte?')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByTestId('signout-cancel'))
+    expect(onCancel).toHaveBeenCalled()
+    expect(location.href).toBe('')
+
+    await userEvent.click(screen.getByTestId('signout-confirm'))
+    expect(location.href).toBe('/v2/logout?redirect_url=%2Fv2%2Fprojects')
+  })
+})

src/components/SignOutPanel.tsx

@@ -0,0 +1,77 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+'use client'
+
+import { Button } from '@/components/Button'
+import {
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogTitle,
+} from '@/components/Dialog'
+import { Logo } from '@/components/Logo'
+import { getLogoutUrl } from '@/lib/apiUtils'
+import { getWindow } from '@/lib/windowUtils'
+
+export interface SignOutPanelProps {
+  open: boolean
+  onCancel: () => void
+}
+
+/**
+ * Confirmation shown before signing out — matches the session-expired panel.
+ * Signing out ends the proxy session, so it is worth a deliberate click rather
+ * than firing on the menu item itself.
+ */
+export function SignOutPanel({ open, onCancel }: SignOutPanelProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      size="lg"
+      aria-labelledby="signout-dialog-title"
+      className="border-1 p-10 dark:border-(--system-gray-3)"
+    >
+      <div className="flex w-full flex-col items-center gap-1">
+        <Logo width={55} height={44} className="shrink-0" />
+        <DialogTitle
+          id="signout-dialog-title"
+          className="text-center !text-2xl font-semibold"
+        >
+          Sign out of Flyte?
+        </DialogTitle>
+        <DialogBody className="!mt-2 w-full !p-0">
+          <p className="text-center text-sm font-semibold text-zinc-500 dark:text-zinc-400">
+            You will need to sign in again to continue.
+          </p>
+        </DialogBody>
+        {/* !flex-col: DialogActions defaults to a row at sm+, which would sit the
+            two buttons side by side and overflow the dialog. */}
+        <DialogActions className="w-full !flex-col">
+          <Button
+            color="union"
+            size="lg"
+            className="!w-full justify-center"
+            data-testid="signout-confirm"
+            onClick={() => {
+              const w = getWindow()
+              if (w) w.location.href = getLogoutUrl()
+            }}
+          >
+            Sign out
+          </Button>
+          <Button
+            outline
+            size="lg"
+            className="!w-full justify-center"
+            data-testid="signout-cancel"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </div>
+    </Dialog>
+  )
+}