From 4abe6d758c756245dcd6519ff26bb80bde367038 Mon Sep 17 00:00:00 2001
From: Claudio <claudio@hubris.network>
Date: Sun, 17 May 2026 22:06:33 +0200
Subject: [PATCH] feat(web): OIDC login button + cookie-based session bootstrap

The SvelteKit /login was username/password only; the legacy comment
even called out 'OIDC SSO ships in M4 when the IdP is wired up'.
Authentik is wired up now, so:

- /api/v1/config exposes ext.oidc when the IdP is configured. Fetch
  it on the login page and conditionally render "Sign in with
  {provider}", which kicks off /api/v1/oidc/login.
- After PhotoPrism completes the auth code exchange, it sets
  `auth_token` + `auth_session` cookies and redirects to siteUrl
  (/library/browse by default; the deployment's reverse proxy is
  expected to bounce that to /). bootstrapSessionFromCookies()
  reads those cookies, calls GET /api/v1/session/<id> with the
  cookie's token, and adopts the resulting session into the SPA
  store on mount.
- Root layout's auth guard now waits for the bootstrap pass before
  punting to /login, so a fresh OIDC return doesn't get redirected
  away before the session is read.
---
 web/src/lib/services/photoprism.ts | 30 +++++++++++++++++++
 web/src/lib/types/photoprism.ts    | 16 ++++++++++
 web/src/routes/+layout.svelte      | 19 ++++++++++--
 web/src/routes/login/+page.svelte  | 47 +++++++++++++++++++++++++++---
 4 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/services/photoprism.ts b/web/src/lib/services/photoprism.ts
index 948ed90..4800ef1 100644
--- a/web/src/lib/services/photoprism.ts
+++ b/web/src/lib/services/photoprism.ts
@@ -67,6 +67,36 @@ export async function fetchSession(id: string): Promise<PpSessionResponse> {
 	return data;
 }
 
