diff --git a/Dockerfile b/Dockerfile index febfe46..34f5de9 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,7 +9,15 @@ RUN npm run build FROM nginx:1.27-alpine AS runtime COPY docker/nginx.conf /etc/nginx/conf.d/default.conf +COPY docker/entrypoint.sh /docker-entrypoint-fabric.sh COPY --from=build /app/dist /usr/share/nginx/html +RUN chmod +x /docker-entrypoint-fabric.sh + +# Runtime SPA config (see docker/entrypoint.sh). Override at `docker run` +# / compose: empty values keep prior behavior. +ENV FABRIC_OIDC_ONLY="" +ENV FIX_TO_CENTER="" EXPOSE 80 +ENTRYPOINT ["/docker-entrypoint-fabric.sh"] CMD ["nginx", "-g", "daemon off;"] diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh new file mode 100644 index 0000000..42441ea --- /dev/null +++ b/docker/entrypoint.sh @@ -0,0 +1,20 @@ +#!/bin/sh +set -e + +# Inject container env into the static SPA at runtime. The app loads +# /runtime-env.js (see index.html) before its bundle. +# FABRIC_OIDC_ONLY - "true" hides the username/password login form +# FIX_TO_CENTER - non-empty pins the Center API base + hides its input +ONLY="false" +case "$(printf '%s' "${FABRIC_OIDC_ONLY:-}" | tr '[:upper:]' '[:lower:]')" in + 1|true|yes|on) ONLY="true" ;; +esac + +# JSON-escape FIX_TO_CENTER (backslash + double-quote) +FIX="$(printf '%s' "${FIX_TO_CENTER:-}" | sed 's/\\/\\\\/g; s/"/\\"/g')" + +cat > /usr/share/nginx/html/runtime-env.js <
+ + diff --git a/src/App.tsx b/src/App.tsx index 4a55c25..df1e211 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import ProtectedRoute from './auth/ProtectedRoute' import AppLayout from './layouts/AppLayout' import ChatPage from './pages/ChatPage' import LoginPage from './pages/LoginPage' +import OidcCallback from './pages/OidcCallback' export default function App() { return ( @@ -26,6 +27,7 @@ export default function App() { } /> } /> + } /> } /> diff --git a/src/auth/AuthContext.tsx b/src/auth/AuthContext.tsx index 62f8e93..1133b38 100644 --- a/src/auth/AuthContext.tsx +++ b/src/auth/AuthContext.tsx @@ -18,6 +18,11 @@ export function AuthProvider({ children }: PropsWithChildren) { setAuthSession(next) setSession(next) }, + // Adopt a session obtained out-of-band (OIDC ticket exchange). + adoptSession: (next: AuthSession) => { + setAuthSession(next) + setSession(next) + }, logout: async () => { if (session?.refreshToken) { try { diff --git a/src/auth/auth-context.ts b/src/auth/auth-context.ts index 5fe4e96..086b3de 100644 --- a/src/auth/auth-context.ts +++ b/src/auth/auth-context.ts @@ -5,6 +5,7 @@ export type AuthContextValue = { session: AuthSession | null isAuthed: boolean login: (centerApiBase: string, email: string, password: string) => Promise + adoptSession: (session: AuthSession) => void logout: () => Promise ensureFreshToken: () => Promise refreshGuilds: () => Promise diff --git a/src/index.css b/src/index.css index 2f5c897..694aba7 100644 --- a/src/index.css +++ b/src/index.css @@ -215,6 +215,14 @@ button { width: auto; margin-bottom: 18px; } +.login-or { + text-align: center; + color: var(--text-faint); + font-size: 11px; + letter-spacing: 0.18em; + text-transform: uppercase; + margin: 14px 0; +} .login-card h1 { font-size: 24px; margin-bottom: 4px; diff --git a/src/lib/center-auth-client.ts b/src/lib/center-auth-client.ts index caab17c..e5c7405 100644 --- a/src/lib/center-auth-client.ts +++ b/src/lib/center-auth-client.ts @@ -82,6 +82,20 @@ export async function guildMembersCenter( return Array.isArray(res.data) ? res.data : [] } +export async function oidcStatusCenter(centerApiBase: string): Promise<{ enabled: boolean }> { + try { + const res = await centerClient(centerApiBase).get<{ enabled: boolean }>('/auth/oidc/status') + return { enabled: !!res.data?.enabled } + } catch { + return { enabled: false } + } +} + +export async function oidcExchangeCenter(centerApiBase: string, ticket: string): Promise { + const res = await centerClient(centerApiBase).post('/auth/oidc/exchange', { ticket }) + return { ...res.data, centerApiBase } +} + export async function updateMeNameCenter( centerApiBase: string, accessToken: string, diff --git a/src/lib/runtime-env.ts b/src/lib/runtime-env.ts new file mode 100644 index 0000000..6bc057f --- /dev/null +++ b/src/lib/runtime-env.ts @@ -0,0 +1,37 @@ +// Runtime (container) env, injected by the Docker entrypoint into +// /runtime-env.js as window.__FABRIC_ENV__ (NOT build-time). Empty/unset +// keeps the prior behavior. +type FabricEnv = { oidcOnly?: boolean; fixToCenter?: string } + +const env: FabricEnv = + (typeof window !== 'undefined' && (window as unknown as { __FABRIC_ENV__?: FabricEnv }).__FABRIC_ENV__) || {} + +// FABRIC_OIDC_ONLY: hide the username/password form (SSO is the only login). +export const OIDC_ONLY = env.oidcOnly === true + +// FIX_TO_CENTER: when non-empty, the Center API base is pinned to this and +// the login page no longer shows the "Center API Base" input. +export const FIXED_CENTER = (env.fixToCenter ?? '').trim() + +export const DEFAULT_CENTER = 'http://localhost:7001/api' + +// Where OIDC exchange should call back to. FIX_TO_CENTER wins; otherwise +// the value the user used to start SSO (persisted before redirect). +const OIDC_CENTER_KEY = 'fabric.oidc.center.v1' +export function rememberOidcCenter(base: string): void { + try { + localStorage.setItem(OIDC_CENTER_KEY, base) + } catch { + // ignore + } +} +export function resolveCenterBase(): string { + if (FIXED_CENTER) return FIXED_CENTER + try { + const v = localStorage.getItem(OIDC_CENTER_KEY) + if (v) return v + } catch { + // ignore + } + return DEFAULT_CENTER +} diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index e77013b..5ae99b0 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -1,16 +1,29 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import type { FormEvent } from 'react' import { useNavigate } from 'react-router-dom' import { useAuth } from '../auth/auth-context' import { APP_NAME, LOGO_URL } from '../lib/brand' +import { OIDC_ONLY, FIXED_CENTER, DEFAULT_CENTER, rememberOidcCenter } from '../lib/runtime-env' +import { oidcStatusCenter } from '../lib/center-auth-client' export default function LoginPage() { const navigate = useNavigate() const { login, isAuthed, session } = useAuth() - const [centerApiBase, setCenterApiBase] = useState('http://localhost:7001/api') + const [centerApiBase, setCenterApiBase] = useState(FIXED_CENTER || DEFAULT_CENTER) const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [error, setError] = useState('') + const [oidcEnabled, setOidcEnabled] = useState(false) + + useEffect(() => { + let alive = true + oidcStatusCenter(centerApiBase.trim()).then((s) => { + if (alive) setOidcEnabled(s.enabled) + }) + return () => { + alive = false + } + }, [centerApiBase]) async function onSubmit(e: FormEvent) { e.preventDefault() @@ -23,6 +36,15 @@ export default function LoginPage() { } } + function startOidc() { + const base = centerApiBase.trim().replace(/\/$/, '') + rememberOidcCenter(base) + window.location.href = `${base}/auth/oidc/start` + } + + const showPasswordForm = !OIDC_ONLY + const showCenterInput = !FIXED_CENTER + return (
@@ -35,7 +57,8 @@ export default function LoginPage() {

{isAuthed ? `Signed in as ${session?.user.email}` : `Sign in to continue to ${APP_NAME}`}

-
+ + {showCenterInput ? (
-
- - setEmail(e.target.value)} - placeholder="you@example.com" - type="email" - /> -
-
- - setPassword(e.target.value)} - placeholder="••••••••" - type="password" - /> -
- {error ?

{error}

: null} - -
+ ) : null} + + {oidcEnabled ? ( + + ) : null} + + {OIDC_ONLY && !oidcEnabled ? ( +

+ SSO is not configured on this Center yet. +

+ ) : null} + + {showPasswordForm ? ( + <> + {oidcEnabled ?
or
: null} +
+
+ + setEmail(e.target.value)} + placeholder="you@example.com" + type="email" + /> +
+
+ + setPassword(e.target.value)} + placeholder="••••••••" + type="password" + /> +
+ {error ?

{error}

: null} + +
+ + ) : error ? ( +

{error}

+ ) : null}
) diff --git a/src/pages/OidcCallback.tsx b/src/pages/OidcCallback.tsx new file mode 100644 index 0000000..43c9606 --- /dev/null +++ b/src/pages/OidcCallback.tsx @@ -0,0 +1,66 @@ +import { useEffect, useRef, useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { useAuth } from '../auth/auth-context' +import { APP_NAME } from '../lib/brand' +import { resolveCenterBase } from '../lib/runtime-env' +import { oidcExchangeCenter } from '../lib/center-auth-client' + +// Landing route for the OIDC redirect: Center bounces the browser here +// with #oidc_ticket=... (or #oidc_error=...). We redeem the one-time +// ticket for a full session and adopt it. +export default function OidcCallback() { + const navigate = useNavigate() + const { adoptSession } = useAuth() + const [error, setError] = useState('') + const ran = useRef(false) + + useEffect(() => { + if (ran.current) return + ran.current = true + + const hash = window.location.hash.replace(/^#/, '') + const params = new URLSearchParams(hash) + const ticket = params.get('oidc_ticket') + const errParam = params.get('oidc_error') + // scrub the fragment so the ticket isn't left in the URL/history + window.history.replaceState(null, '', window.location.pathname) + + if (errParam) { + setError(decodeURIComponent(errParam)) + return + } + if (!ticket) { + setError('Missing OIDC ticket.') + return + } + + oidcExchangeCenter(resolveCenterBase(), ticket) + .then((next) => { + adoptSession(next) + navigate('/workspace', { replace: true }) + }) + .catch(() => setError('SSO sign-in failed. The ticket may have expired — please try again.')) + }, [adoptSession, navigate]) + + return ( +
+
+
{APP_NAME}
+ {error ? ( + <> +

Sign-in failed

+

{error}

+ + + ) : ( + <> +

Signing you in…

+

Completing SSO authentication.

+ + )} +
+
+ ) +}