@reflagged/shell 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reflagged/shell",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Shared app shell for Reflagged services — OIDC auth, SSO, app switcher",
   "type": "module",
   "sideEffects": false,

package/src/components/BrandSwitcher.tsx

@@ -6,7 +6,7 @@ import { loadAppConfig } from '../config'
 import { baseSearchUrl, isPaletteShortcut, matchApps, type PaletteApp } from '../lib/palette/palette'
 import { ImpersonationCapsule, type ImpersonationInfo } from './ImpersonationCapsule'
 import { ServiceIcon } from './ServiceIcon'
-import { useTenantTheme } from './TenantTheme'
+import { faviconHref, useTenantFavicon, useTenantTheme } from './TenantTheme'
 
 type Booking = {
   id: string
@@ -226,6 +226,7 @@ export function BrandSwitcher() {
   }, [open])
 
   useTenantTheme(shell?.org?.themeCssUrl)
+  useTenantFavicon(faviconHref(shell?.org))
 
   const orgName = shell?.org?.name ?? null
   const baseUrl = shell?.baseUrl ?? 'https://app.rfl.gd'

package/src/components/TenantTheme.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 
 const THEME_LINK_ID = 'rflgd-tenant-theme'
+const FAVICON_LINK_ID = 'rflgd-tenant-favicon'
 
 /**
  * Loads the tenant palette stylesheet from the platform once per page:
@@ -26,24 +27,79 @@ export function useTenantTheme(href: string | null | undefined): void {
   }, [href])
 }
 
+/**
+ * Which stored image becomes the favicon.
+ *
+ * The mark is the square asset made for small sizes; the wide logo squeezed
+ * into 16×16 looks poor but still tells you which tab you are on. A tenant may
+ * have neither — then the tab stays blank rather than showing somebody else's
+ * logo, which is worse than no icon at all.
+ *
+ * Pure on purpose: the choice is the part worth testing, the DOM work below
+ * only repeats what `useTenantTheme` has been doing since 1.x.
+ */
+export function faviconHref(
+  org: { logoMarkUrl?: string | null; logoUrl?: string | null } | null | undefined,
+): string | null {
+  return org?.logoMarkUrl?.trim() || org?.logoUrl?.trim() || null
+}
+
+/**
+ * Points the browser tab at the tenant's logo.
+ *
+ * Set from the client, because the modules share this package rather than a
+ * server layout: a per-app `icon.tsx` would mean the same file in every
+ * service. The cost is a blank tab for the moment it takes `/api/shell-info`
+ * to answer.
+ */
+export function useTenantFavicon(href: string | null | undefined): void {
+  useEffect(() => {
+    if (!href) return
+    const existing = document.getElementById(FAVICON_LINK_ID) as HTMLLinkElement | null
+    if (existing) {
+      if (existing.href !== href) existing.href = href
+      return
+    }
+    const link = document.createElement('link')
+    link.id = FAVICON_LINK_ID
+    link.rel = 'icon'
+    link.href = href
+    document.head.appendChild(link)
+  }, [href])
+}
+
 /**
  * For modules that do not mount `BrandSwitcher` (which loads the palette
  * itself): render once in the root layout.
  */
 export function TenantTheme(): null {
   const [href, setHref] = useState<string | null>(null)
+  const [icon, setIcon] = useState<string | null>(null)
   useEffect(() => {
     let cancel = false
     fetch('/api/shell-info', { credentials: 'include' })
       .then((r) => (r.ok ? r.json() : null))
-      .then((d: { org?: { themeCssUrl?: string | null } | null } | null) => {
-        if (!cancel) setHref(d?.org?.themeCssUrl ?? null)
-      })
+      .then(
+        (
+          d: {
+            org?: {
+              themeCssUrl?: string | null
+              logoMarkUrl?: string | null
+              logoUrl?: string | null
+            } | null
+          } | null,
+        ) => {
+          if (cancel) return
+          setHref(d?.org?.themeCssUrl ?? null)
+          setIcon(faviconHref(d?.org))
+        },
+      )
       .catch(() => undefined)
     return () => {
       cancel = true
     }
   }, [])
   useTenantTheme(href)
+  useTenantFavicon(icon)
   return null
 }

package/src/lib/api/oidc-callback.ts

