@reflagged/shell 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# @reflagged/shell
+
+Shared app shell for Reflagged services. Provides:
+
+- OIDC authentication (signin, callback, signout)
+- SSO session management (JWT cookie + Payload AuthStrategy)
+- `/api/shell-info` proxy for platform service catalog
+- `BrandSwitcher` component (app switcher dropdown)
+- Admin route SSO enforcement middleware
+
+Published as a **public npm package of raw TS/TSX source**. Consumers transpile
+it in-app via Next's `transpilePackages` — there is no build/bundle step.
+
+## Install
+
+```bash
+pnpm add @reflagged/shell
+```
+
+In each consuming Next.js app, add the package to `transpilePackages`
+(**required** — the package ships `.ts/.tsx` source, incl. a `'use client'`
+component, that Next must compile):
+
+```ts
+// next.config.ts
+const nextConfig = {
+  transpilePackages: ['@reflagged/shell'],
+}
+```
+
+Do **not** add it to `serverExternalPackages` — it must be transpiled.
+
+Configure via env vars (`NEXT_PUBLIC_*` are inlined at **build** time):
+
+| Variable | Purpose |
+|----------|---------|
+| `NEXT_PUBLIC_RFLGD_APP_KEY` | App key matching the platform catalog `service` value (highlights the current app as "aktuell") |
+| `NEXT_PUBLIC_RFLGD_APP_LABEL` | Display name in BrandSwitcher |
+| `RFLGD_DEFAULT_USER_ROLE` | Role for auto-created users (default: `user`) |
+
+## Entry points
+
+```ts
+import { BrandSwitcher } from '@reflagged/shell/components/BrandSwitcher'
+import { loadAppConfig } from '@reflagged/shell/config'
+import { OIDC_COOKIE, loadOidcEnv } from '@reflagged/shell/auth/oidc-config'
+import { verifySessionCookie } from '@reflagged/shell/auth/oidc-cookie'
+import { refreshAccessToken } from '@reflagged/shell/auth/oidc-refresh'
+import { nextauthStrategy } from '@reflagged/shell/auth/nextauth-strategy'
+```
+
+### Per-app route files + middleware
+
+Each app keeps thin wrappers that re-export the handlers:
+
+```ts
+// src/app/api/oidc/signin/route.ts
+export { GET, dynamic, runtime } from '@reflagged/shell/api/oidc-signin'
+
+// src/middleware.ts
+export { default, config } from '@reflagged/shell/middleware'
+```
+
+Other API re-exports: `@reflagged/shell/api/oidc-callback`,
+`@reflagged/shell/api/oidc-signout`, `@reflagged/shell/api/shell-info`.
+
+## Local development (live-edit against a consumer)
+
+A published package is frozen in `node_modules`. To iterate on the shell and a
+consuming app at the same time, add a **local, uncommitted** pnpm override in
+the consumer (all Reflagged repos sit side-by-side under `~/Development/`):
+
+```jsonc
+// <app>/package.json — DEV ONLY, do not commit
+"pnpm": {
+  "overrides": {
+    "@reflagged/shell": "link:../rflgd-shell"
+  }
+}
+```
+
+Then `pnpm install`. Edits in `rflgd-shell/src` are picked up live (still
+transpiled via `transpilePackages`). **Remove the override before committing** —
+`link:../rflgd-shell` does not exist in the Coolify build context and would
+break the build.
+
+## Releasing
+
+Raw source, no build. To publish a new version:
+
+1. Bump `version` in `package.json`.
+2. Commit, then `git tag vX.Y.Z && git push --tags`.
+3. The `.github/workflows/publish.yml` workflow typechecks, verifies the tag
+   matches `version`, and runs `npm publish --access public` (needs the
+   `NPM_TOKEN` repo secret).

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@reflagged/shell",
+  "version": "1.0.0",
+  "description": "Shared app shell for Reflagged services — OIDC auth, SSO, app switcher",
+  "type": "module",
+  "sideEffects": false,
+  "files": ["src", "tsconfig.json", "README.md"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./middleware": "./src/middleware.ts",
+    "./config": "./src/config.ts",
+    "./components/BrandSwitcher": "./src/components/BrandSwitcher.tsx",
+    "./auth/oidc-config": "./src/lib/auth/oidc-config.ts",
+    "./auth/oidc-cookie": "./src/lib/auth/oidc-cookie.ts",
+    "./auth/oidc-refresh": "./src/lib/auth/oidc-refresh.ts",
+    "./auth/nextauth-strategy": "./src/lib/auth/nextauth-strategy.ts",
+    "./api/oidc-signin": "./src/lib/api/oidc-signin.ts",
+    "./api/oidc-callback": "./src/lib/api/oidc-callback.ts",
+    "./api/oidc-signout": "./src/lib/api/oidc-signout.ts",
+    "./api/shell-info": "./src/lib/api/shell-info.ts",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "jose": "^5.10.0",
+    "oauth4webapi": "^3.6.0"
+  },
+  "peerDependencies": {
+    "next": "^15.4.0",
+    "payload": "^3.79.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "next": "^15.4.0",
+    "payload": "^3.79.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.7.0"
+  }
+}

