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.
This commit is contained in:
Claudio
2026-05-17 22:06:33 +02:00
parent cb5bc120dc
commit 4abe6d758c
4 changed files with 106 additions and 6 deletions

View File

@@ -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 });

View File

@@ -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>