fix(auth): sync header auth state with session and enforce server logout endpoints

1. derive header auth state from auth session checks/events
2. call end_session and NSS well-known logout on logout
3. add/update header tests for session-driven state transitions

Author: bourgeoa

src/login/login.ts

@@ -713,6 +713,12 @@ authSession.events.on('logout', async () => {
           await fetch(openidConfiguration.end_session_endpoint, { credentials: 'include' })
         }
       }
+
+      try {
+        await fetch('/.well-known/solid/logout', { credentials: 'include' })
+      } catch (_err) {
+        // Not all deployments expose NSS-compatible well-known logout endpoint.
+      }
     } catch (_err) {
       // Do nothing
     }

src/v2/components/header/Header.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit'
 import { icons } from '../../../iconBase'
-import { authSession } from 'solid-logic'
+import { authSession, authn } from 'solid-logic'
 import '../loginButton/index'
 import '../signupButton/index'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -510,6 +510,9 @@ export class Header extends LitElement {
   declare helpMenuOpen: boolean
   declare hasSlottedAccountMenu: boolean
   declare hasSlottedHelpMenu: boolean
+  private readonly handleAuthSessionChange = () => {
+    this.refreshAuthStateFromSession()
+  }
 
   constructor () {
     super()
@@ -540,14 +543,34 @@ export class Header extends LitElement {
     super.connectedCallback()
     document.addEventListener('click', this.handleDocumentClick)
     window.addEventListener('keydown', this.handleWindowKeydown)
+    if (typeof authSession.events?.on === 'function') {
+      authSession.events.on('login', this.handleAuthSessionChange)
+      authSession.events.on('logout', this.handleAuthSessionChange)
+      authSession.events.on('sessionRestore', this.handleAuthSessionChange)
+    }
+    this.refreshAuthStateFromSession()
   }
 
   disconnectedCallback () {
     document.removeEventListener('click', this.handleDocumentClick)
     window.removeEventListener('keydown', this.handleWindowKeydown)
+    if (typeof authSession.events?.off === 'function') {
+      authSession.events.off('login', this.handleAuthSessionChange)
+      authSession.events.off('logout', this.handleAuthSessionChange)
+      authSession.events.off('sessionRestore', this.handleAuthSessionChange)
+    }
     super.disconnectedCallback()
   }
 
+  private async refreshAuthStateFromSession () {
+    try {
+      await authn.checkUser()
+    } catch (_err) {
+      // Keep rendering even if session refresh cannot complete.
+    }
+    this.authState = authn.currentUser() ? 'logged-in' : 'logged-out'
+  }
+
   private handleHelpMenuClick (item: HeaderMenuItem, event: MouseEvent) {
     event.preventDefault()
     this.helpMenuOpen = false
@@ -665,8 +688,8 @@ export class Header extends LitElement {
     `
   }
 
-  private handleLoginSuccess () {
-    this.authState = 'logged-in'
+  private async handleLoginSuccess () {
+    await this.refreshAuthStateFromSession()
     this.dispatchEvent(new CustomEvent('auth-action-select', {
       detail: { role: 'login' },
       bubbles: true,
@@ -676,19 +699,50 @@ export class Header extends LitElement {
 
   private async handleLogout () {
     this.accountMenuOpen = false
+    const issuer = window.localStorage.getItem('loginIssuer') || ''
+
     try {
       await authSession.logout()
     } catch (_err) {
       // logout errors are non-fatal — proceed to clear state
     }
-    this.authState = 'logged-out'
+
+    await this.performServerLogout(issuer)
+
+    await this.refreshAuthStateFromSession()
     this.dispatchEvent(new CustomEvent('logout-select', {
       detail: { role: 'logout' },
       bubbles: true,
       composed: true
     }))
   }
 
+  private async performServerLogout (issuer: string) {
+    // Best-effort server logout for cookie-backed sessions on NSS-like servers.
+    try {
+      if (issuer) {
+        const wellKnownUri = new URL(issuer)
+        wellKnownUri.pathname = '/.well-known/openid-configuration'
+        const wellKnownResult = await fetch(wellKnownUri.toString(), { credentials: 'include' })
+
+        if (wellKnownResult.status === 200) {
+          const openidConfiguration = await wellKnownResult.json()
+          if (openidConfiguration && openidConfiguration.end_session_endpoint) {
+            await fetch(openidConfiguration.end_session_endpoint, { credentials: 'include' })
+          }
+        }
+      }
+    } catch (_err) {
+      // Continue with local logout state even if remote IdP logout is unavailable.
+    }
+
+    try {
+      await fetch('/.well-known/solid/logout', { credentials: 'include' })
+    } catch (_err) {
+      // Not all deployments expose NSS-compatible well-known logout.
+    }
+  }
+
   private renderAccountMenuItem (item: HeaderAccountMenuItem) {
     const content = html`
       ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}

src/v2/components/header/header.test.ts

@@ -1,9 +1,39 @@
 import { Header } from './Header'
 import './index'
+import { authn, authSession } from 'solid-logic'
+
+type Listener = () => void
+const mockSessionListeners = new Map<string, Set<Listener>>()
+
+jest.mock('solid-logic', () => ({
+  authn: {
+    checkUser: jest.fn(async () => null),
+    currentUser: jest.fn(() => null)
+  },
+  authSession: {
+    logout: jest.fn(async () => undefined),
+    events: {
+      on: jest.fn((event: string, handler: Listener) => {
+        if (!mockSessionListeners.has(event)) mockSessionListeners.set(event, new Set())
+        mockSessionListeners.get(event)?.add(handler)
+      }),
+      off: jest.fn((event: string, handler: Listener) => {
+        mockSessionListeners.get(event)?.delete(handler)
+      }),
+      emit: jest.fn((event: string) => {
+        mockSessionListeners.get(event)?.forEach(handler => handler())
+      })
+    }
+  }
+}))
 
 describe('SolidUIHeaderElement', () => {
   beforeEach(() => {
     document.body.innerHTML = ''
+    jest.clearAllMocks()
+    mockSessionListeners.clear()
+    ;(authn.currentUser as jest.Mock).mockReturnValue(null)
+    ;(authn.checkUser as jest.Mock).mockResolvedValue(null)
     Object.defineProperty(window, 'open', {
       configurable: true,
       writable: true,
@@ -77,6 +107,8 @@ describe('SolidUIHeaderElement', () => {
     expect(signUpLink.getAttribute('icon')).toBe('https://example.com/signup-icon-top.svg')
 
     loginButton.dispatchEvent(new CustomEvent('login-success', { bubbles: true, composed: true }))
+    await Promise.resolve()
+    await header.updateComplete
 
     expect(authActionSelected).toHaveBeenCalledWith({
       role: 'login'
@@ -105,6 +137,7 @@ describe('SolidUIHeaderElement', () => {
 
   it('uses a custom fallback avatar when no accountAvatar is configured', async () => {
     const header = new Header()
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
 
     header.authState = 'logged-in'
     header.accountAvatar = ''
@@ -123,6 +156,7 @@ describe('SolidUIHeaderElement', () => {
   it('renders an accounts dropdown with avatar when logged in', async () => {
     const header = new Header()
     const accountMenuSelected = jest.fn()
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
 
     header.authState = 'logged-in'
     header.accountIcon = 'https://example.com/account-icon.svg'
@@ -173,6 +207,7 @@ describe('SolidUIHeaderElement', () => {
 
   it('does not render the logout icon on mobile layout', async () => {
     const header = new Header()
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
     header.layout = 'mobile'
     header.authState = 'logged-in'
     header.logoutIcon = 'https://example.com/logout-icon.svg'
@@ -196,6 +231,7 @@ describe('SolidUIHeaderElement', () => {
 
   it('does not render account webid on mobile layout', async () => {
     const header = new Header()
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
     header.layout = 'mobile'
     header.authState = 'logged-in'
     header.accountMenu = [
@@ -263,6 +299,7 @@ describe('SolidUIHeaderElement', () => {
 
   it('renders helpMenuList inside the help dropdown and dispatches events', async () => {
     const header = new Header()
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
 
     const helpMenuClicked = jest.fn()
 
@@ -304,4 +341,35 @@ describe('SolidUIHeaderElement', () => {
 
     window.open = originalWindowOpen
   })
+
+  it('derives auth state from session on connect', async () => {
+    const header = new Header()
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
+
+    document.body.appendChild(header)
+    await header.updateComplete
+    await Promise.resolve()
+    await header.updateComplete
+
+    expect(authn.checkUser).toHaveBeenCalled()
+    expect(header.authState).toBe('logged-in')
+  })
+
+  it('refreshes auth state when session events fire', async () => {
+    const header = new Header()
+    document.body.appendChild(header)
+    await header.updateComplete
+
+    ;(authn.currentUser as jest.Mock).mockReturnValue({ uri: 'https://alice.example/profile/card#me' })
+    ;(authSession.events as any).emit('login')
+    await Promise.resolve()
+    await header.updateComplete
+    expect(header.authState).toBe('logged-in')
+
+    ;(authn.currentUser as jest.Mock).mockReturnValue(null)
+    ;(authSession.events as any).emit('logout')
+    await Promise.resolve()
+    await header.updateComplete
+    expect(header.authState).toBe('logged-out')
+  })
 })