package/src/components/BrandSwitcher.tsx

@@ -0,0 +1,455 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { loadAppConfig } from '../config'
+
+type Booking = {
+  id: string
+  service: string
+  label: string
+  status: string
+  url: string | null
+  iconUrl: string | null
+}
+
+type Org = {
+  id: string
+  slug: string
+  name: string
+  logoUrl: string | null
+}
+
+type ShellInfo = {
+  user: { email: string; name?: string | null }
+  org: Org | null
+  orgs?: Org[]
+  bookings: Booking[]
+  catalogUrl: string
+  baseUrl: string
+}
+
+const StackIcon = ({ size = 22 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={(size * 30) / 32}
+    viewBox="0 0 32 30"
+    fill="none"
+    aria-hidden
+    style={{ flexShrink: 0 }}
+  >
+    <path d="M32,0 H23 A3,3 0 0,0 20,3 A3,3 0 0,0 23,6 H32 Z" fill="#B09A6A" />
+    <path d="M32,11 H12 A2,2 0 0,0 10,13 A2,2 0 0,0 12,15 H32 Z" fill="#B09A6A" opacity="0.45" />
+    <path
+      d="M32,23 H1.5 A1.5,1.5 0 0,0 0,24.5 A1.5,1.5 0 0,0 1.5,26 H32 Z"
+      fill="#B09A6A"
+      opacity="0.25"
+    />
+  </svg>
+)
+
+export function BrandSwitcher() {
+  const config = loadAppConfig()
+  const [shell, setShell] = useState<ShellInfo | null>(null)
+  const [error, setError] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null)
+  const [mounted, setMounted] = useState(false)
+  const triggerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    let cancel = false
+    fetch('/api/shell-info', { credentials: 'include' })
+      .then((r) => {
+        if (r.status === 401 || r.status === 403) {
+          setError(true)
+          return null
+        }
+        return r.ok ? r.json() : null
+      })
+      .then((d) => {
+        if (!cancel && d) setShell(d)
+      })
+      .catch(() => setError(true))
+    return () => {
+      cancel = true
+    }
+  }, [])
+
+  const handleToggle = () => {
+    if (!open && triggerRef.current) {
+      const r = triggerRef.current.getBoundingClientRect()
+      setPos({ top: r.bottom + 4, left: r.left })
+    }
+    setOpen((v) => !v)
+  }
+
+  // Keep position in sync on resize/scroll while open
+  useEffect(() => {
+    if (!open || !triggerRef.current) return
+    const update = () => {
+      const r = triggerRef.current?.getBoundingClientRect()
+      if (r) setPos({ top: r.bottom + 4, left: r.left })
+    }
+    window.addEventListener('resize', update)
+    window.addEventListener('scroll', update, true)
+    return () => {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('scroll', update, true)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onClick = (e: MouseEvent) => {
+      if ((e.target as HTMLElement)?.closest('[data-brand-switcher]')) return
+      setOpen(false)
+    }
+    document.addEventListener('mousedown', onClick)
+    return () => document.removeEventListener('mousedown', onClick)
+  }, [open])
+
+  const ready = (shell?.bookings ?? []).filter((b) => b.status === 'ready' && b.url)
+  const orgName = shell?.org?.name ?? null
+  const baseUrl = shell?.baseUrl ?? 'https://app.rfl.gd'
+  const orgs = shell?.orgs ?? (shell?.org ? [shell.org] : [])
+  const showWorkspaceSection = orgs.length > 1
+
+  const trigger = (
+    <div ref={triggerRef}>
+      <button
+        type="button"
+        onClick={handleToggle}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label="Reflagged Apps wechseln"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          cursor: 'pointer',
+          background: 'transparent',
+          border: 'none',
+          padding: '4px 8px',
+          borderRadius: 4,
+          fontFamily: 'inherit',
+          color: 'inherit',
+        }}
+      >
+        <StackIcon size={22} />
+        <div style={{ flex: 1, minWidth: 0, lineHeight: 1.15 }}>
+          <div
+            style={{
+              fontFamily: "'Red Hat Display', system-ui, sans-serif",
+              fontWeight: 700,
+              fontSize: 17,
+              letterSpacing: '-0.01em',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              color: '#2C1E14',
+            }}
+          >
+            {config.appLabel}
+          </div>
+          <div
+            style={{
+              fontFamily: "'JetBrains Mono', monospace",
+              fontSize: 10.5,
+              letterSpacing: '0.1em',
+              color: '#7A6A58',
+              marginTop: 2,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {orgName ? `${orgName} · rfl.gd` : 'rfl.gd'}
+          </div>
+        </div>
+        {orgName ? (
+          <span
+            style={{
+              fontSize: 10,
+              textTransform: 'uppercase',
+              letterSpacing: '0.06em',
+              padding: '2px 8px',
+              borderRadius: 99,
+              border: '1px solid rgba(44,30,20,0.1)',
+              background: 'rgba(44,30,20,0.03)',
+              color: '#7A6A58',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {orgName}
+          </span>
+        ) : null}
+        <span aria-hidden style={{ color: '#7A6A58', fontSize: 10, marginLeft: 4 }}>
+          {open ? '▴' : '▾'}
+        </span>
+      </button>
+    </div>
+  )
+
+  const sectionLabelStyle: React.CSSProperties = {
+    padding: '10px 12px 6px',
+    fontFamily: "'JetBrains Mono', monospace",
+    fontSize: 10,
+    color: '#7A6A58',
+    textTransform: 'uppercase',
+    letterSpacing: '0.12em',
+  }
+
+  const popover = open ? (
+    <div
+      role="menu"
+      data-brand-switcher
+      style={{
+        position: pos ? 'fixed' : 'absolute',
+        left: pos ? pos.left : 0,
+        top: pos ? pos.top : '100%',
+        zIndex: 2147483647,
+        marginTop: pos ? 0 : 8,
+        width: 280,
+        borderRadius: 14,
+        border: '1px solid rgba(176,154,106,0.16)',
+        background: '#FFFFFF',
+        padding: 8,
+        boxShadow: '0 1px 0 rgba(176,154,106,0.08), 0 12px 40px rgba(0,0,0,0.15)',
+      }}
+    >
+      {showWorkspaceSection ? (
+        <>
+          <div style={sectionLabelStyle}>Workspace</div>
+          {orgs.map((o) => {
+            const isCurrent = o.id === shell?.org?.id
+            return (
+              <div
+                key={o.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 12,
+                  padding: '8px 12px',
+                  borderRadius: 8,
+                  background: isCurrent ? 'rgba(176,154,106,0.15)' : 'transparent',
+                }}
+              >
+                <div
+                  style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    background: 'rgba(176,154,106,0.15)',
+                    color: '#B09A6A',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontFamily: "'Red Hat Display', system-ui, sans-serif",
+                    fontWeight: 600,
+                  }}
+                >
+                  {o.name.slice(0, 1).toUpperCase()}
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontWeight: 500, fontSize: 13.5, color: '#2C1E14' }}>{o.name}</div>
+                  <div style={{ fontSize: 11.5, color: '#7A6A58', marginTop: 2 }}>
+                    {isCurrent
+                      ? `${ready.length} Service${ready.length === 1 ? '' : 's'} aktiv`
+                      : o.slug}
+                  </div>
+                </div>
+                {isCurrent ? (
+                  <span
+                    style={{
+                      fontFamily: "'JetBrains Mono', monospace",
+                      fontSize: 9.5,
+                      color: '#B09A6A',
+                      padding: '2px 6px',
+                      background: 'rgba(176,154,106,0.15)',
+                      borderRadius: 4,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.1em',
+                    }}
+                  >
+                    aktuell
+                  </span>
+                ) : null}
+              </div>
+            )
+          })}
+          <hr
+            style={{
+              border: 'none',
+              borderTop: '1px solid rgba(176,154,106,0.12)',
+              margin: '6px 0',
+            }}
+          />
+        </>
+      ) : null}
+
+      <div style={sectionLabelStyle}>Apps</div>
+      {error && !shell ? (
+        <a
+          href="/api/oidc/signin"
+          style={{ display: 'block', padding: '8px 12px 12px', fontSize: 13, color: '#B09A6A', textDecoration: 'none' }}
+        >
+          Anmelden, um Services zu sehen →
+        </a>
+      ) : (
+        <>
+          {/* Base app is always a first-class entry — that's where users land
+              to book new services. */}
+          <a
+            href={baseUrl}
+            role="menuitem"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              padding: '10px 12px',
+              borderRadius: 8,
+              textDecoration: 'none',
+              color: '#2C1E14',
+            }}
+          >
+            <div
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                background: 'rgba(176,154,106,0.1)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <StackIcon size={18} />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontWeight: 500, fontSize: 13.5 }}>Reflagged Base</div>
+              <div style={{ fontSize: 11.5, color: '#7A6A58', marginTop: 2 }}>
+                Katalog & Settings
+              </div>
+            </div>
+            <span
+              style={{
+                fontFamily: "'JetBrains Mono', monospace",
+                fontSize: 9.5,
+                color: '#7A6A58',
+                padding: '2px 6px',
+                background: 'rgba(176,154,106,0.08)',
+                borderRadius: 4,
+                textTransform: 'uppercase',
+                letterSpacing: '0.1em',
+              }}
+            >
+              Hub
+            </span>
+          </a>
+
+          {ready.length === 0 ? (
+            <div style={{ padding: '8px 12px 12px', fontSize: 13, color: '#7A6A58' }}>
+              Noch keine aktiven Services.
+            </div>
+          ) : (
+            ready.map((b) => {
+              const active = b.service === config.appKey
+              return (
+                <a
+                  key={b.id}
+                  href={b.url ?? '#'}
+                  role="menuitem"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '10px 12px',
+                    borderRadius: 8,
+                    textDecoration: 'none',
+                    color: '#2C1E14',
+                    background: active ? 'rgba(176,154,106,0.15)' : 'transparent',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      background: active ? 'rgba(176,154,106,0.25)' : 'rgba(176,138,122,0.25)',
+                      color: active ? '#B09A6A' : '#B08A7A',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontFamily: "'Red Hat Display', system-ui, sans-serif",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {b.label.slice(0, 1).toUpperCase()}
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontWeight: 500, fontSize: 13.5 }}>{b.label}</div>
+                    <div style={{ fontSize: 11.5, color: '#7A6A58', marginTop: 2 }}>
+                      {active ? 'aktuell geöffnet' : 'bereit'}
+                    </div>
+                  </div>
+                  {active ? (
+                    <span
+                      style={{
+                        fontFamily: "'JetBrains Mono', monospace",
+                        fontSize: 9.5,
+                        color: '#B09A6A',
+                        padding: '2px 6px',
+                        background: 'rgba(176,154,106,0.15)',
+                        borderRadius: 4,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.1em',
+                      }}
+                    >
+                      aktuell
+                    </span>
+                  ) : (
+                    <span
+                      style={{
+                        fontFamily: "'JetBrains Mono', monospace",
+                        fontSize: 9.5,
+                        color: '#3F8F5C',
+                        padding: '2px 6px',
+                        background: 'rgba(63,143,92,0.12)',
+                        borderRadius: 4,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.1em',
+                      }}
+                    >
+                      bereit
+                    </span>
+                  )}
+                </a>
+              )
+            })
+          )}
+        </>
+      )}
+    </div>
+  ) : null
+
+  if (mounted && open && pos) {
+    return (
+      <div data-brand-switcher style={{ position: 'relative' }}>
+        {trigger}
+        {createPortal(popover, document.body)}
+      </div>
+    )
+  }
+
+  return (
+    <div data-brand-switcher style={{ position: 'relative' }}>
+      {trigger}
+      {popover}
+    </div>
+  )
+}