+/**
+ * After OIDC completes, PhotoPrism redirects to `siteUrl` with two cookies
+ * set: `auth_token` (the X-Auth-Token value) and `auth_session` (the session
+ * UID). If both are present, fetch the matching session and adopt it so the
+ * SPA picks up the OIDC-issued identity without a username/password trip.
+ *
+ * Returns the adopted session, or null when the cookies are missing or stale
+ * (caller treats null as "stay on /login").
+ */
+export async function bootstrapSessionFromCookies(): Promise<PpSessionResponse | null> {
+	if (!browser) return null;
+	const read = (name: string): string | null => {
+		const m = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]+)'));
+		return m ? decodeURIComponent(m[1]) : null;
+	};
+	const token = read('auth_token');
+	const sid = read('auth_session');
+	if (!token || !sid) return null;
+	// Prime the http client so the X-Auth-Token interceptor fires.
+	session.accessToken = token;
+	try {
+		const resp = await fetchSession(sid);
+		adoptSession(resp);
+		return resp;
+	} catch {
+		session.accessToken = null;
+		return null;
+	}
+}
+
 export async function getConfig(): Promise<PpClientConfig> {
 	const { data } = await http.get<PpClientConfig>('/config');
 	return data;
diff --git a/web/src/lib/types/photoprism.ts b/web/src/lib/types/photoprism.ts
index 6f65625..c30a398 100644
--- a/web/src/lib/types/photoprism.ts
+++ b/web/src/lib/types/photoprism.ts
@@ -55,6 +55,22 @@ export interface PpClientConfig {
 		lenses?: number;
 		countries?: number;
 	};
+	/**
+	 * Optional extensions block. PhotoPrism reports OIDC availability and
+	 * the per-provider login URI here so the SPA can render a "Sign in
+	 * with <provider>" button. Empty (or `enabled:false`) when OIDC isn't
+	 * configured.
+	 */
+	ext?: {
+		oidc?: {
+			enabled: boolean;
+			provider?: string;
+			loginUri?: string;
+			icon?: string;
+			register?: boolean;
+			redirect?: boolean;
+		};
+	};
 }
 
 export interface PpSessionResponse {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index df622a5..086d220 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.css';
+	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
@@ -7,6 +8,7 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from 'svelte-sonner';
 	import { isAuthenticated } from '$lib/stores/session.svelte';
+	import { bootstrapSessionFromCookies } from '$lib/services/photoprism';
 	import { setLeftSidebarWidth, view } from '$lib/stores/view.svelte';
 	import { resizable } from '$lib/actions/resizable';
 	import { queryClient } from '$lib/queryClient';
@@ -16,11 +18,24 @@
 
 	let { children } = $props();
 
+	// Bootstrap state: the OIDC return drops the user back on `/` with
+	// PhotoPrism's auth_token/auth_session cookies set, but the SPA store
+	// is empty. We try to adopt the cookie session on first mount before
+	// the auth guard can punt to /login.
+	let bootstrapped = $state(false);
+
+	onMount(async () => {
+		if (!isAuthenticated()) {
+			await bootstrapSessionFromCookies();
+		}
+		bootstrapped = true;
+	});
+
 	// Auth guard. Anything outside /login requires a session; otherwise
 	// punt to the login page (which itself redirects authenticated users
-	// back to /).
+	// back to /). Held until the cookie bootstrap has had a chance to run.
 	$effect(() => {
-		if (!browser) return;
+		if (!browser || !bootstrapped) return;
 		const onLogin = page.url.pathname === '/login';
 		if (!isAuthenticated() && !onLogin) {
 			void goto('/login', { replaceState: true });
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 2e600aa..ac47544 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
-	import { login } from '$lib/services/photoprism';
+	import { getConfig, login } from '$lib/services/photoprism';
 	import { isAuthenticated } from '$lib/stores/session.svelte';
 
 	let username = $state('');
 	let password = $state('');
 	let submitting = $state(false);
+	// OIDC config probed lazily from /api/v1/config (no auth required).
+	// Empty when OIDC is dormant; populated triggers the SSO button.
+	let oidc = $state<{ provider: string; loginUri: string } | null>(null);
 
 	$effect(() => {
 		if (isAuthenticated()) {
@@ -14,6 +18,18 @@
 		}
 	});
 
+	onMount(async () => {
+		try {
+			const cfg = await getConfig();
+			const ext = cfg.ext?.oidc;
+			if (ext?.enabled && ext.loginUri) {
+				oidc = { provider: ext.provider || 'OIDC', loginUri: ext.loginUri };
+			}
+		} catch {
+			// /config is best-effort — SSO button just stays hidden.
+		}
+	});
+
 	async function onSubmit(e: SubmitEvent) {
 		e.preventDefault();
 		if (submitting) return;
@@ -29,6 +45,14 @@
 			submitting = false;
 		}
 	}
+
+	function onOidcClick() {
+		if (!oidc) return;
+		// Full reload so PhotoPrism handles the redirect + cookie set on
+		// its own; the SPA picks up the resulting session on return via
+		// bootstrapSessionFromCookies in the root layout.
+		window.location.href = oidc.loginUri;
+	}
 </script>
 
 <div class="flex min-h-screen items-center justify-center bg-background p-6">
@@ -71,8 +95,23 @@
 			{submitting ? 'Signing in…' : 'Sign in'}
 		</button>
 
-		<p class="text-xs text-muted-foreground">
-			OIDC SSO ships in M4 when the IdP is wired up.
-		</p>
+		{#if oidc}
+			<div class="relative py-1">
+				<div class="absolute inset-0 flex items-center" aria-hidden="true">
+					<div class="w-full border-t border-border"></div>
+				</div>
+				<div class="relative flex justify-center">
+					<span class="bg-card px-2 text-xs text-muted-foreground">or</span>
+				</div>
+			</div>
+
+			<button
+				type="button"
+				onclick={onOidcClick}
+				class="w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-muted"
+			>
+				Sign in with {oidc.provider}
+			</button>
+		{/if}
 	</form>
 </div>