@@ -55,13 +55,26 @@ export async function GET(req: Request): Promise<NextResponse> {
 
   const params = oauth.validateAuthResponse(as, client, url, pkce.state)
 
-  const tokenResponse = await oauth.authorizationCodeGrantRequest(
-    as, client, clientAuth, params, env.redirectUri, pkce.codeVerifier,
-  )
-  const result = await oauth.processAuthorizationCodeResponse(as, client, tokenResponse, {
-    expectedNonce: pkce.nonce,
-    requireIdToken: true,
-  })
+  // The provider issued a code and may still refuse to exchange it. Seen live:
+  // after an "Einloggen als" session ended, the browser's provider session
+  // still belonged to the impersonated account, every code was minted for it,
+  // and every exchange came back invalid_grant — an unhandled throw, so a bare
+  // 500 on each reload.
+  let result: Awaited<ReturnType<typeof oauth.processAuthorizationCodeResponse>>
+  try {
+    const tokenResponse = await oauth.authorizationCodeGrantRequest(
+      as, client, clientAuth, params, env.redirectUri, pkce.codeVerifier,
+    )
+    result = await oauth.processAuthorizationCodeResponse(as, client, tokenResponse, {
+      expectedNonce: pkce.nonce,
+      requireIdToken: true,
+    })
+  } catch (error) {
+    if (!(error instanceof oauth.ResponseBodyError)) throw error
+    const res = deniedResponse(error.error, error.error_description ?? null)
+    res.cookies.delete(OIDC_STATE_COOKIE)
+    return res
+  }
 
   const claims = oauth.getValidatedIdTokenClaims(result)
   if (!claims) return NextResponse.json({ error: 'no-id-token' }, { status: 400 })
@@ -123,13 +136,25 @@ const escapeHtml = (v: string): string =>
  */
 export function deniedResponse(error: string, description: string | null): NextResponse {
   const status = error === 'access_denied' ? 403 : 400
+  // invalid_grant: the code belongs to a provider session that is no longer
+  // valid. Trying again lands in that same session, so the way out is to end
+  // it — signing out at the platform — not to ask an administrator.
+  const expired = error === 'invalid_grant'
   const headline =
-    error === 'access_denied' ? 'Kein Zugriff auf diese Anwendung' : 'Anmeldung fehlgeschlagen'
-  const detail =
-    description?.trim() ||
-    (error === 'access_denied'
-      ? 'Ihr Account ist dieser Anwendung nicht zugeordnet.'
-      : `Der Anmeldedienst hat die Anmeldung abgelehnt (${error}).`)
+    error === 'access_denied'
+      ? 'Kein Zugriff auf diese Anwendung'
+      : expired
+        ? 'Anmeldung abgelaufen'
+        : 'Anmeldung fehlgeschlagen'
+  const detail = expired
+    ? 'Die Anmeldung gehört zu einer Sitzung, die nicht mehr gilt — etwa nach dem Ende von „Einloggen als“. Melden Sie sich bei der Plattform ab und danach neu an.'
+    : description?.trim() ||
+      (error === 'access_denied'
+        ? 'Ihr Account ist dieser Anwendung nicht zugeordnet.'
+        : `Der Anmeldedienst hat die Anmeldung abgelehnt (${error}).`)
+  const next = expired
+    ? '<p><a href="/api/oidc/signout">Bei der Plattform abmelden</a></p>'
+    : '<p>Bitten Sie eine Administratorin oder einen Administrator Ihrer Organisation, Ihren Account für diese Anwendung freizuschalten.</p>\n  <p><a href="/">Zur Startseite</a></p>'
   const html = `<!doctype html>
 <html lang="de">
 <head>
@@ -150,8 +175,7 @@ export function deniedResponse(error: string, description: string | null): NextR
 <main>
   <h1>${escapeHtml(headline)}</h1>
   <p>${escapeHtml(detail)}</p>
-  <p>Bitten Sie eine Administratorin oder einen Administrator Ihrer Organisation, Ihren Account für diese Anwendung freizuschalten.</p>
-  <p><a href="/">Zur Startseite</a></p>
+  ${next}
   <p><small>Fehlercode: ${escapeHtml(error)}</small></p>
 </main>
 </body>