package/src/config.ts

@@ -0,0 +1,13 @@
+export type AppConfig = {
+  appKey: string
+  appLabel: string
+  defaultRole: string
+}
+
+export function loadAppConfig(): AppConfig {
+  return {
+    appKey: process.env.NEXT_PUBLIC_RFLGD_APP_KEY ?? 'unknown',
+    appLabel: process.env.NEXT_PUBLIC_RFLGD_APP_LABEL ?? 'Reflagged App',
+    defaultRole: process.env.RFLGD_DEFAULT_USER_ROLE ?? 'user',
+  }
+}

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

@@ -0,0 +1,78 @@
+import { NextResponse } from 'next/server'
+import * as oauth from 'oauth4webapi'
+
+import { OIDC_COOKIE, OIDC_SESSION_TTL, OIDC_STATE_COOKIE, loadOidcEnv } from '../auth/oidc-config'
+import { signSessionCookie } from '../auth/oidc-cookie'
+
+export const dynamic = 'force-dynamic'
+export const runtime = 'nodejs'
+
+export async function GET(req: Request): Promise<NextResponse> {
+  const env = loadOidcEnv()
+  if (!env) return NextResponse.json({ error: 'oidc-not-configured' }, { status: 500 })
+
+  const url = new URL(req.url)
+  const stateCookie = req.headers
+    .get('cookie')
+    ?.split(';')
+    .map((c) => c.trim())
+    .find((c) => c.startsWith(`${OIDC_STATE_COOKIE}=`))
+  if (!stateCookie) return NextResponse.json({ error: 'missing-state' }, { status: 400 })
+
+  let pkce: { codeVerifier: string; state: string; nonce: string; callback: string }
+  try {
+    pkce = JSON.parse(decodeURIComponent(stateCookie.split('=')[1] ?? ''))
+  } catch {
+    return NextResponse.json({ error: 'corrupt-state' }, { status: 400 })
+  }
+
+  const issuerUrl = new URL(env.issuer)
+  const as = await oauth.discoveryRequest(issuerUrl, { algorithm: 'oidc' }).then((r) =>
+    oauth.processDiscoveryResponse(issuerUrl, r),
+  )
+  const client: oauth.Client = { client_id: env.clientId }
+  const clientAuth = oauth.ClientSecretBasic(env.clientSecret)
+
+  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,
+  })
+
+  const claims = oauth.getValidatedIdTokenClaims(result)
+  if (!claims) return NextResponse.json({ error: 'no-id-token' }, { status: 400 })
+  const email = typeof claims.email === 'string' ? claims.email : null
+  if (!email) return NextResponse.json({ error: 'no-email-claim' }, { status: 400 })
+
+  const accessToken = typeof result.access_token === 'string' ? result.access_token : null
+  const refreshToken = typeof result.refresh_token === 'string' ? result.refresh_token : null
+  const accessTokenExpiresAt =
+    typeof result.expires_in === 'number'
+      ? Math.floor(Date.now() / 1000) + result.expires_in
+      : null
+
+  const session = await signSessionCookie(env.authSecret, {
+    sub: String(claims.sub),
+    email,
+    name: typeof claims.name === 'string' ? claims.name : null,
+    accessToken,
+    refreshToken,
+    accessTokenExpiresAt,
+  })
+
+  const origin = env.baseUrl || url.origin
+  const res = NextResponse.redirect(new URL(pkce.callback || '/admin', origin))
+  res.cookies.set(OIDC_COOKIE, session, {
+    httpOnly: true,
+    secure: req.url.startsWith('https'),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: OIDC_SESSION_TTL,
+  })
+  res.cookies.delete(OIDC_STATE_COOKIE)
+  return res
+}

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

