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:
@@ -67,6 +67,36 @@ export async function fetchSession(id: string): Promise<PpSessionResponse> {
|
|||||||
return data;
|
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> {
|
export async function getConfig(): Promise<PpClientConfig> {
|
||||||
const { data } = await http.get<PpClientConfig>('/config');
|
const { data } = await http.get<PpClientConfig>('/config');
|
||||||
return data;
|
return data;
|
||||||
|
|||||||
@@ -55,6 +55,22 @@ export interface PpClientConfig {
|
|||||||
lenses?: number;
|
lenses?: number;
|
||||||
countries?: 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 {
|
export interface PpSessionResponse {
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
@@ -7,6 +8,7 @@
|
|||||||
import { ModeWatcher } from 'mode-watcher';
|
import { ModeWatcher } from 'mode-watcher';
|
||||||
import { Toaster } from 'svelte-sonner';
|
import { Toaster } from 'svelte-sonner';
|
||||||
import { isAuthenticated } from '$lib/stores/session.svelte';
|
import { isAuthenticated } from '$lib/stores/session.svelte';
|
||||||
|
import { bootstrapSessionFromCookies } from '$lib/services/photoprism';
|
||||||
import { setLeftSidebarWidth, view } from '$lib/stores/view.svelte';
|
import { setLeftSidebarWidth, view } from '$lib/stores/view.svelte';
|
||||||
import { resizable } from '$lib/actions/resizable';
|
import { resizable } from '$lib/actions/resizable';
|
||||||
import { queryClient } from '$lib/queryClient';
|
import { queryClient } from '$lib/queryClient';
|
||||||
@@ -16,11 +18,24 @@
|
|||||||
|
|
||||||
let { children } = $props();
|
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
|
// Auth guard. Anything outside /login requires a session; otherwise
|
||||||
// punt to the login page (which itself redirects authenticated users
|
// 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(() => {
|
$effect(() => {
|
||||||
if (!browser) return;
|
if (!browser || !bootstrapped) return;
|
||||||
const onLogin = page.url.pathname === '/login';
|
const onLogin = page.url.pathname === '/login';
|
||||||
if (!isAuthenticated() && !onLogin) {
|
if (!isAuthenticated() && !onLogin) {
|
||||||
void goto('/login', { replaceState: true });
|
void goto('/login', { replaceState: true });
|
||||||
|
|||||||
@@ -1,12 +1,16 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { toast } from 'svelte-sonner';
|
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';
|
import { isAuthenticated } from '$lib/stores/session.svelte';
|
||||||
|
|
||||||
let username = $state('');
|
let username = $state('');
|
||||||
let password = $state('');
|
let password = $state('');
|
||||||
let submitting = $state(false);
|
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(() => {
|
$effect(() => {
|
||||||
if (isAuthenticated()) {
|
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) {
|
async function onSubmit(e: SubmitEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (submitting) return;
|
if (submitting) return;
|
||||||
@@ -29,6 +45,14 @@
|
|||||||
submitting = false;
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="flex min-h-screen items-center justify-center bg-background p-6">
|
<div class="flex min-h-screen items-center justify-center bg-background p-6">
|
||||||
@@ -71,8 +95,23 @@
|
|||||||
{submitting ? 'Signing in…' : 'Sign in'}
|
{submitting ? 'Signing in…' : 'Sign in'}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p class="text-xs text-muted-foreground">
|
{#if oidc}
|
||||||
OIDC SSO ships in M4 when the IdP is wired up.
|
<div class="relative py-1">
|
||||||
</p>
|
<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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user