@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server'
+import * as oauth from 'oauth4webapi'
+
+import { OIDC_STATE_COOKIE, loadOidcEnv } from '../auth/oidc-config'
+
+export const dynamic = 'force-dynamic'
+export const runtime = 'nodejs'
+
+export async function GET(req: Request): Promise<NextResponse> {
+  const env = loadOidcEnv()
+  if (!env) {
+    return NextResponse.json({ error: 'oidc-not-configured' }, { status: 500 })
+  }
+
+  const url = new URL(req.url)
+  const callback = url.searchParams.get('callbackUrl') ?? '/admin'
+
+  const issuerUrl = new URL(env.issuer)
+  const as = await oauth.discoveryRequest(issuerUrl, { algorithm: 'oidc' }).then((r) =>
+    oauth.processDiscoveryResponse(issuerUrl, r),
+  )
+
+  const codeVerifier = oauth.generateRandomCodeVerifier()
+  const codeChallenge = await oauth.calculatePKCECodeChallenge(codeVerifier)
+  const state = oauth.generateRandomState()
+  const nonce = oauth.generateRandomNonce()
+
+  const authEndpoint = as.authorization_endpoint
+  if (!authEndpoint) {
+    return NextResponse.json({ error: 'no-authorization-endpoint' }, { status: 500 })
+  }
+  const authUrl = new URL(authEndpoint)
+  authUrl.searchParams.set('client_id', env.clientId)
+  authUrl.searchParams.set('redirect_uri', env.redirectUri)
+  authUrl.searchParams.set('response_type', 'code')
+  authUrl.searchParams.set('scope', 'openid profile email offline_access')
+  authUrl.searchParams.set('state', state)
+  authUrl.searchParams.set('nonce', nonce)
+  authUrl.searchParams.set('code_challenge', codeChallenge)
+  authUrl.searchParams.set('code_challenge_method', 'S256')
+
+  const res = NextResponse.redirect(authUrl)
+  res.cookies.set(OIDC_STATE_COOKIE, JSON.stringify({ codeVerifier, state, nonce, callback }), {
+    httpOnly: true,
+    secure: req.url.startsWith('https'),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: 600,
+  })
+  return res
+}

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

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server'
+import { OIDC_COOKIE, loadOidcEnv } from '../auth/oidc-config'
+
+export const dynamic = 'force-dynamic'
+export const runtime = 'nodejs'
+
+const SIGNED_OUT_PATH = '/admin/login?signed-out=1'
+
+export async function GET(req: Request): Promise<NextResponse> {
+  const env = loadOidcEnv()
+  const fallbackOrigin = new URL(req.url).origin
+  const origin = (env?.baseUrl ?? fallbackOrigin).replace(/\/$/, '')
+  const localLanding = `${origin}${SIGNED_OUT_PATH}`
+
+  if (!env) {
+    const res = NextResponse.redirect(localLanding)
+    res.cookies.delete(OIDC_COOKIE)
+    return res
+  }
+
+  const baseUrl = env.issuer.replace(/\/oidc\/?$/, '')
+  const target = new URL(`${baseUrl}/api/sso/signout`)
+  target.searchParams.set('post_logout_redirect_uri', localLanding)
+
+  const res = NextResponse.redirect(target)
+  res.cookies.delete(OIDC_COOKIE)
+  return res
+}
+
+export const POST = GET

package/src/lib/api/shell-info.ts

@@ -0,0 +1,72 @@
+import { NextResponse } from 'next/server'
+
+import { OIDC_COOKIE, OIDC_SESSION_TTL, loadOidcEnv } from '../auth/oidc-config'
+import { signSessionCookie, verifySessionCookie } from '../auth/oidc-cookie'
+import { refreshAccessToken } from '../auth/oidc-refresh'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+export async function GET(req: Request): Promise<NextResponse> {
+  const env = loadOidcEnv()
+  if (!env) return NextResponse.json({ error: 'oidc-not-configured' }, { status: 503 })
+
+  const cookieHeader = req.headers.get('cookie') ?? ''
+  const segment = cookieHeader
+    .split(';')
+    .map((c) => c.trim())
+    .find((c) => c.startsWith(`${OIDC_COOKIE}=`))
+  if (!segment) return NextResponse.json({ error: 'no-session' }, { status: 401 })
+
+  const token = segment.slice(`${OIDC_COOKIE}=`.length)
+  let session = await verifySessionCookie(env.authSecret, token)
+  if (!session) return NextResponse.json({ error: 'invalid-session' }, { status: 401 })
+  if (!session.accessToken) {
+    return NextResponse.json({ error: 'no-access-token' }, { status: 401 })
+  }
+
+  const baseUrl = env.issuer.replace(/\/oidc\/?$/, '')
+  const callUpstream = (accessToken: string) =>
+    fetch(`${baseUrl}/api/shell/me`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+      cache: 'no-store',
+    })
+
+  let upstream = await callUpstream(session.accessToken)
+  let refreshedCookie: string | null = null
+
+  if (upstream.status === 401 && session.refreshToken) {
+    const refreshed = await refreshAccessToken(env, session.refreshToken)
+    if (refreshed) {
+      session = { ...session, ...refreshed }
+      refreshedCookie = await signSessionCookie(env.authSecret, {
+        sub: session.sub,
+        email: session.email,
+        name: session.name,
+        accessToken: refreshed.accessToken,
+        refreshToken: refreshed.refreshToken,
+        accessTokenExpiresAt: refreshed.accessTokenExpiresAt,
+      })
+      upstream = await callUpstream(refreshed.accessToken)
+    }
+  }
+
+  if (!upstream.ok) {
+    return NextResponse.json(
+      { error: 'upstream-failed', status: upstream.status },
+      { status: upstream.status },
+    )
+  }
+
+  const res = NextResponse.json(await upstream.json())
+  if (refreshedCookie) {
+    res.cookies.set(OIDC_COOKIE, refreshedCookie, {
+      httpOnly: true,
+      secure: req.url.startsWith('https'),
+      sameSite: 'lax',
+      path: '/',
+      maxAge: OIDC_SESSION_TTL,
+    })
+  }
+  return res
+}

package/src/lib/auth/nextauth-strategy.ts

@@ -0,0 +1,50 @@
+import { randomBytes } from 'node:crypto'
+import type { AuthStrategy } from 'payload'
+
+import { loadAppConfig } from '../../config'
+import { OIDC_COOKIE } from './oidc-config'
+import { verifySessionCookie } from './oidc-cookie'
+
+export const nextauthStrategy: AuthStrategy = {
+  name: 'rflgd-oidc',
+  authenticate: async ({ payload, headers }) => {
+    const secret = process.env.AUTH_SECRET
+    if (!secret) return { user: null }
+
+    const cookieHeader = headers.get('cookie') ?? ''
+    const cookieStart = `${OIDC_COOKIE}=`
+    const segment = cookieHeader
+      .split(';')
+      .map((c) => c.trim())
+      .find((c) => c.startsWith(cookieStart))
+    if (!segment) return { user: null }
+
+    const token = segment.slice(cookieStart.length)
+    const session = await verifySessionCookie(secret, token)
+    if (!session?.email) return { user: null }
+
+    const existing = await payload.find({
+      collection: 'users',
+      where: { email: { equals: session.email } },
+      limit: 1,
+      overrideAccess: true,
+    })
+
+    let user = existing.docs[0]
+    if (!user) {
+      const config = loadAppConfig()
+      const isFirst = (await payload.count({ collection: 'users', overrideAccess: true })).totalDocs === 0
+      user = await payload.create({
+        collection: 'users',
+        data: {
+          email: session.email,
+          password: randomBytes(32).toString('hex'),
+          role: isFirst ? 'admin' : config.defaultRole,
+        },
+        overrideAccess: true,
+      })
+    }
+
+    return { user: { ...user, collection: 'users' } }
+  },
+}

package/src/lib/auth/oidc-config.ts

@@ -0,0 +1,40 @@
+export const OIDC_COOKIE = 'rflgd-session'
+export const OIDC_STATE_COOKIE = 'rflgd-oidc-state'
+export const OIDC_SESSION_TTL = 60 * 60 * 24 * 30
+
+export type OidcSessionToken = {
+  sub: string
+  email: string
+  name?: string | null
+  accessToken?: string | null
+  refreshToken?: string | null
+  accessTokenExpiresAt?: number | null
+  iat: number
+  exp: number
+}
+
+export type OidcEnv = {
+  issuer: string
+  clientId: string
+  clientSecret: string
+  redirectUri: string
+  authSecret: string
+  baseUrl: string
+}
+
+export function loadOidcEnv(): OidcEnv | null {
+  const issuer = process.env.OIDC_ISSUER
+  const clientId = process.env.OIDC_CLIENT_ID
+  const clientSecret = process.env.OIDC_CLIENT_SECRET
+  const authSecret = process.env.AUTH_SECRET
+  const base = process.env.NEXT_PUBLIC_SERVER_URL
+  if (!issuer || !clientId || !clientSecret || !authSecret || !base) return null
+  return {
+    issuer,
+    clientId,
+    clientSecret,
+    redirectUri: `${base.replace(/\/$/, '')}/api/oidc/callback`,
+    authSecret,
+    baseUrl: base.replace(/\/$/, ''),
+  }
+}

package/src/lib/auth/oidc-cookie.ts

@@ -0,0 +1,57 @@
+import { SignJWT, jwtVerify } from 'jose'
+import type { OidcSessionToken } from './oidc-config'
+import { OIDC_SESSION_TTL } from './oidc-config'
+
+const ALG = 'HS256'
+
+function secretKey(authSecret: string): Uint8Array {
+  return new TextEncoder().encode(authSecret)
+}
+
+export async function signSessionCookie(
+  authSecret: string,
+  payload: {
+    sub: string
+    email: string
+    name?: string | null
+    accessToken?: string | null
+    refreshToken?: string | null
+    accessTokenExpiresAt?: number | null
+  },
+): Promise<string> {
+  return new SignJWT({
+    email: payload.email,
+    name: payload.name ?? null,
+    accessToken: payload.accessToken ?? null,
+    refreshToken: payload.refreshToken ?? null,
+    accessTokenExpiresAt: payload.accessTokenExpiresAt ?? null,
+  })
+    .setProtectedHeader({ alg: ALG })
+    .setIssuedAt()
+    .setSubject(payload.sub)
+    .setExpirationTime(`${OIDC_SESSION_TTL}s`)
+    .sign(secretKey(authSecret))
+}
+
+export async function verifySessionCookie(
+  authSecret: string,
+  token: string,
+): Promise<OidcSessionToken | null> {
+  try {
+    const { payload } = await jwtVerify(token, secretKey(authSecret), { algorithms: [ALG] })
+    if (typeof payload.sub !== 'string' || typeof payload.email !== 'string') return null
+    return {
+      sub: payload.sub,
+      email: payload.email,
+      name: typeof payload.name === 'string' ? payload.name : null,
+      accessToken: typeof payload.accessToken === 'string' ? payload.accessToken : null,
+      refreshToken: typeof payload.refreshToken === 'string' ? payload.refreshToken : null,
+      accessTokenExpiresAt:
+        typeof payload.accessTokenExpiresAt === 'number' ? payload.accessTokenExpiresAt : null,
+      iat: payload.iat ?? 0,
+      exp: payload.exp ?? 0,
+    }
+  } catch {
+    return null
+  }
+}

package/src/lib/auth/oidc-refresh.ts

@@ -0,0 +1,34 @@
+import * as oauth from 'oauth4webapi'
+import type { OidcEnv } from './oidc-config'
+
+export async function refreshAccessToken(
+  env: OidcEnv,
+  refreshToken: string,
+): Promise<{ accessToken: string; refreshToken: string | null; accessTokenExpiresAt: number } | null> {
+  const issuerUrl = new URL(env.issuer)
+  let as: oauth.AuthorizationServer
+  try {
+    as = await oauth
+      .discoveryRequest(issuerUrl, { algorithm: 'oidc' })
+      .then((r) => oauth.processDiscoveryResponse(issuerUrl, r))
+  } catch {
+    return null
+  }
+  const client: oauth.Client = { client_id: env.clientId }
+  const clientAuth = oauth.ClientSecretBasic(env.clientSecret)
+  try {
+    const res = await oauth.refreshTokenGrantRequest(as, client, clientAuth, refreshToken)
+    const body = await oauth.processRefreshTokenResponse(as, client, res)
+    if (typeof body.access_token !== 'string') return null
+    return {
+      accessToken: body.access_token,
+      refreshToken: typeof body.refresh_token === 'string' ? body.refresh_token : refreshToken,
+      accessTokenExpiresAt:
+        typeof body.expires_in === 'number'
+          ? Math.floor(Date.now() / 1000) + body.expires_in
+          : Math.floor(Date.now() / 1000) + 3600,
+    }
+  } catch {
+    return null
+  }
+}

package/src/middleware.ts

@@ -0,0 +1,34 @@
+import { NextResponse, type NextRequest } from 'next/server'
+
+const OIDC_COOKIE = 'rflgd-session'
+
+export default function middleware(req: NextRequest): NextResponse | undefined {
+  const { pathname, search, origin } = req.nextUrl
+
+  if (pathname.startsWith('/admin/api')) return
+
+  const wantsAdmin = pathname === '/admin' || pathname.startsWith('/admin/')
+  if (!wantsAdmin) return
+
+  if (pathname.startsWith('/admin/logout')) {
+    return NextResponse.redirect(new URL('/api/oidc/signout', origin))
+  }
+
+  if (pathname.startsWith('/admin/login')) {
+    const target = '/admin'
+    const signinUrl = new URL('/api/oidc/signin', origin)
+    signinUrl.searchParams.set('callbackUrl', target)
+    return NextResponse.redirect(signinUrl)
+  }
+
+  if (req.cookies.get(OIDC_COOKIE)) return
+
+  const target = pathname + search
+  const signinUrl = new URL('/api/oidc/signin', origin)
+  signinUrl.searchParams.set('callbackUrl', target)
+  return NextResponse.redirect(signinUrl)
+}
+
+export const config = {
+  matcher: ['/admin/:path*'],
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}