From e691a6ecccbeceafdcbe6f7f598c5f7cbc12b243 Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 08:51:50 +0200
Subject: [PATCH 01/15] feat(app): design the guest auth screens for Ory Kratos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Twenty-one screens covering the guest path, email one-time-code login,
registration and verification, recovery, account settings and the error
states — built as real components rather than pictures of them, so the
wiring pass replaces prop values with flow data instead of markup.

A dev-only canvas at /design/auth renders every screen and state in both
themes side by side. It ships in no build.

authCopy.ts holds the English default for each string keyed by the i18n
key it will use, and useAuthCopy() prefers a translation when the
language docs carry one, so the screens read correctly before any key
exists.

docs/temp_kratos-guest-auth-ui.md records what "guest" means here (no
Kratos session — the API already serves anonymous callers), why the
pages belong in the PWA rather than a standalone self-service UI, and
the screen-to-flow mapping.
---
 .../auth/kratos/AccountSettingsScreen.vue     | 163 +++++++
 .../components/auth/kratos/AuthCodeInput.vue  |  85 ++++
 .../components/auth/kratos/AuthDoneScreen.vue |  33 ++
 .../auth/kratos/AuthErrorScreen.vue           |  76 ++++
 .../components/auth/kratos/AuthMessage.vue    |  37 ++
 app/src/components/auth/kratos/AuthShell.vue  |  57 +++
 .../components/auth/kratos/AuthTextField.vue  |  63 +++
 .../auth/kratos/EmailIdentifierScreen.vue     |  65 +++
 .../components/auth/kratos/GuestGateCard.vue  |  45 ++
 .../auth/kratos/GuestUpgradeScreen.vue        |  61 +++
 .../auth/kratos/GuestWelcomeScreen.vue        |  49 +++
 .../auth/kratos/OneTimeCodeScreen.vue         |  99 +++++
 .../auth/kratos/RegistrationScreen.vue        |  88 ++++
 .../auth/kratos/SignInMethodsScreen.vue       | 120 +++++
 app/src/components/auth/kratos/authCopy.ts    | 101 +++++
 .../components/auth/kratos/screens.spec.ts    |  89 ++++
 app/src/components/auth/kratos/types.ts       |  11 +
 app/src/components/auth/kratos/useAuthCopy.ts |  23 +
 app/src/pages/design/AuthArtboard.vue         |  32 ++
 app/src/pages/design/AuthDesignPage.spec.ts   |  21 +
 app/src/pages/design/AuthDesignPage.vue       | 412 ++++++++++++++++++
 app/src/router/routes.ts                      |  19 +
 docs/temp_kratos-guest-auth-ui.md             | 111 +++++
 23 files changed, 1860 insertions(+)
 create mode 100644 app/src/components/auth/kratos/AccountSettingsScreen.vue
 create mode 100644 app/src/components/auth/kratos/AuthCodeInput.vue
 create mode 100644 app/src/components/auth/kratos/AuthDoneScreen.vue
 create mode 100644 app/src/components/auth/kratos/AuthErrorScreen.vue
 create mode 100644 app/src/components/auth/kratos/AuthMessage.vue
 create mode 100644 app/src/components/auth/kratos/AuthShell.vue
 create mode 100644 app/src/components/auth/kratos/AuthTextField.vue
 create mode 100644 app/src/components/auth/kratos/EmailIdentifierScreen.vue
 create mode 100644 app/src/components/auth/kratos/GuestGateCard.vue
 create mode 100644 app/src/components/auth/kratos/GuestUpgradeScreen.vue
 create mode 100644 app/src/components/auth/kratos/GuestWelcomeScreen.vue
 create mode 100644 app/src/components/auth/kratos/OneTimeCodeScreen.vue
 create mode 100644 app/src/components/auth/kratos/RegistrationScreen.vue
 create mode 100644 app/src/components/auth/kratos/SignInMethodsScreen.vue
 create mode 100644 app/src/components/auth/kratos/authCopy.ts
 create mode 100644 app/src/components/auth/kratos/screens.spec.ts
 create mode 100644 app/src/components/auth/kratos/types.ts
 create mode 100644 app/src/components/auth/kratos/useAuthCopy.ts
 create mode 100644 app/src/pages/design/AuthArtboard.vue
 create mode 100644 app/src/pages/design/AuthDesignPage.spec.ts
 create mode 100644 app/src/pages/design/AuthDesignPage.vue
 create mode 100644 docs/temp_kratos-guest-auth-ui.md

diff --git a/app/src/components/auth/kratos/AccountSettingsScreen.vue b/app/src/components/auth/kratos/AccountSettingsScreen.vue
new file mode 100644
index 0000000000..44971f013d
--- /dev/null
+++ b/app/src/components/auth/kratos/AccountSettingsScreen.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import {
+    CheckBadgeIcon,
+    ComputerDesktopIcon,
+    DevicePhoneMobileIcon,
+} from "@heroicons/vue/24/outline";
+import LButton from "@/components/button/LButton.vue";
+import { useAuthCopy } from "./useAuthCopy";
+import type { AuthProviderOption } from "./types";
+
+export type LinkedMethod = AuthProviderOption & { linked: boolean };
+export type ActiveSession = {
+    id: string;
+    device: string;
+    location?: string;
+    lastSeen: string;
+    current?: boolean;
+};
+
+type Props = {
+    email: string;
+    emailVerified?: boolean;
+    methods?: LinkedMethod[];
+    sessions?: ActiveSession[];
+};
+withDefaults(defineProps<Props>(), {
+    emailVerified: true,
+    methods: () => [],
+    sessions: () => [],
+});
+defineEmits<{
+    changeEmail: [];
+    toggleMethod: [id: string];
+    signOutOthers: [];
+    deleteAccount: [];
+}>();
+
+const c = useAuthCopy();
+</script>
+
+<template>
+    <div class="flex w-full max-w-md flex-col gap-4">
+        <h1 class="text-xl font-semibold text-zinc-900 dark:text-slate-100">
+            {{ c("auth.settings.title") }}
+        </h1>
+
+        <section
+            class="rounded-lg border border-zinc-100 bg-white p-4 shadow dark:border-slate-800 dark:bg-slate-800"
+        >
+            <h2 class="text-sm font-semibold text-zinc-500 dark:text-slate-400">
+                {{ c("auth.settings.email_section") }}
+            </h2>
+            <div class="mt-3 flex items-center justify-between gap-3">
+                <div class="flex min-w-0 items-center gap-2">
+                    <span class="truncate text-[15px] text-zinc-900 dark:text-slate-100">
+                        {{ email }}
+                    </span>
+                    <CheckBadgeIcon
+                        v-if="emailVerified"
+                        class="h-5 w-5 shrink-0 text-green-600 dark:text-green-400"
+                    />
+                </div>
+                <LButton
+                    variant="secondary"
+                    size="sm"
+                    @click="$emit('changeEmail')"
+                >
+                    {{ c("auth.settings.change") }}
+                </LButton>
+            </div>
+        </section>
+
+        <section
+            v-if="methods.length"
+            class="rounded-lg border border-zinc-100 bg-white p-4 shadow dark:border-slate-800 dark:bg-slate-800"
+        >
+            <h2 class="text-sm font-semibold text-zinc-500 dark:text-slate-400">
+                {{ c("auth.settings.methods_section") }}
+            </h2>
+            <ul class="mt-2 divide-y divide-zinc-100 dark:divide-slate-700">
+                <li
+                    v-for="method in methods"
+                    :key="method.id"
+                    class="flex items-center justify-between gap-3 py-3"
+                >
+                    <div class="flex min-w-0 items-center gap-2.5">
+                        <img
+                            v-if="method.iconUrl"
+                            :src="method.iconUrl"
+                            alt=""
+                            class="size-5 shrink-0"
+                        />
+                        <span class="truncate text-[15px] text-zinc-800 dark:text-slate-100">
+                            {{ method.label }}
+                        </span>
+                    </div>
+                    <LButton
+                        :variant="method.linked ? 'tertiary' : 'secondary'"
+                        size="sm"
+                        @click="$emit('toggleMethod', method.id)"
+                    >
+                        {{ method.linked ? c("auth.settings.unlink") : c("auth.settings.link") }}
+                    </LButton>
+                </li>
+            </ul>
+        </section>
+
+        <section
+            v-if="sessions.length"
+            class="rounded-lg border border-zinc-100 bg-white p-4 shadow dark:border-slate-800 dark:bg-slate-800"
+        >
+            <h2 class="text-sm font-semibold text-zinc-500 dark:text-slate-400">
+                {{ c("auth.settings.sessions_section") }}
+            </h2>
+            <ul class="mt-2 divide-y divide-zinc-100 dark:divide-slate-700">
+                <li
+                    v-for="session in sessions"
+                    :key="session.id"
+                    class="flex items-center gap-3 py-3"
+                >
+                    <component
+                        :is="
+                            session.device.includes('iPhone') || session.device.includes('Android')
+                                ? DevicePhoneMobileIcon
+                                : ComputerDesktopIcon
+                        "
+                        class="h-5 w-5 shrink-0 text-zinc-400 dark:text-slate-400"
+                    />
+                    <div class="flex min-w-0 flex-col">
+                        <span class="truncate text-[15px] text-zinc-800 dark:text-slate-100">
+                            {{ session.device }}
+                            <span
+                                v-if="session.current"
+                                class="ml-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 dark:bg-green-500/15 dark:text-green-300"
+                            >
+                                {{ c("auth.settings.this_device") }}
+                            </span>
+                        </span>
+                        <span class="truncate text-sm text-zinc-500 dark:text-slate-400">
+                            {{ [session.location, session.lastSeen].filter(Boolean).join(" · ") }}
+                        </span>
+                    </div>
+                </li>
+            </ul>
+            <LButton
+                variant="secondary"
+                size="sm"
+                class="mt-3 w-full"
+                @click="$emit('signOutOthers')"
+            >
+                {{ c("auth.settings.sign_out_others") }}
+            </LButton>
+        </section>
+
+        <button
+            type="button"
+            class="self-start text-sm text-red-600 underline underline-offset-2 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+            @click="$emit('deleteAccount')"
+        >
+            {{ c("auth.settings.delete") }}
+        </button>
+    </div>
+</template>
diff --git a/app/src/components/auth/kratos/AuthCodeInput.vue b/app/src/components/auth/kratos/AuthCodeInput.vue
new file mode 100644
index 0000000000..3863807d79
--- /dev/null
+++ b/app/src/components/auth/kratos/AuthCodeInput.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+type Props = {
+    label: string;
+    modelValue?: string;
+    length?: number;
+    error?: boolean;
+    disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), { length: 6, error: false, disabled: false });
+const emit = defineEmits<{ "update:modelValue": [value: string]; complete: [value: string] }>();
+
+const boxes = ref<HTMLInputElement[]>([]);
+const digits = computed(() =>
+    Array.from({ length: props.length }, (_, i) => props.modelValue?.[i] ?? ""),
+);
+
+function write(next: string) {
+    const cleaned = next.replace(/\D/g, "").slice(0, props.length);
+    emit("update:modelValue", cleaned);
+    if (cleaned.length === props.length) emit("complete", cleaned);
+    return cleaned;
+}
+
+function onInput(index: number, event: Event) {
+    const target = event.target as HTMLInputElement;
+    const typed = target.value.replace(/\D/g, "");
+    target.value = "";
+    if (!typed) return;
+
+    const current = props.modelValue ?? "";
+    const next = write(current.slice(0, index) + typed + current.slice(index + typed.length));
+    boxes.value[Math.min(next.length, props.length - 1)]?.focus();
+}
+
+function onKeydown(index: number, event: KeyboardEvent) {
+    if (event.key !== "Backspace") return;
+    event.preventDefault();
+    const current = props.modelValue ?? "";
+    // Backspace on an empty box clears the one before it, which is where the caret looks to be.
+    const target = current[index] ? index : index - 1;
+    if (target < 0) return;
+    write(current.slice(0, target) + current.slice(target + 1));
+    boxes.value[target]?.focus();
+}
+
+function onPaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const next = write(event.clipboardData?.getData("text") ?? "");
+    boxes.value[Math.min(next.length, props.length - 1)]?.focus();
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-1.5">
+        <span class="text-sm font-medium text-zinc-700 dark:text-slate-200">{{ label }}</span>
+        <div
+            class="flex gap-2"
+            role="group"
+            :aria-label="label"
+        >
+            <input
+                v-for="(digit, index) in digits"
+                :key="index"
+                :ref="(el) => (boxes[index] = el as HTMLInputElement)"
+                :value="digit"
+                :disabled="disabled"
+                inputmode="numeric"
+                autocomplete="one-time-code"
+                maxlength="1"
+                class="h-14 w-full min-w-0 rounded-md border bg-white text-center text-xl font-semibold tabular-nums text-zinc-900 shadow-sm focus:outline-none focus:ring-2 disabled:bg-zinc-100 dark:bg-slate-700 dark:text-slate-100 dark:disabled:bg-slate-800"
+                :class="
+                    error
+                        ? 'border-red-400 focus:border-red-500 focus:ring-red-500/40 dark:border-red-500/70'
+                        : 'border-zinc-300 focus:border-yellow-500 focus:ring-yellow-500/40 dark:border-slate-600'
+                "
+                @input="onInput(index, $event)"
+                @keydown="onKeydown(index, $event)"
+                @paste="onPaste"
+            />
+        </div>
+    </div>
+</template>
diff --git a/app/src/components/auth/kratos/AuthDoneScreen.vue b/app/src/components/auth/kratos/AuthDoneScreen.vue
new file mode 100644
index 0000000000..1011c0fa9b
--- /dev/null
+++ b/app/src/components/auth/kratos/AuthDoneScreen.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { CheckCircleIcon } from "@heroicons/vue/24/solid";
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import { useAuthCopy } from "./useAuthCopy";
+
+defineEmits<{ continue: [] }>();
+const c = useAuthCopy();
+</script>
+
+<template>
+    <AuthShell
+        :title="c('auth.verify.done_title')"
+        :subtitle="c('auth.verify.done_subtitle')"
+    >
+        <template #brand>
+            <span
+                class="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-500/15"
+            >
+                <CheckCircleIcon class="h-7 w-7 text-green-600 dark:text-green-400" />
+            </span>
+        </template>
+
+        <LButton
+            variant="primary"
+            size="xl"
+            class="w-full"
+            @click="$emit('continue')"
+        >
+            {{ c("auth.verify.done_continue") }}
+        </LButton>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/AuthErrorScreen.vue b/app/src/components/auth/kratos/AuthErrorScreen.vue
new file mode 100644
index 0000000000..d6fe973dc1
--- /dev/null
+++ b/app/src/components/auth/kratos/AuthErrorScreen.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ClockIcon, ExclamationTriangleIcon, SignalSlashIcon } from "@heroicons/vue/24/outline";
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import { useAuthCopy } from "./useAuthCopy";
+
+type Props = {
+    /** `expired` is the flow-expiry case Kratos returns most often; `offline` never reaches Kratos at all. */
+    kind?: "generic" | "expired" | "offline";
+    detail?: string;
+    /** Kratos error id, so a user can quote it to support without us logging their address. */
+    errorId?: string;
+};
+const props = withDefaults(defineProps<Props>(), { kind: "generic" });
+defineEmits<{ restart: []; back: [] }>();
+
+const c = useAuthCopy();
+const icons = { generic: ExclamationTriangleIcon, expired: ClockIcon, offline: SignalSlashIcon };
+const title = () =>
+    props.kind === "expired"
+        ? c("auth.error.expired_title")
+        : props.kind === "offline"
+          ? c("auth.error.offline_title")
+          : c("auth.error.title");
+const body = () =>
+    props.kind === "expired"
+        ? c("auth.error.expired_body")
+        : props.kind === "offline"
+          ? c("auth.error.offline_body")
+          : props.detail;
+</script>
+
+<template>
+    <AuthShell
+        :title="title()"
+        :subtitle="body()"
+    >
+        <template #brand>
+            <span
+                class="flex size-12 items-center justify-center rounded-full bg-zinc-100 dark:bg-slate-700"
+            >
+                <component
+                    :is="icons[props.kind]"
+                    class="h-6 w-6 text-zinc-500 dark:text-slate-300"
+                />
+            </span>
+        </template>
+
+        <LButton
+            v-if="kind !== 'offline'"
+            variant="primary"
+            size="xl"
+            class="w-full"
+            @click="$emit('restart')"
+        >
+            {{ c("auth.error.restart") }}
+        </LButton>
+        <LButton
+            variant="secondary"
+            size="xl"
+            class="w-full"
+            @click="$emit('back')"
+        >
+            {{ c("auth.error.back") }}
+        </LButton>
+
+        <template
+            v-if="errorId"
+            #footer
+        >
+            <p class="text-center text-xs tabular-nums text-zinc-400 dark:text-slate-500">
+                {{ c("auth.error.reference", { id: errorId }) }}
+            </p>
+        </template>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/AuthMessage.vue b/app/src/components/auth/kratos/AuthMessage.vue
new file mode 100644
index 0000000000..7d60617628
--- /dev/null
+++ b/app/src/components/auth/kratos/AuthMessage.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+    CheckCircleIcon,
+    ExclamationTriangleIcon,
+    InformationCircleIcon,
+} from "@heroicons/vue/24/outline";
+
+/** Mirrors Kratos `ui.messages[].type`, so a flow's messages render without translation at the call site. */
+type Props = { type?: "info" | "error" | "success"; text: string };
+const props = withDefaults(defineProps<Props>(), { type: "info" });
+
+const styles = {
+    info: "border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-slate-600 dark:bg-slate-700/60 dark:text-slate-200",
+    error: "border-red-200 bg-red-50 text-red-800 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-200",
+    success:
+        "border-green-200 bg-green-50 text-green-800 dark:border-green-500/40 dark:bg-green-500/10 dark:text-green-200",
+};
+const icons = {
+    info: InformationCircleIcon,
+    error: ExclamationTriangleIcon,
+    success: CheckCircleIcon,
+};
+</script>
+
+<template>
+    <div
+        class="flex items-start gap-2.5 rounded-md border px-3 py-2.5 text-sm"
+        :class="styles[props.type]"
+        :role="props.type === 'error' ? 'alert' : 'status'"
+    >
+        <component
+            :is="icons[props.type]"
+            class="mt-0.5 h-5 w-5 shrink-0"
+        />
+        <span>{{ text }}</span>
+    </div>
+</template>
diff --git a/app/src/components/auth/kratos/AuthShell.vue b/app/src/components/auth/kratos/AuthShell.vue
new file mode 100644
index 0000000000..cd60797270
--- /dev/null
+++ b/app/src/components/auth/kratos/AuthShell.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ArrowLeftIcon } from "@heroicons/vue/24/outline";
+import { useAuthCopy } from "./useAuthCopy";
+
+type Props = {
+    title: string;
+    subtitle?: string;
+    /** Shows the back affordance; the parent decides what going back means. */
+    canGoBack?: boolean;
+};
+withDefaults(defineProps<Props>(), { canGoBack: false });
+defineEmits<{ back: [] }>();
+
+const c = useAuthCopy();
+</script>
+
+<template>
+    <div
+        class="w-full max-w-md rounded-lg border border-zinc-100 bg-white p-6 shadow dark:border-slate-800 dark:bg-slate-800"
+    >
+        <button
+            v-if="canGoBack"
+            type="button"
+            class="-ml-1.5 mb-3 inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100"
+            @click="$emit('back')"
+        >
+            <ArrowLeftIcon class="h-4 w-4" />
+            {{ c("auth.common.back") }}
+        </button>
+
+        <div
+            v-if="$slots.brand"
+            class="mb-5"
+        >
+            <slot name="brand" />
+        </div>
+
+        <h1 class="text-xl font-semibold text-zinc-900 dark:text-slate-100">{{ title }}</h1>
+        <p
+            v-if="subtitle"
+            class="mt-1.5 text-sm leading-relaxed text-zinc-500 dark:text-slate-400"
+        >
+            {{ subtitle }}
+        </p>
+
+        <div class="mt-6 flex flex-col gap-4">
+            <slot />
+        </div>
+
+        <div
+            v-if="$slots.footer"
+            class="mt-6 border-t border-zinc-100 pt-4 dark:border-slate-700"
+        >
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
diff --git a/app/src/components/auth/kratos/AuthTextField.vue b/app/src/components/auth/kratos/AuthTextField.vue
new file mode 100644
index 0000000000..0b4c4eabcc
--- /dev/null
+++ b/app/src/components/auth/kratos/AuthTextField.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+type Props = {
+    label: string;
+    modelValue?: string;
+    type?: "text" | "email";
+    placeholder?: string;
+    error?: string;
+    hint?: string;
+    autocomplete?: string;
+    disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), { type: "text", disabled: false });
+defineEmits<{ "update:modelValue": [value: string] }>();
+
+const id = useId();
+const describedBy = computed(() =>
+    props.error ? `${id}-error` : props.hint ? `${id}-hint` : undefined,
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-1.5">
+        <label
+            :for="id"
+            class="text-sm font-medium text-zinc-700 dark:text-slate-200"
+            >{{ label }}</label
+        >
+        <input
+            :id="id"
+            :type="type"
+            :value="modelValue"
+            :placeholder="placeholder"
+            :autocomplete="autocomplete"
+            :disabled="disabled"
+            :aria-invalid="error ? true : undefined"
+            :aria-describedby="describedBy"
+            class="w-full rounded-md border bg-white px-3 py-2.5 text-base text-zinc-900 placeholder-zinc-400 shadow-sm focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500 dark:bg-slate-700 dark:text-slate-100 dark:placeholder-slate-400 dark:disabled:bg-slate-800"
+            :class="
+                error
+                    ? 'border-red-400 focus:border-red-500 focus:ring-red-500/40 dark:border-red-500/70'
+                    : 'border-zinc-300 focus:border-yellow-500 focus:ring-yellow-500/40 dark:border-slate-600'
+            "
+            @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        />
+        <p
+            v-if="error"
+            :id="`${id}-error`"
+            class="text-sm text-red-600 dark:text-red-400"
+        >
+            {{ error }}
+        </p>
+        <p
+            v-else-if="hint"
+            :id="`${id}-hint`"
+            class="text-sm text-zinc-500 dark:text-slate-400"
+        >
+            {{ hint }}
+        </p>
+    </div>
+</template>
diff --git a/app/src/components/auth/kratos/EmailIdentifierScreen.vue b/app/src/components/auth/kratos/EmailIdentifierScreen.vue
new file mode 100644
index 0000000000..cb7355d90f
--- /dev/null
+++ b/app/src/components/auth/kratos/EmailIdentifierScreen.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import AuthTextField from "./AuthTextField.vue";
+import AuthMessage from "./AuthMessage.vue";
+import { useAuthCopy } from "./useAuthCopy";
+import type { AuthMessageType } from "./types";
+
+type Props = {
+    modelValue?: string;
+    error?: string;
+    message?: { type: AuthMessageType; text: string };
+    busy?: boolean;
+    /** Registration reuses this screen with its own heading and submit label. */
+    mode?: "login" | "recovery";
+};
+const props = withDefaults(defineProps<Props>(), { busy: false, mode: "login" });
+defineEmits<{ "update:modelValue": [value: string]; submit: []; back: [] }>();
+
+const c = useAuthCopy();
+const title = () => (props.mode === "recovery" ? c("auth.recovery.title") : c("auth.email.title"));
+const subtitle = () =>
+    props.mode === "recovery" ? c("auth.recovery.subtitle") : c("auth.email.subtitle");
+const submitLabel = () =>
+    props.mode === "recovery" ? c("auth.recovery.submit") : c("auth.email.submit");
+</script>
+
+<template>
+    <AuthShell
+        :title="title()"
+        :subtitle="subtitle()"
+        can-go-back
+        @back="$emit('back')"
+    >
+        <AuthMessage
+            v-if="message"
+            :type="message.type"
+            :text="message.text"
+        />
+
+        <form
+            class="flex flex-col gap-4"
+            @submit.prevent="$emit('submit')"
+        >
+            <AuthTextField
+                :label="c('auth.email.label')"
+                :placeholder="c('auth.email.placeholder')"
+                :model-value="modelValue"
+                :error="error"
+                type="email"
+                autocomplete="email"
+                :disabled="busy"
+                @update:model-value="$emit('update:modelValue', $event)"
+            />
+            <LButton
+                variant="primary"
+                size="xl"
+                :disabled="busy"
+                class="w-full"
+            >
+                {{ submitLabel() }}
+            </LButton>
+        </form>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/GuestGateCard.vue b/app/src/components/auth/kratos/GuestGateCard.vue
new file mode 100644
index 0000000000..00b5575952
--- /dev/null
+++ b/app/src/components/auth/kratos/GuestGateCard.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { BookmarkIcon } from "@heroicons/vue/24/outline";
+import LButton from "@/components/button/LButton.vue";
+import { useAuthCopy } from "./useAuthCopy";
+
+defineEmits<{ signIn: []; dismiss: [] }>();
+const c = useAuthCopy();
+</script>
+
+<template>
+    <!-- Shown in place, where the guest hit the limit — not as a modal that interrupts reading. -->
+    <div
+        class="flex w-full max-w-md items-start gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-slate-700 dark:bg-slate-800"
+    >
+        <span
+            class="flex size-9 shrink-0 items-center justify-center rounded-md bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
+        >
+            <BookmarkIcon class="h-5 w-5" />
+        </span>
+        <div class="flex min-w-0 flex-col gap-2">
+            <p class="text-sm font-semibold text-zinc-900 dark:text-slate-100">
+                {{ c("auth.gate.bookmarks_title") }}
+            </p>
+            <p class="text-sm leading-relaxed text-zinc-500 dark:text-slate-400">
+                {{ c("auth.gate.bookmarks_body") }}
+            </p>
+            <div class="mt-1 flex items-center gap-2">
+                <LButton
+                    variant="primary"
+                    size="sm"
+                    @click="$emit('signIn')"
+                >
+                    {{ c("auth.gate.sign_in") }}
+                </LButton>
+                <LButton
+                    variant="tertiary"
+                    size="sm"
+                    @click="$emit('dismiss')"
+                >
+                    {{ c("auth.gate.dismiss") }}
+                </LButton>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/app/src/components/auth/kratos/GuestUpgradeScreen.vue b/app/src/components/auth/kratos/GuestUpgradeScreen.vue
new file mode 100644
index 0000000000..82885036e0
--- /dev/null
+++ b/app/src/components/auth/kratos/GuestUpgradeScreen.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { BookmarkIcon, ChartBarIcon } from "@heroicons/vue/24/outline";
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import { useAuthCopy } from "./useAuthCopy";
+
+type Props = { bookmarkCount?: number };
+withDefaults(defineProps<Props>(), { bookmarkCount: 0 });
+defineEmits<{ upgrade: []; later: [] }>();
+
+const c = useAuthCopy();
+</script>
+
+<template>
+    <AuthShell
+        :title="c('auth.upgrade.title')"
+        :subtitle="c('auth.upgrade.subtitle')"
+    >
+        <ul class="flex flex-col gap-3">
+            <li class="flex items-center gap-3">
+                <span
+                    class="flex size-8 shrink-0 items-center justify-center rounded-md bg-zinc-100 text-zinc-500 dark:bg-slate-700 dark:text-slate-300"
+                >
+                    <BookmarkIcon class="h-4 w-4" />
+                </span>
+                <span class="text-sm text-zinc-700 dark:text-slate-200">
+                    {{ c("auth.upgrade.bookmarks", { count: bookmarkCount }) }}
+                </span>
+            </li>
+            <li class="flex items-center gap-3">
+                <span
+                    class="flex size-8 shrink-0 items-center justify-center rounded-md bg-zinc-100 text-zinc-500 dark:bg-slate-700 dark:text-slate-300"
+                >
+                    <ChartBarIcon class="h-4 w-4" />
+                </span>
+                <span class="text-sm text-zinc-700 dark:text-slate-200">
+                    {{ c("auth.upgrade.progress") }}
+                </span>
+            </li>
+        </ul>
+
+        <LButton
+            variant="primary"
+            size="xl"
+            class="w-full"
+            @click="$emit('upgrade')"
+        >
+            {{ c("auth.upgrade.submit") }}
+        </LButton>
+
+        <template #footer>
+            <button
+                type="button"
+                class="w-full text-center text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
+                @click="$emit('later')"
+            >
+                {{ c("auth.upgrade.later") }}
+            </button>
+        </template>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/GuestWelcomeScreen.vue b/app/src/components/auth/kratos/GuestWelcomeScreen.vue
new file mode 100644
index 0000000000..fac5876350
--- /dev/null
+++ b/app/src/components/auth/kratos/GuestWelcomeScreen.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import { useAuthCopy } from "./useAuthCopy";
+
+type Props = { appName?: string; logoUrl?: string };
+withDefaults(defineProps<Props>(), { appName: "Luminary" });
+defineEmits<{ signIn: []; guest: [] }>();
+
+const c = useAuthCopy();
+</script>
+
+<template>
+    <AuthShell
+        :title="c('auth.guest.title')"
+        :subtitle="c('auth.guest.subtitle')"
+    >
+        <template #brand>
+            <div class="flex items-center gap-3">
+                <img
+                    v-if="logoUrl"
+                    :src="logoUrl"
+                    alt=""
+                    class="h-9 w-9"
+                />
+                <span class="text-lg font-semibold text-zinc-900 dark:text-slate-100">
+                    {{ appName }}
+                </span>
+            </div>
+        </template>
+
+        <LButton
+            variant="primary"
+            size="xl"
+            class="w-full"
+            @click="$emit('signIn')"
+        >
+            {{ c("auth.guest.sign_in") }}
+        </LButton>
+        <LButton
+            variant="secondary"
+            size="xl"
+            class="w-full"
+            @click="$emit('guest')"
+        >
+            {{ c("auth.guest.continue") }}
+        </LButton>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/OneTimeCodeScreen.vue b/app/src/components/auth/kratos/OneTimeCodeScreen.vue
new file mode 100644
index 0000000000..02eea9c703
--- /dev/null
+++ b/app/src/components/auth/kratos/OneTimeCodeScreen.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import AuthCodeInput from "./AuthCodeInput.vue";
+import AuthMessage from "./AuthMessage.vue";
+import { useAuthCopy } from "./useAuthCopy";
+import type { AuthMessageType } from "./types";
+
+type Props = {
+    email: string;
+    modelValue?: string;
+    message?: { type: AuthMessageType; text: string };
+    busy?: boolean;
+    /** Seconds until a new code may be requested; 0 enables the resend button. */
+    resendIn?: number;
+    /** Verification says "confirm", login says "sign in" — same flow shape, different words. */
+    mode?: "login" | "verification";
+};
+const props = withDefaults(defineProps<Props>(), { busy: false, resendIn: 0, mode: "login" });
+defineEmits<{
+    "update:modelValue": [value: string];
+    submit: [];
+    resend: [];
+    changeEmail: [];
+    back: [];
+}>();
+
+const c = useAuthCopy();
+const title = () => (props.mode === "verification" ? c("auth.verify.title") : c("auth.code.title"));
+const subtitle = () =>
+    props.mode === "verification"
+        ? c("auth.verify.subtitle", { email: props.email })
+        : c("auth.code.subtitle", { email: props.email });
+const submitLabel = () =>
+    props.mode === "verification" ? c("auth.verify.submit") : c("auth.code.submit");
+</script>
+
+<template>
+    <AuthShell
+        :title="title()"
+        :subtitle="subtitle()"
+        can-go-back
+        @back="$emit('back')"
+    >
+        <AuthMessage
+            v-if="message"
+            :type="message.type"
+            :text="message.text"
+        />
+
+        <form
+            class="flex flex-col gap-4"
+            @submit.prevent="$emit('submit')"
+        >
+            <AuthCodeInput
+                :label="c('auth.code.label')"
+                :model-value="modelValue"
+                :error="message?.type === 'error'"
+                :disabled="busy"
+                @update:model-value="$emit('update:modelValue', $event)"
+                @complete="$emit('submit')"
+            />
+            <LButton
+                variant="primary"
+                size="xl"
+                :disabled="busy || (modelValue?.length ?? 0) < 6"
+                class="w-full"
+            >
+                {{ submitLabel() }}
+            </LButton>
+        </form>
+
+        <template #footer>
+            <div class="flex flex-col items-center gap-2 text-sm">
+                <button
+                    v-if="!resendIn"
+                    type="button"
+                    class="font-medium text-zinc-700 underline underline-offset-2 hover:text-zinc-900 dark:text-slate-200 dark:hover:text-white"
+                    @click="$emit('resend')"
+                >
+                    {{ c("auth.code.resend") }}
+                </button>
+                <span
+                    v-else
+                    class="tabular-nums text-zinc-400 dark:text-slate-500"
+                >
+                    {{ c("auth.code.resend_in", { seconds: resendIn }) }}
+                </span>
+                <button
+                    type="button"
+                    class="text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
+                    @click="$emit('changeEmail')"
+                >
+                    {{ c("auth.code.change_email") }}
+                </button>
+            </div>
+        </template>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/RegistrationScreen.vue b/app/src/components/auth/kratos/RegistrationScreen.vue
new file mode 100644
index 0000000000..fdc80cdcc1
--- /dev/null
+++ b/app/src/components/auth/kratos/RegistrationScreen.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import LButton from "@/components/button/LButton.vue";
+import AuthShell from "./AuthShell.vue";
+import AuthTextField from "./AuthTextField.vue";
+import AuthMessage from "./AuthMessage.vue";
+import { useAuthCopy } from "./useAuthCopy";
+import type { AuthMessageType } from "./types";
+
+type Props = {
+    email?: string;
+    name?: string;
+    emailError?: string;
+    message?: { type: AuthMessageType; text: string };
+    busy?: boolean;
+};
+withDefaults(defineProps<Props>(), { busy: false });
+defineEmits<{
+    "update:email": [value: string];
+    "update:name": [value: string];
+    submit: [];
+    signIn: [];
+    back: [];
+}>();
+
+const c = useAuthCopy();
+</script>
+
+<template>
+    <AuthShell
+        :title="c('auth.register.title')"
+        :subtitle="c('auth.register.subtitle')"
+        can-go-back
+        @back="$emit('back')"
+    >
+        <AuthMessage
+            v-if="message"
+            :type="message.type"
+            :text="message.text"
+        />
+
+        <form
+            class="flex flex-col gap-4"
+            @submit.prevent="$emit('submit')"
+        >
+            <AuthTextField
+                :label="c('auth.email.label')"
+                :placeholder="c('auth.email.placeholder')"
+                :model-value="email"
+                :error="emailError"
+                type="email"
+                autocomplete="email"
+                :disabled="busy"
+                @update:model-value="$emit('update:email', $event)"
+            />
+            <AuthTextField
+                :label="c('auth.register.name_label')"
+                :placeholder="c('auth.register.name_placeholder')"
+                :model-value="name"
+                autocomplete="name"
+                :disabled="busy"
+                @update:model-value="$emit('update:name', $event)"
+            />
+            <LButton
+                variant="primary"
+                size="xl"
+                :disabled="busy"
+                class="w-full"
+            >
+                {{ c("auth.register.submit") }}
+            </LButton>
+        </form>
+
+        <template #footer>
+            <div class="flex flex-col items-center gap-3">
+                <button
+                    type="button"
+                    class="text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
+                    @click="$emit('signIn')"
+                >
+                    {{ c("auth.register.have_account") }}
+                </button>
+                <p class="text-center text-xs text-zinc-400 dark:text-slate-500">
+                    {{ c("auth.common.privacy_note") }}
+                </p>
+            </div>
+        </template>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/SignInMethodsScreen.vue b/app/src/components/auth/kratos/SignInMethodsScreen.vue
new file mode 100644
index 0000000000..12fae2171d
--- /dev/null
+++ b/app/src/components/auth/kratos/SignInMethodsScreen.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { EnvelopeIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import AuthShell from "./AuthShell.vue";
+import AuthMessage from "./AuthMessage.vue";
+import { useAuthCopy } from "./useAuthCopy";
+import type { AuthMessageType, AuthProviderOption } from "./types";
+
+type Props = {
+    providers?: AuthProviderOption[];
+    message?: { type: AuthMessageType; text: string };
+    /** Guests reach this screen from a gate; a first-run visitor can still walk away. */
+    showGuestExit?: boolean;
+};
+withDefaults(defineProps<Props>(), { providers: () => [], showGuestExit: true });
+defineEmits<{ email: []; provider: [id: string]; guest: [] }>();
+
+const c = useAuthCopy();
+</script>
+
+<template>
+    <AuthShell
+        :title="c('auth.methods.title')"
+        :subtitle="c('auth.methods.subtitle')"
+    >
+        <AuthMessage
+            v-if="message"
+            :type="message.type"
+            :text="message.text"
+        />
+
+        <button
+            type="button"
+            class="flex w-full items-center gap-3 rounded-lg border border-zinc-200 bg-white px-4 py-4 text-start hover:bg-zinc-50 dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600/60"
+            @click="$emit('email')"
+        >
+            <span
+                class="flex size-9 shrink-0 items-center justify-center rounded-md bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
+            >
+                <EnvelopeIcon class="h-5 w-5" />
+            </span>
+            <span class="text-[15px] font-medium text-zinc-800 dark:text-slate-100">
+                {{ c("auth.methods.email") }}
+            </span>
+        </button>
+
+        <div
+            v-if="providers.length"
+            class="flex items-center gap-3"
+        >
+            <span class="h-px flex-1 bg-zinc-200 dark:bg-slate-600" />
+            <span class="text-xs uppercase tracking-wide text-zinc-400 dark:text-slate-400">
+                {{ c("auth.methods.divider") }}
+            </span>
+            <span class="h-px flex-1 bg-zinc-200 dark:bg-slate-600" />
+        </div>
+
+        <div class="flex flex-col gap-3">
+            <button
+                v-for="provider in providers"
+                :key="provider.id"
+                type="button"
+                class="group relative flex w-full items-center gap-3 overflow-hidden rounded-lg border border-zinc-200 bg-white px-4 py-4 hover:shadow-sm dark:border-slate-600 dark:bg-slate-700"
+                :style="
+                    provider.backgroundColor
+                        ? {
+                              backgroundColor: provider.backgroundColor,
+                              borderColor: provider.backgroundColor,
+                          }
+                        : {}
+                "
+                @click="$emit('provider', provider.id)"
+            >
+                <span
+                    class="pointer-events-none absolute inset-0 bg-white opacity-0 group-hover:opacity-20"
+                />
+                <img
+                    v-if="provider.iconUrl"
+                    :src="provider.iconUrl"
+                    alt=""
+                    class="size-5 shrink-0"
+                />
+                <span
+                    class="text-[15px] font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-slate-200 dark:group-hover:text-white"
+                    :style="provider.textColor ? { color: provider.textColor } : {}"
+                >
+                    {{ provider.label }}
+                </span>
+            </button>
+        </div>
+
+        <div
+            v-if="!providers.length && message?.type === 'error'"
+            class="flex flex-col items-center gap-3 py-4 text-center"
+        >
+            <span class="rounded-full bg-zinc-100 p-3 dark:bg-slate-700">
+                <ExclamationTriangleIcon class="h-6 w-6 text-zinc-400 dark:text-slate-400" />
+            </span>
+            <p class="text-sm text-zinc-500 dark:text-slate-400">{{ c("auth.methods.none") }}</p>
+        </div>
+
+        <template
+            v-if="showGuestExit"
+            #footer
+        >
+            <div class="flex flex-col items-center gap-3">
+                <!-- A text link, never a third button: continuing as a guest is a dismissal, not a sign-in method. -->
+                <button
+                    type="button"
+                    class="text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
+                    @click="$emit('guest')"
+                >
+                    {{ c("auth.methods.guest") }}
+                </button>
+                <p class="text-center text-xs text-zinc-400 dark:text-slate-500">
+                    {{ c("auth.common.privacy_note") }}
+                </p>
+            </div>
+        </template>
+    </AuthShell>
+</template>
diff --git a/app/src/components/auth/kratos/authCopy.ts b/app/src/components/auth/kratos/authCopy.ts
new file mode 100644
index 0000000000..64f21192bc
--- /dev/null
+++ b/app/src/components/auth/kratos/authCopy.ts
@@ -0,0 +1,101 @@
+/**
+ * Default English copy for the Kratos auth screens, keyed by the i18n key each
+ * string uses once the language docs carry it. Until then `useAuthCopy` falls
+ * back to the value here, so the screens read correctly before translation.
+ */
+export const authCopy = {
+    "auth.methods.title": "Sign in",
+    "auth.methods.subtitle":
+        "Use your email address, or continue with an account you already have.",
+    "auth.methods.email": "Continue with email",
+    "auth.methods.divider": "or",
+    "auth.methods.guest": "Continue without an account",
+    "auth.methods.none": "No sign-in methods are available right now.",
+
+    "auth.email.title": "What's your email address?",
+    "auth.email.subtitle": "We'll send you a 6-digit code. No password to remember.",
+    "auth.email.label": "Email address",
+    "auth.email.placeholder": "you@example.com",
+    "auth.email.submit": "Send me a code",
+    "auth.email.invalid": "That doesn't look like an email address.",
+
+    "auth.code.title": "Enter your code",
+    "auth.code.subtitle": "We sent a 6-digit code to {email}.",
+    "auth.code.label": "Verification code",
+    "auth.code.submit": "Sign in",
+    "auth.code.resend": "Send a new code",
+    "auth.code.resend_in": "You can ask for a new code in {seconds}s",
+    "auth.code.change_email": "Use a different email address",
+    "auth.code.invalid": "That code isn't right. Check it and try again.",
+    "auth.code.expired": "This code has expired. Ask for a new one.",
+    "auth.code.too_many": "Too many tries. Wait a minute, then ask for a new code.",
+
+    "auth.register.title": "Create your account",
+    "auth.register.subtitle": "Your saved items and progress move with you, on every device.",
+    "auth.register.name_label": "Name",
+    "auth.register.name_placeholder": "How should we greet you?",
+    "auth.register.submit": "Create account",
+    "auth.register.have_account": "I already have an account",
+
+    "auth.verify.title": "Confirm your email",
+    "auth.verify.subtitle":
+        "Enter the 6-digit code we sent to {email} to finish setting up your account.",
+    "auth.verify.submit": "Confirm",
+    "auth.verify.done_title": "You're all set",
+    "auth.verify.done_subtitle": "Your email is confirmed and you're signed in.",
+    "auth.verify.done_continue": "Start reading",
+
+    "auth.upgrade.title": "Keep what you've saved",
+    "auth.upgrade.subtitle":
+        "You've been reading as a guest. Create an account and everything saved on this device comes with you.",
+    "auth.upgrade.bookmarks": "{count} saved items",
+    "auth.upgrade.progress": "Your reading and watching progress",
+    "auth.upgrade.submit": "Create an account",
+    "auth.upgrade.later": "Not now",
+
+    "auth.recovery.title": "Recover your account",
+    "auth.recovery.subtitle":
+        "Enter the email you signed up with and we'll send you a code to get back in.",
+    "auth.recovery.submit": "Send recovery code",
+    "auth.recovery.sent": "If that address has an account, a code is on its way.",
+
+    "auth.settings.title": "Account",
+    "auth.settings.email_section": "Email address",
+    "auth.settings.methods_section": "Sign-in methods",
+    "auth.settings.sessions_section": "Where you're signed in",
+    "auth.settings.this_device": "This device",
+    "auth.settings.sign_out_others": "Sign out everywhere else",
+    "auth.settings.change": "Change",
+    "auth.settings.link": "Link",
+    "auth.settings.unlink": "Unlink",
+    "auth.settings.delete": "Delete my account",
+
+    "auth.guest.title": "Welcome",
+    "auth.guest.subtitle":
+        "Sign in to save what you read across your devices — or look around first.",
+    "auth.guest.sign_in": "Sign in",
+    "auth.guest.continue": "Continue without an account",
+    "auth.guest.badge": "Guest",
+
+    "auth.gate.bookmarks_title": "Save this for later",
+    "auth.gate.bookmarks_body":
+        "Bookmarks stay on this device until you sign in. Sign in to keep them everywhere.",
+    "auth.gate.sign_in": "Sign in",
+    "auth.gate.dismiss": "Not now",
+
+    "auth.error.title": "Something went wrong",
+    "auth.error.expired_title": "That took a little too long",
+    "auth.error.expired_body":
+        "For your safety this sign-in link expired. Start again and it'll only take a moment.",
+    "auth.error.offline_title": "You're offline",
+    "auth.error.offline_body":
+        "Signing in needs a connection. Everything already downloaded is still here to read.",
+    "auth.error.restart": "Start again",
+    "auth.error.back": "Back to reading",
+    "auth.error.reference": "Reference: {id}",
+
+    "auth.common.back": "Back",
+    "auth.common.privacy_note": "By continuing you accept our privacy policy.",
+} as const;
+
+export type AuthCopyKey = keyof typeof authCopy;
diff --git a/app/src/components/auth/kratos/screens.spec.ts b/app/src/components/auth/kratos/screens.spec.ts
new file mode 100644
index 0000000000..2fae18f098
--- /dev/null
+++ b/app/src/components/auth/kratos/screens.spec.ts
@@ -0,0 +1,89 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { authCopy } from "./authCopy";
+import AuthCodeInput from "./AuthCodeInput.vue";
+import SignInMethodsScreen from "./SignInMethodsScreen.vue";
+import EmailIdentifierScreen from "./EmailIdentifierScreen.vue";
+import OneTimeCodeScreen from "./OneTimeCodeScreen.vue";
+import RegistrationScreen from "./RegistrationScreen.vue";
+import AuthDoneScreen from "./AuthDoneScreen.vue";
+import GuestWelcomeScreen from "./GuestWelcomeScreen.vue";
+import GuestGateCard from "./GuestGateCard.vue";
+import GuestUpgradeScreen from "./GuestUpgradeScreen.vue";
+import AccountSettingsScreen from "./AccountSettingsScreen.vue";
+import AuthErrorScreen from "./AuthErrorScreen.vue";
+
+// No auth key is translated yet, so `te` is false everywhere and the screens
+// fall back to the English defaults in authCopy — which is what they render in
+// production until the language docs carry the keys.
+vi.mock("vue-i18n", () => ({
+    useI18n: () => ({ t: (key: string) => key, te: () => false }),
+}));
+
+describe("Kratos auth screens", () => {
+    it("renders every screen with its default copy", () => {
+        const cases: Array<[string, ReturnType<typeof mount>]> = [
+            [authCopy["auth.methods.title"], mount(SignInMethodsScreen)],
+            [authCopy["auth.email.title"], mount(EmailIdentifierScreen)],
+            [
+                authCopy["auth.code.title"],
+                mount(OneTimeCodeScreen, { props: { email: "a@b.com" } }),
+            ],
+            [authCopy["auth.register.title"], mount(RegistrationScreen)],
+            [authCopy["auth.verify.done_title"], mount(AuthDoneScreen)],
+            [authCopy["auth.guest.title"], mount(GuestWelcomeScreen)],
+            [authCopy["auth.gate.bookmarks_title"], mount(GuestGateCard)],
+            [authCopy["auth.upgrade.title"], mount(GuestUpgradeScreen)],
+            [
+                authCopy["auth.settings.title"],
+                mount(AccountSettingsScreen, { props: { email: "a@b.com" } }),
+            ],
+            [
+                authCopy["auth.error.expired_title"],
+                mount(AuthErrorScreen, { props: { kind: "expired" } }),
+            ],
+        ];
+
+        for (const [heading, wrapper] of cases) {
+            expect(wrapper.text()).toContain(heading);
+        }
+    });
+
+    it("interpolates the address into the code screen's subtitle", () => {
+        const wrapper = mount(OneTimeCodeScreen, { props: { email: "johan@example.com" } });
+        expect(wrapper.text()).toContain("johan@example.com");
+        expect(wrapper.text()).not.toContain("{email}");
+    });
+
+    it("offers a resend only once the countdown has run out", async () => {
+        const waiting = mount(OneTimeCodeScreen, { props: { email: "a@b.com", resendIn: 20 } });
+        expect(waiting.text()).toContain("20s");
+        expect(waiting.text()).not.toContain(authCopy["auth.code.resend"]);
+
+        const ready = mount(OneTimeCodeScreen, { props: { email: "a@b.com", resendIn: 0 } });
+        expect(ready.text()).toContain(authCopy["auth.code.resend"]);
+    });
+
+    it("spreads a pasted code across the boxes and reports completion", async () => {
+        const wrapper = mount(AuthCodeInput, { props: { label: "Code" } });
+        await wrapper.find("input").trigger("paste", {
+            clipboardData: { getData: () => "1 2 3-456" },
+        });
+
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["123456"]);
+        expect(wrapper.emitted("complete")?.at(-1)).toEqual(["123456"]);
+    });
+
+    it("keeps continuing as a guest out of the method list", () => {
+        const wrapper = mount(SignInMethodsScreen, {
+            props: { providers: [{ id: "bcc", label: "Continue with BCC" }] },
+        });
+        const methodButtons = wrapper.findAll("button");
+        const guest = methodButtons.find((b) => b.text() === authCopy["auth.methods.guest"]);
+
+        expect(guest).toBeDefined();
+        // A dismissal must not wear the same clothes as a sign-in method.
+        expect(guest!.classes().join(" ")).toContain("underline");
+        expect(guest!.classes().join(" ")).not.toContain("border");
+    });
+});
diff --git a/app/src/components/auth/kratos/types.ts b/app/src/components/auth/kratos/types.ts
new file mode 100644
index 0000000000..93eedbaff6
--- /dev/null
+++ b/app/src/components/auth/kratos/types.ts
@@ -0,0 +1,11 @@
+/** The non-secret provider fields these screens need, as carried on an `AuthProviderDto`. */
+export type AuthProviderOption = {
+    id: string;
+    label: string;
+    iconUrl?: string;
+    backgroundColor?: string;
+    textColor?: string;
+};
+
+/** Kratos message types, as they arrive on `ui.messages[].type`. */
+export type AuthMessageType = "info" | "error" | "success";
diff --git a/app/src/components/auth/kratos/useAuthCopy.ts b/app/src/components/auth/kratos/useAuthCopy.ts
new file mode 100644
index 0000000000..e46aab3cfd
--- /dev/null
+++ b/app/src/components/auth/kratos/useAuthCopy.ts
@@ -0,0 +1,23 @@
+import { useI18n } from "vue-i18n";
+import { authCopy, type AuthCopyKey } from "./authCopy";
+
+type Params = Record<string, string | number>;
+
+function interpolate(template: string, params?: Params): string {
+    if (!params) return template;
+    return template.replace(/\{(\w+)\}/g, (match, name) =>
+        name in params ? String(params[name]) : match,
+    );
+}
+
+/**
+ * Resolves an auth string from the synced language docs, falling back to the
+ * English default in `authCopy` while a key has no translation yet. Screens can
+ * therefore be designed and reviewed before the keys exist.
+ */
+export function useAuthCopy() {
+    const { t, te } = useI18n();
+
+    return (key: AuthCopyKey, params?: Params): string =>
+        te(key) ? t(key, params ?? {}) : interpolate(authCopy[key], params);
+}
diff --git a/app/src/pages/design/AuthArtboard.vue b/app/src/pages/design/AuthArtboard.vue
new file mode 100644
index 0000000000..b548b5aa35
--- /dev/null
+++ b/app/src/pages/design/AuthArtboard.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type Props = {
+    title: string;
+    /** The Kratos flow and method this screen submits to, so the design carries its own wiring note. */
+    flow?: string;
+    theme: "light" | "dark";
+};
+defineProps<Props>();
+</script>
+
+<template>
+    <figure class="m-0 flex w-[390px] shrink-0 flex-col gap-2">
+        <figcaption class="flex flex-col gap-0.5 px-1">
+            <span class="text-sm font-semibold text-zinc-900 dark:text-slate-100">{{ title }}</span>
+            <span
+                v-if="flow"
+                class="font-mono text-xs text-zinc-500 dark:text-slate-400"
+                >{{ flow }}</span
+            >
+        </figcaption>
+        <div
+            :class="theme === 'dark' ? 'dark' : ''"
+            class="overflow-hidden rounded-xl border border-zinc-200 shadow-sm dark:border-slate-700"
+        >
+            <div
+                class="flex min-h-[560px] items-center justify-center bg-white p-6 dark:bg-slate-900"
+            >
+                <slot />
+            </div>
+        </div>
+    </figure>
+</template>
diff --git a/app/src/pages/design/AuthDesignPage.spec.ts b/app/src/pages/design/AuthDesignPage.spec.ts
new file mode 100644
index 0000000000..92c8ac6d71
--- /dev/null
+++ b/app/src/pages/design/AuthDesignPage.spec.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import AuthDesignPage from "./AuthDesignPage.vue";
+
+vi.mock("vue-i18n", () => ({
+    useI18n: () => ({ t: (key: string) => key, te: () => false }),
+}));
+
+describe("AuthDesignPage", () => {
+    it("renders every artboard in both themes and leaves the app's theme class alone", () => {
+        document.documentElement.classList.add("dark");
+        const wrapper = mount(AuthDesignPage, { attachTo: document.body });
+
+        // 21 screens, drawn light and dark.
+        expect(wrapper.findAll("figure")).toHaveLength(42);
+        expect(document.documentElement.classList.contains("dark")).toBe(false);
+
+        wrapper.unmount();
+        expect(document.documentElement.classList.contains("dark")).toBe(true);
+    });
+});
diff --git a/app/src/pages/design/AuthDesignPage.vue b/app/src/pages/design/AuthDesignPage.vue
new file mode 100644
index 0000000000..a87b91d108
--- /dev/null
+++ b/app/src/pages/design/AuthDesignPage.vue
@@ -0,0 +1,412 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import AuthArtboard from "./AuthArtboard.vue";
+import SignInMethodsScreen from "@/components/auth/kratos/SignInMethodsScreen.vue";
+import EmailIdentifierScreen from "@/components/auth/kratos/EmailIdentifierScreen.vue";
+import OneTimeCodeScreen from "@/components/auth/kratos/OneTimeCodeScreen.vue";
+import RegistrationScreen from "@/components/auth/kratos/RegistrationScreen.vue";
+import AuthDoneScreen from "@/components/auth/kratos/AuthDoneScreen.vue";
+import GuestWelcomeScreen from "@/components/auth/kratos/GuestWelcomeScreen.vue";
+import GuestGateCard from "@/components/auth/kratos/GuestGateCard.vue";
+import GuestUpgradeScreen from "@/components/auth/kratos/GuestUpgradeScreen.vue";
+import AccountSettingsScreen from "@/components/auth/kratos/AccountSettingsScreen.vue";
+import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
+import type { AuthProviderOption } from "@/components/auth/kratos/types";
+
+type Theme = "light" | "dark";
+const themeMode = ref<"light" | "dark" | "both">("both");
+const themes = computed<Theme[]>(() =>
+    themeMode.value === "both" ? ["light", "dark"] : [themeMode.value],
+);
+
+// The artboards paint their own theme through a `.dark` wrapper, so the app-wide
+// class has to come off while this page is mounted or every board renders dark.
+let hadDarkClass = false;
+onMounted(() => {
+    hadDarkClass = document.documentElement.classList.contains("dark");
+    document.documentElement.classList.remove("dark");
+});
+onBeforeUnmount(() => {
+    if (hadDarkClass) document.documentElement.classList.add("dark");
+});
+
+const providers: AuthProviderOption[] = [
+    { id: "bcc", label: "Continue with BCC", backgroundColor: "#1e3a5f", textColor: "#ffffff" },
+    { id: "google", label: "Continue with Google" },
+];
+
+const email = ref("");
+const emailInvalid = ref("not-an-email");
+const recoveryEmail = ref("");
+const registerEmail = ref("");
+const registerName = ref("");
+const code = ref("");
+const codeWrong = ref("418293");
+const verifyCode = ref("40");
+
+const sessions = [
+    {
+        id: "1",
+        device: "iPhone 14 · Safari",
+        location: "Cape Town",
+        lastSeen: "Active now",
+        current: true,
+    },
+    { id: "2", device: "MacBook Pro · Chrome", location: "Cape Town", lastSeen: "2 hours ago" },
+    { id: "3", device: "Android · Chrome", location: "Oslo", lastSeen: "12 March" },
+];
+
+const methods = [
+    { id: "email", label: "Email code", linked: true },
+    { id: "bcc", label: "BCC", linked: false },
+];
+
+const sections = [
+    {
+        id: "guest",
+        title: "Guest",
+        note: "No Kratos session at all — the API already serves anonymous callers their default groups.",
+    },
+    {
+        id: "login",
+        title: "Login — email one-time code",
+        note: "self-service/login/browser, method=code",
+    },
+    {
+        id: "register",
+        title: "Registration & verification",
+        note: "self-service/registration/browser + self-service/verification/browser",
+    },
+    {
+        id: "recover",
+        title: "Recovery, account & errors",
+        note: "self-service/recovery/browser, self-service/settings/browser, self-service/errors",
+    },
+];
+</script>
+
+<template>
+    <div class="min-h-screen bg-zinc-100 pb-24">
+        <header
+            class="sticky top-0 z-10 border-b border-zinc-200 bg-white/90 px-6 py-4 backdrop-blur"
+        >
+            <div class="flex flex-wrap items-baseline justify-between gap-4">
+                <div>
+                    <h1 class="text-lg font-semibold text-zinc-900">Guest auth — Ory Kratos</h1>
+                    <p class="text-sm text-zinc-500">
+                        Every screen is a real component from
+                        <code class="font-mono text-xs">src/components/auth/kratos/</code>. Type in
+                        them — they work.
+                    </p>
+                </div>
+                <div class="flex items-center gap-1 rounded-md border border-zinc-300 bg-white p-1">
+                    <button
+                        v-for="option in ['light', 'dark', 'both'] as const"
+                        :key="option"
+                        type="button"
+                        class="rounded px-3 py-1 text-sm font-medium capitalize"
+                        :class="
+                            themeMode === option
+                                ? 'bg-zinc-900 text-white'
+                                : 'text-zinc-600 hover:bg-zinc-100'
+                        "
+                        @click="themeMode = option"
+                    >
+                        {{ option }}
+                    </button>
+                </div>
+            </div>
+            <nav class="mt-3 flex flex-wrap gap-3">
+                <a
+                    v-for="section in sections"
+                    :key="section.id"
+                    :href="`#${section.id}`"
+                    class="text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-900"
+                >
+                    {{ section.title }}
+                </a>
+            </nav>
+        </header>
+
+        <main class="flex flex-col gap-12 px-6 py-8">
+            <!-- Guest -->
+            <section
+                id="guest"
+                class="flex flex-col gap-4"
+            >
+                <div>
+                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[0].title }}</h2>
+                    <p class="text-sm text-zinc-500">{{ sections[0].note }}</p>
+                </div>
+                <div class="flex flex-wrap gap-6">
+                    <template
+                        v-for="theme in themes"
+                        :key="`welcome-${theme}`"
+                    >
+                        <AuthArtboard
+                            title="First run — sign in or look around"
+                            flow="no flow · app decides"
+                            :theme="theme"
+                        >
+                            <GuestWelcomeScreen app-name="Luminary" />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Guest hits a gated action"
+                            flow="no flow · inline prompt"
+                            :theme="theme"
+                        >
+                            <GuestGateCard />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Guest → account"
+                            flow="registration/browser"
+                            :theme="theme"
+                        >
+                            <GuestUpgradeScreen :bookmark-count="12" />
+                        </AuthArtboard>
+                    </template>
+                </div>
+            </section>
+
+            <!-- Login -->
+            <section
+                id="login"
+                class="flex flex-col gap-4"
+            >
+                <div>
+                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[1].title }}</h2>
+                    <p class="font-mono text-sm text-zinc-500">{{ sections[1].note }}</p>
+                </div>
+                <div class="flex flex-wrap gap-6">
+                    <template
+                        v-for="theme in themes"
+                        :key="`login-${theme}`"
+                    >
+                        <AuthArtboard
+                            title="Choose a method"
+                            flow="login flow · groups: code, oidc"
+                            :theme="theme"
+                        >
+                            <SignInMethodsScreen :providers="providers" />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Choose a method — email only"
+                            flow="login flow · group: code"
+                            :theme="theme"
+                        >
+                            <SignInMethodsScreen />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Identifier step"
+                            flow="POST ui.action · method=code"
+                            :theme="theme"
+                        >
+                            <EmailIdentifierScreen v-model="email" />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Identifier step — invalid address"
+                            flow="ui.nodes[identifier].messages"
+                            :theme="theme"
+                        >
+                            <EmailIdentifierScreen
+                                v-model="emailInvalid"
+                                error="That doesn't look like an email address."
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Code step"
+                            flow="POST ui.action · code + resend"
+                            :theme="theme"
+                        >
+                            <OneTimeCodeScreen
+                                v-model="code"
+                                email="johan@example.com"
+                                :resend-in="42"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Code step — wrong code"
+                            flow="ui.messages 4010008"
+                            :theme="theme"
+                        >
+                            <OneTimeCodeScreen
+                                v-model="codeWrong"
+                                email="johan@example.com"
+                                :resend-in="18"
+                                :message="{
+                                    type: 'error',
+                                    text: `That code isn't right. Check it and try again.`,
+                                }"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Code step — expired"
+                            flow="ui.messages 4060004 · resend enabled"
+                            :theme="theme"
+                        >
+                            <OneTimeCodeScreen
+                                email="johan@example.com"
+                                :message="{
+                                    type: 'error',
+                                    text: 'This code has expired. Ask for a new one.',
+                                }"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Code step — rate limited"
+                            flow="HTTP 429 from Kratos"
+                            :theme="theme"
+                        >
+                            <OneTimeCodeScreen
+                                email="johan@example.com"
+                                :resend-in="60"
+                                :message="{
+                                    type: 'error',
+                                    text: 'Too many tries. Wait a minute, then ask for a new code.',
+                                }"
+                            />
+                        </AuthArtboard>
+                    </template>
+                </div>
+            </section>
+
+            <!-- Registration -->
+            <section
+                id="register"
+                class="flex flex-col gap-4"
+            >
+                <div>
+                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[2].title }}</h2>
+                    <p class="font-mono text-sm text-zinc-500">{{ sections[2].note }}</p>
+                </div>
+                <div class="flex flex-wrap gap-6">
+                    <template
+                        v-for="theme in themes"
+                        :key="`register-${theme}`"
+                    >
+                        <AuthArtboard
+                            title="Create an account"
+                            flow="registration flow · traits + method=code"
+                            :theme="theme"
+                        >
+                            <RegistrationScreen
+                                v-model:email="registerEmail"
+                                v-model:name="registerName"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Create an account — already registered"
+                            flow="ui.messages 4000007"
+                            :theme="theme"
+                        >
+                            <RegistrationScreen
+                                email="johan@example.com"
+                                name="Johan"
+                                :message="{
+                                    type: 'info',
+                                    text: 'That address already has an account — sign in instead.',
+                                }"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Confirm your email"
+                            flow="verification flow · method=code"
+                            :theme="theme"
+                        >
+                            <OneTimeCodeScreen
+                                v-model="verifyCode"
+                                email="johan@example.com"
+                                mode="verification"
+                                :resend-in="30"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Verified"
+                            flow="session issued · redirect to return_to"
+                            :theme="theme"
+                        >
+                            <AuthDoneScreen />
+                        </AuthArtboard>
+                    </template>
+                </div>
+            </section>
+
+            <!-- Recovery, settings, errors -->
+            <section
+                id="recover"
+                class="flex flex-col gap-4"
+            >
+                <div>
+                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[3].title }}</h2>
+                    <p class="font-mono text-sm text-zinc-500">{{ sections[3].note }}</p>
+                </div>
+                <div class="flex flex-wrap gap-6">
+                    <template
+                        v-for="theme in themes"
+                        :key="`recover-${theme}`"
+                    >
+                        <AuthArtboard
+                            title="Recover an account"
+                            flow="recovery flow · method=code"
+                            :theme="theme"
+                        >
+                            <EmailIdentifierScreen
+                                v-model="recoveryEmail"
+                                mode="recovery"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Recovery sent"
+                            flow="ui.messages 1060003 · deliberately vague"
+                            :theme="theme"
+                        >
+                            <EmailIdentifierScreen
+                                mode="recovery"
+                                :message="{
+                                    type: 'success',
+                                    text: 'If that address has an account, a code is on its way.',
+                                }"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Account"
+                            flow="settings flow + GET /sessions"
+                            :theme="theme"
+                        >
+                            <AccountSettingsScreen
+                                email="johan@example.com"
+                                :methods="methods"
+                                :sessions="sessions"
+                            />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Flow expired"
+                            flow="410 Gone · restart the flow"
+                            :theme="theme"
+                        >
+                            <AuthErrorScreen kind="expired" />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Offline"
+                            flow="never reaches Kratos"
+                            :theme="theme"
+                        >
+                            <AuthErrorScreen kind="offline" />
+                        </AuthArtboard>
+                        <AuthArtboard
+                            title="Unhandled error"
+                            flow="self-service/errors?id="
+                            :theme="theme"
+                        >
+                            <AuthErrorScreen
+                                kind="generic"
+                                detail="We couldn't finish signing you in. Trying again usually sorts it out."
+                                error-id="a1f0c7e2"
+                            />
+                        </AuthArtboard>
+                    </template>
+                </div>
+            </section>
+        </main>
+    </div>
+</template>
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index e00f1a2712..5c1575da1b 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -10,6 +10,24 @@ const SettingsPage = () => import("@/pages/SettingsPage.vue");
 const BookmarksPage = () => import("@/pages/BookmarksPage.vue");
 const SingleContent = () => import("@/pages/SingleContent/SingleContent.vue");
 const NotFoundPage = () => import("@/pages/NotFoundPage.vue");
+const AuthDesignPage = () => import("@/pages/design/AuthDesignPage.vue");
+
+/**
+ * Design canvas for the Kratos auth screens. Development only — it renders every
+ * screen and state side by side and ships in no build.
+ */
+const designRoutes: RouteRecordRaw[] = import.meta.env.DEV
+    ? [
+          {
+              path: "/design/auth",
+              component: AuthDesignPage,
+              name: "design-auth",
+              meta: {
+                  analyticsIgnore: true,
+              },
+          },
+      ]
+    : [];
 
 /**
  * The shared route table for both the normal SPA entry and the web/SSG entry. `meta.prerender: true` marks public, crawlable routes the web build emits as static HTML; dynamic content slugs are enumerated from the API at build time.
@@ -77,6 +95,7 @@ export const routes: RouteRecordRaw[] = [
             title: "title.bookmarks",
         },
     },
+    ...designRoutes,
     // Note that this route should always come after all defined routes,
     // to prevent wrongly configured slugs from taking over pages
     {
diff --git a/docs/temp_kratos-guest-auth-ui.md b/docs/temp_kratos-guest-auth-ui.md
new file mode 100644
index 0000000000..2f2d6e987f
--- /dev/null
+++ b/docs/temp_kratos-guest-auth-ui.md
@@ -0,0 +1,111 @@
+# Guest auth on Ory Kratos — UI design
+
+Working doc for the app-side login screens. The screens themselves are real components in
+`app/src/components/auth/kratos/`; run `npm run dev` in `app/` and open `/design/auth` to
+see all 21 of them, light and dark, side by side.
+
+## What "guest" means
+
+Kratos has no anonymous identity, and it should not be made to grow one. A guest here is
+simply **a visitor with no Kratos session**. The API already handles that case: an
+unauthenticated request resolves through `AuthIdentityService.resolveOrDefault`, which
+returns `status: "anonymous"` with the groups from provider-less `AutoGroupMappings`. Guest
+browsing needs no new server work at all.
+
+What Kratos adds is a way for a guest to _stop_ being one without leaving the app: email
+plus a one-time code, no password to invent, no third-party account required.
+
+Two consequences the design is built around:
+
+- **"Continue without an account" is a dismissal, not a sign-in method.** It is a text link
+  under the card, never a third button in the method list. `screens.spec.ts` pins that.
+- **Signing in moves nothing.** Bookmarks and progress live in this device's IndexedDB. The
+  guest→account screen says what will travel with the account rather than implying a
+  server-side merge that does not exist yet. If per-user bookmark sync lands later, that
+  screen is where the merge is announced — the copy is already shaped for it.
+
+If identified guests are ever a real requirement (device-scoped identity now, claim it from
+another device later), the alternative is a credential-less `guest` identity schema created
+through the Kratos admin API from the Luminary API. It costs an identity row per device,
+gives no way to authenticate _back_ into that identity, and puts every one of those rows
+inside the GDPR deletion story. Not worth it without a concrete need.
+
+## Where the pages live — recommendation
+
+**Put them in the PWA as routes** (`/login`, `/verify`, `/recovery`, `/account`), and point
+Kratos's `selfservice.flows.*.ui_url` at them. Not a standalone self-service UI.
+
+Reasons, in the order they matter here:
+
+1. **Translations.** Every user-facing string in this app comes from synced language docs
+   through `vue-i18n`. A standalone UI cannot reach them, so the most-seen screens in the
+   product would need a second translation pipeline. Screens in the app use the same `t()`
+   as everything else.
+2. **The installed PWA.** Redirecting to another origin drops the user out of the installed
+   shell — on iOS standalone mode, into a separate browser context, which is exactly where
+   session cookies go missing.
+3. **One design system.** `LButton`, dark mode, Inter, the zinc/slate palette all already
+   exist here. Matching them twice is a standing tax.
+
+The cost is that we render `ui.nodes` ourselves. That is bounded: known node groups
+(`code`, `oidc`, `profile`) get the bespoke components in this branch, and anything
+unrecognised falls through to a generic node renderer so a Kratos upgrade that adds a method
+degrades to a plain form instead of a blank screen.
+
+What choosing this requires:
+
+- **Kratos public API must be same-site with the app.** Reverse-proxy it under the app's own
+  origin (`https://app.example.com/.ory/*` → Kratos public). This is Ory's own recommended
+  setup and it makes the session cookie and the CSRF cookie work without any `SameSite`
+  or CORS argument.
+- **Submit the `csrf_token` node.** Every flow's `ui.nodes` carries it; build the POST body
+  from the nodes rather than hand-rolling fields, or the flow 403s.
+- **Handle flow expiry.** Kratos flows expire (30 min by default, code flows sooner). That
+  is the `Flow expired` artboard — it restarts the flow rather than showing a raw error.
+- **Allowlist `return_to`** in the Kratos config, so a guest gated on a page comes back to
+  that page rather than to the home screen.
+
+## Screens ↔ Kratos flows
+
+| Screen (artboard)                      | Flow                                 | Notes                                                                       |
+| -------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
+| First run — sign in or look around     | none                                 | App's own decision, before any flow starts                                  |
+| Guest hits a gated action              | none                                 | Inline prompt, in place; not a modal over the content                       |
+| Guest → account                        | `registration/browser`               | Names what travels with the account                                         |
+| Choose a method                        | `login/browser`                      | `ui.nodes` groups `code` + `oidc`                                           |
+| Choose a method — email only           | `login/browser`                      | Same screen with no `oidc` group configured                                 |
+| Identifier step                        | POST `ui.action`, `method=code`      |                                                                             |
+| Identifier step — invalid address      | —                                    | `ui.nodes[identifier].messages`                                             |
+| Code step                              | POST `ui.action`                     | `code` node + `resend`                                                      |
+| Code step — wrong code                 | —                                    | Kratos message `4010008`                                                    |
+| Code step — expired                    | —                                    | Message `4060004`; resend is enabled                                        |
+| Code step — rate limited               | —                                    | HTTP 429; countdown holds the resend                                        |
+| Create an account                      | `registration/browser`               | `traits.email`, `traits.name`, `method=code`                                |
+| Create an account — already registered | —                                    | Message `4000007`, steered to sign-in                                       |
+| Confirm your email                     | `verification/browser`               | Same code component, different words                                        |
+| Verified                               | —                                    | Session issued, redirect to `return_to`                                     |
+| Recover an account                     | `recovery/browser`                   | `method=code`                                                               |
+| Recovery sent                          | —                                    | Message `1060003` — deliberately vague, does not confirm the address exists |
+| Account                                | `settings/browser` + `GET /sessions` | Sessions are an API read, not a flow                                        |
+| Flow expired                           | —                                    | `410 Gone`                                                                  |
+| Offline                                | —                                    | Never reaches Kratos; says what still works offline                         |
+| Unhandled error                        | `self-service/errors?id=`            | Shows the reference id, not the address                                     |
+
+## Copy and translation
+
+`authCopy.ts` holds the English default for every string, keyed by the i18n key it will use
+once the language docs carry it. `useAuthCopy()` prefers the translation and falls back to
+that default, so the screens read correctly today and translate later without touching a
+component. The table above doubles as the string inventory for whoever adds the keys.
+
+## Open questions
+
+- Does the CMS stay on the current OIDC providers while the app moves to Kratos, or is
+  Kratos meant to serve both? The screens assume app-only; the method list still shows OIDC
+  providers alongside email, so both can coexist.
+- The privacy-policy gate (`useAuthWithPrivacyPolicy`) currently wraps every login start.
+  The designs carry a privacy note in the footer instead — decide whether the modal stays in
+  front of the flow or the note replaces it.
+- Is a guest's bookmark set meant to sync per user once they have an account? The upgrade
+  screen promises "everything saved on this device comes with you", which is true today only
+  because nothing moves. It becomes a real promise the moment bookmarks sync.

From 7c03d7dbf6d4dd724ec496a94f7500c48da7a2bb Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:12:25 +0200
Subject: [PATCH 02/15] feat(app): wire the guest auth screens to Ory Kratos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sign-up and sign-in both run on the emailed one-time code, through the
screens designed in the previous commit. One page serves login, signup,
verification and recovery, because Kratos models them as the same
two-step shape: address, then code.

The payload is built from the flow's own ui.nodes rather than hand-
written, which is what keeps csrf_token, the traits Kratos echoes back,
and any field a later Kratos version adds in the body without a change
here. Every submit outcome is a value, not a throw — a 400 carrying
validation errors is an ordinary step in these flows.

kratos/ holds a docker-compose Kratos and Mailpit for development.
Kratos' serve.public.base_url is the app's own origin plus /.ory, which
Vite proxies to the container, so every URL Kratos hands the browser is
same-site and its cookies survive. Production wants the same shape from
a real reverse proxy.

Registered only when VITE_KRATOS_URL is set, so the routes exist nowhere
they have not been switched on.

The specs assert against flows recorded from Kratos v1.3.1 rather than
against the documented shapes. What that recording settled: method=code
sends the registration code directly without the two-step profile
screen, login asks for identifier where registration asks for
traits.email, and flat dotted trait keys are accepted as JSON.

A Kratos session still does not authenticate anything to the Luminary
API, which validates JWTs against a provider's JWKS. Closing that is a
deliberate second step, written up in the doc.
---
 app/.env.example                              |   7 +
 app/src/auth/kratos/client.spec.ts            |  71 +++++
 app/src/auth/kratos/client.ts                 | 141 +++++++++
 app/src/auth/kratos/fixtures.spec-data.json   | 299 ++++++++++++++++++
 app/src/auth/kratos/nodes.spec.ts             |  60 ++++
 app/src/auth/kratos/nodes.ts                  |  56 ++++
 app/src/auth/kratos/types.ts                  |  56 ++++
 app/src/auth/kratos/useKratosAuth.spec.ts     | 137 ++++++++
 app/src/auth/kratos/useKratosAuth.ts          | 177 +++++++++++
 .../auth/kratos/EmailIdentifierScreen.vue     |   7 +
 app/src/pages/auth/KratosAuthPage.vue         | 154 +++++++++
 app/src/router/router.spec.ts                 |  13 +-
 app/src/router/routes.ts                      |  29 ++
 app/vite.config.ts                            |  11 +
 docs/temp_kratos-guest-auth-ui.md             |  64 ++++
 kratos/README.md                              |  42 +++
 kratos/config/identity.schema.json            |  39 +++
 kratos/config/kratos.yml                      | 113 +++++++
 kratos/docker-compose.yml                     |  35 ++
 19 files changed, 1509 insertions(+), 2 deletions(-)
 create mode 100644 app/src/auth/kratos/client.spec.ts
 create mode 100644 app/src/auth/kratos/client.ts
 create mode 100644 app/src/auth/kratos/fixtures.spec-data.json
 create mode 100644 app/src/auth/kratos/nodes.spec.ts
 create mode 100644 app/src/auth/kratos/nodes.ts
 create mode 100644 app/src/auth/kratos/types.ts
 create mode 100644 app/src/auth/kratos/useKratosAuth.spec.ts
 create mode 100644 app/src/auth/kratos/useKratosAuth.ts
 create mode 100644 app/src/pages/auth/KratosAuthPage.vue
 create mode 100644 kratos/README.md
 create mode 100644 kratos/config/identity.schema.json
 create mode 100644 kratos/config/kratos.yml
 create mode 100644 kratos/docker-compose.yml

diff --git a/app/.env.example b/app/.env.example
index 2c72675bff..4af967dc43 100644
--- a/app/.env.example
+++ b/app/.env.example
@@ -38,3 +38,10 @@ VITE_SENTRY_DSN=
 # Optional — debugging aid only. Set to "true" to disable minification (readable
 # build output); any other value (or unset) minifies normally.
 VITE_BYPASS_MINIFY=false
+
+# Ory Kratos guest-auth proof of concept. Unset, the /auth/* routes are not
+# registered and nothing changes. Set it to the same-origin proxy prefix that
+# `kratos/config/kratos.yml` names in serve.public.base_url.
+# VITE_KRATOS_URL="/.ory"
+# Where the dev proxy forwards /.ory (defaults to the compose file's Kratos).
+# KRATOS_PUBLIC_URL="http://127.0.0.1:4433"
diff --git a/app/src/auth/kratos/client.spec.ts b/app/src/auth/kratos/client.spec.ts
new file mode 100644
index 0000000000..3a0b84f241
--- /dev/null
+++ b/app/src/auth/kratos/client.spec.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import fixtures from "./fixtures.spec-data.json";
+import { submitFlow } from "./client";
+import type { KratosFlow } from "./types";
+
+const flow = fixtures.registrationStart as KratosFlow;
+
+function respond(status: number, body: unknown, ok = status < 400) {
+    return { ok, status, json: async () => body } as Response;
+}
+
+describe("submitFlow", () => {
+    beforeEach(() => vi.stubGlobal("fetch", vi.fn()));
+    afterEach(() => vi.unstubAllGlobals());
+
+    it("merges the caller's values over the ones Kratos sent", async () => {
+        vi.mocked(fetch).mockResolvedValue(respond(200, { session: { id: "s1" } }));
+        await submitFlow(flow, { method: "code", "traits.email": "a@b.com" });
+
+        const body = JSON.parse(vi.mocked(fetch).mock.calls[0][1]!.body as string);
+        expect(body.csrf_token).toBeTruthy();
+        expect(body.method).toBe("code");
+        expect(body["traits.email"]).toBe("a@b.com");
+    });
+
+    it("treats a 400 as the next step, not a failure", async () => {
+        const next = fixtures.registrationAwaitingCode;
+        vi.mocked(fetch).mockResolvedValue(respond(400, next));
+
+        const result = await submitFlow(flow, {});
+        expect(result.kind).toBe("flow");
+    });
+
+    it("reports an expired flow rather than a generic error", async () => {
+        vi.mocked(fetch).mockResolvedValue(respond(410, {}));
+        expect((await submitFlow(flow, {})).kind).toBe("expired");
+    });
+
+    it("follows a browser redirect Kratos asks for", async () => {
+        vi.mocked(fetch).mockResolvedValue(
+            respond(422, { redirect_browser_to: "https://idp.example/authorize" }),
+        );
+        expect(await submitFlow(flow, {})).toEqual({
+            kind: "redirect",
+            to: "https://idp.example/authorize",
+        });
+    });
+
+    it("returns the session on success", async () => {
+        vi.mocked(fetch).mockResolvedValue(respond(200, { session: { id: "s1", active: true } }));
+        const result = await submitFlow(flow, {});
+        expect(result).toMatchObject({ kind: "session", session: { id: "s1" } });
+    });
+
+    it("sends the browser to verification when registration still owes one", async () => {
+        vi.mocked(fetch).mockResolvedValue(
+            respond(200, {
+                continue_with: [{ action: "show_verification_ui", flow: { id: "v1" } }],
+            }),
+        );
+        expect(await submitFlow(flow, {})).toEqual({
+            kind: "redirect",
+            to: "/auth/verify?flow=v1",
+        });
+    });
+
+    it("calls a dropped connection offline instead of throwing", async () => {
+        vi.mocked(fetch).mockRejectedValue(new TypeError("Failed to fetch"));
+        expect((await submitFlow(flow, {})).kind).toBe("offline");
+    });
+});
diff --git a/app/src/auth/kratos/client.ts b/app/src/auth/kratos/client.ts
new file mode 100644
index 0000000000..092c1d8209
--- /dev/null
+++ b/app/src/auth/kratos/client.ts
@@ -0,0 +1,141 @@
+import type { FlowType, KratosFlow, KratosSession, SubmitResult } from "./types";
+import { collectDefaults } from "./nodes";
+
+/**
+ * Same-origin by default: Vite proxies /.ory to the Kratos container in dev, and
+ * production is expected to reverse-proxy the same path. Kratos' own
+ * `serve.public.base_url` must agree, or the action URLs it hands back are
+ * cross-site and the browser drops the session cookie.
+ */
+export const KRATOS_BASE = import.meta.env.VITE_KRATOS_URL || "/.ory";
+
+/** Whether the Kratos PoC is wired up at all. No env var, no routes. */
+export const isKratosEnabled = (): boolean => !!import.meta.env.VITE_KRATOS_URL;
+
+const jsonHeaders = { Accept: "application/json", "Content-Type": "application/json" };
+
+/** Kratos answers 410/404 for a flow that has expired or was never issued. */
+const isGoneStatus = (status: number) => status === 410 || status === 404 || status === 403;
+
+async function readJson<T>(response: Response): Promise<T> {
+    return (await response.json()) as T;
+}
+
+/** Start a browser flow. `returnTo` survives the round trip and decides where success lands. */
+export async function createFlow(type: FlowType, returnTo?: string): Promise<KratosFlow> {
+    const url = new URL(`${KRATOS_BASE}/self-service/${type}/browser`, window.location.origin);
+    if (returnTo) url.searchParams.set("return_to", returnTo);
+
+    const response = await fetch(url, {
+        headers: { Accept: "application/json" },
+        credentials: "include",
+    });
+    if (!response.ok) throw new Error(`Could not start the ${type} flow (${response.status})`);
+    return readJson<KratosFlow>(response);
+}
+
+/** Fetch the flow named in the URL Kratos redirected the browser to. */
+export async function fetchFlow(type: FlowType, id: string): Promise<KratosFlow | null> {
+    const url = new URL(`${KRATOS_BASE}/self-service/${type}/flows`, window.location.origin);
+    url.searchParams.set("id", id);
+
+    const response = await fetch(url, {
+        headers: { Accept: "application/json" },
+        credentials: "include",
+    });
+    if (isGoneStatus(response.status)) return null;
+    if (!response.ok) throw new Error(`Could not read the ${type} flow (${response.status})`);
+    return readJson<KratosFlow>(response);
+}
+
+/**
+ * Submit a flow, merging the caller's values over the ones Kratos sent. Every
+ * outcome is a value, not a throw: a 400 carrying validation errors is an
+ * ordinary step in these flows, not an exception.
+ */
+export async function submitFlow(
+    flow: KratosFlow,
+    values: Record<string, unknown>,
+): Promise<SubmitResult> {
+    let response: Response;
+    try {
+        response = await fetch(flow.ui.action, {
+            method: flow.ui.method || "POST",
+            headers: jsonHeaders,
+            credentials: "include",
+            body: JSON.stringify({ ...collectDefaults(flow), ...values }),
+        });
+    } catch {
+        return { kind: "offline" };
+    }
+
+    if (isGoneStatus(response.status)) return { kind: "expired" };
+
+    // 422 is Kratos asking the browser to go somewhere else — an OIDC hand-off,
+    // or a flow that must continue at a different URL.
+    if (response.status === 422) {
+        const body = await readJson<{ redirect_browser_to?: string }>(response);
+        return body.redirect_browser_to
+            ? { kind: "redirect", to: body.redirect_browser_to }
+            : { kind: "error", message: "The sign-in could not continue." };
+    }
+
+    if (response.status === 400) {
+        return { kind: "flow", flow: await readJson<KratosFlow>(response) };
+    }
+
+    if (!response.ok) {
+        return {
+            kind: "error",
+            message: `Unexpected response from the sign-in service (${response.status})`,
+        };
+    }
+
+    const body = await readJson<{
+        session?: KratosSession;
+        continue_with?: { action: string; flow?: { id: string } }[];
+        redirect_browser_to?: string;
+    }>(response);
+
+    if (body.session) return { kind: "session", session: body.session };
+    if (body.redirect_browser_to) return { kind: "redirect", to: body.redirect_browser_to };
+    // Registration that still owes a verification step reports it here.
+    const verification = body.continue_with?.find((step) => step.action === "show_verification_ui");
+    if (verification?.flow?.id) {
+        return { kind: "redirect", to: `/auth/verify?flow=${verification.flow.id}` };
+    }
+    return { kind: "error", message: "The sign-in could not be completed." };
+}
+
+/** The current session, or null when there isn't one. Never throws for "not signed in". */
+export async function whoami(): Promise<KratosSession | null> {
+    try {
+        const response = await fetch(
+            new URL(`${KRATOS_BASE}/sessions/whoami`, window.location.origin),
+            {
+                headers: { Accept: "application/json" },
+                credentials: "include",
+            },
+        );
+        if (!response.ok) return null;
+        return await readJson<KratosSession>(response);
+    } catch {
+        return null;
+    }
+}
+
+/** Kratos hands out a single-use logout URL rather than accepting a bare POST. */
+export async function logout(): Promise<boolean> {
+    const response = await fetch(
+        new URL(`${KRATOS_BASE}/self-service/logout/browser`, window.location.origin),
+        { headers: { Accept: "application/json" }, credentials: "include" },
+    );
+    if (!response.ok) return false;
+
+    const { logout_url } = await readJson<{ logout_url: string }>(response);
+    const done = await fetch(logout_url, {
+        headers: { Accept: "application/json" },
+        credentials: "include",
+    });
+    return done.ok;
+}
diff --git a/app/src/auth/kratos/fixtures.spec-data.json b/app/src/auth/kratos/fixtures.spec-data.json
new file mode 100644
index 0000000000..504abfad8a
--- /dev/null
+++ b/app/src/auth/kratos/fixtures.spec-data.json
@@ -0,0 +1,299 @@
+{
+    "registrationStart": {
+        "id": "01277cde-55a7-4ccc-ab09-b2bc935e7805",
+        "ui": {
+            "action": "http://localhost:4174/.ory/self-service/registration?flow=01277cde-55a7-4ccc-ab09-b2bc935e7805",
+            "method": "POST",
+            "nodes": [
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "traits.email",
+                        "type": "email",
+                        "required": true,
+                        "autocomplete": "email",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070002,
+                            "text": "Email address",
+                            "type": "info",
+                            "context": {
+                                "title": "Email address"
+                            }
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "traits.name",
+                        "type": "text",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070002,
+                            "text": "Name",
+                            "type": "info",
+                            "context": {
+                                "title": "Name"
+                            }
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "csrf_token",
+                        "type": "hidden",
+                        "value": "0xmd4u96tIMfuvA3i9rHZxKvB7h103EJ7wE+rBsDQKm9QHjcuVQbusQQ7aOS6mG1fXwp85Ad1n8eQPSty5Jhng==",
+                        "required": true,
+                        "disabled": false,
+                        "node_type": "input"
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "profile",
+                    "attributes": {
+                        "name": "method",
+                        "type": "submit",
+                        "value": "profile",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1040001,
+                            "text": "Sign up",
+                            "type": "info"
+                        }
+                    }
+                }
+            ]
+        }
+    },
+    "registrationAwaitingCode": {
+        "id": "01277cde-55a7-4ccc-ab09-b2bc935e7805",
+        "ui": {
+            "action": "http://localhost:4174/.ory/self-service/registration?flow=01277cde-55a7-4ccc-ab09-b2bc935e7805",
+            "method": "POST",
+            "nodes": [
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "traits.email",
+                        "type": "hidden",
+                        "value": "johan@example.com",
+                        "required": true,
+                        "autocomplete": "email",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070002,
+                            "text": "Email address",
+                            "type": "info",
+                            "context": {
+                                "title": "Email address"
+                            }
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "traits.name",
+                        "type": "hidden",
+                        "value": "Johan",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070002,
+                            "text": "Name",
+                            "type": "info",
+                            "context": {
+                                "title": "Name"
+                            }
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "csrf_token",
+                        "type": "hidden",
+                        "value": "5zL2dfPlmNhZ078CAd9k1hnD9f9ocjU9bdPrYoFyfgKJaxNLpcs34YJ5opYY78IEdhDbtI28kkuckiFjUeNfNQ==",
+                        "required": true,
+                        "disabled": false,
+                        "node_type": "input"
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "code",
+                    "attributes": {
+                        "name": "method",
+                        "type": "hidden",
+                        "value": "code",
+                        "disabled": false,
+                        "node_type": "input"
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "code",
+                    "attributes": {
+                        "name": "code",
+                        "type": "text",
+                        "required": true,
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070012,
+                            "text": "Registration code",
+                            "type": "info"
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "code",
+                    "attributes": {
+                        "name": "method",
+                        "type": "submit",
+                        "value": "code",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070009,
+                            "text": "Continue",
+                            "type": "info"
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "code",
+                    "attributes": {
+                        "name": "resend",
+                        "type": "submit",
+                        "value": "code",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070008,
+                            "text": "Resend code",
+                            "type": "info"
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "profile",
+                    "attributes": {
+                        "name": "screen",
+                        "type": "submit",
+                        "value": "credential-selection",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1040008,
+                            "text": "Back",
+                            "type": "info"
+                        }
+                    }
+                }
+            ],
+            "messages": [
+                {
+                    "id": 1040005,
+                    "text": "An email containing a code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and retry the registration.",
+                    "type": "info"
+                }
+            ]
+        }
+    },
+    "loginStart": {
+        "id": "4fedecbb-0ac2-4787-bee9-44a0c3df7363",
+        "ui": {
+            "action": "http://localhost:4174/.ory/self-service/login?flow=4fedecbb-0ac2-4787-bee9-44a0c3df7363",
+            "method": "POST",
+            "nodes": [
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "csrf_token",
+                        "type": "hidden",
+                        "value": "GqbsuGziQrppSRfTkDI9uuan/kn/ms6n1nm2qFlV4+Ab9R+mL/FQ+LQIK2HQprRBlHzM4XnEMgwikcYZZn/Orw==",
+                        "required": true,
+                        "disabled": false,
+                        "node_type": "input"
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "default",
+                    "attributes": {
+                        "name": "identifier",
+                        "type": "text",
+                        "value": "",
+                        "required": true,
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1070002,
+                            "text": "Email address",
+                            "type": "info",
+                            "context": {
+                                "title": "Email address"
+                            }
+                        }
+                    }
+                },
+                {
+                    "type": "input",
+                    "group": "code",
+                    "attributes": {
+                        "name": "method",
+                        "type": "submit",
+                        "value": "code",
+                        "disabled": false,
+                        "node_type": "input"
+                    },
+                    "meta": {
+                        "label": {
+                            "id": 1010015,
+                            "text": "Send sign in code",
+                            "type": "info"
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}
diff --git a/app/src/auth/kratos/nodes.spec.ts b/app/src/auth/kratos/nodes.spec.ts
new file mode 100644
index 0000000000..7aca7ca07c
--- /dev/null
+++ b/app/src/auth/kratos/nodes.spec.ts
@@ -0,0 +1,60 @@
+import { describe, it, expect } from "vitest";
+import fixtures from "./fixtures.spec-data.json";
+import { collectDefaults, firstMessage, isAwaitingCode, oidcProviders, traitValue } from "./nodes";
+import type { KratosFlow } from "./types";
+
+// Recorded from Kratos v1.3.1 driving the real flows, so these assert against
+// what Kratos actually sends rather than what it is documented to send.
+const registrationStart = fixtures.registrationStart as KratosFlow;
+const awaitingCode = fixtures.registrationAwaitingCode as KratosFlow;
+const loginStart = fixtures.loginStart as KratosFlow;
+
+describe("kratos nodes", () => {
+    it("carries the csrf token into the submitted values", () => {
+        const values = collectDefaults(registrationStart);
+        expect(values.csrf_token).toBeTruthy();
+    });
+
+    it("leaves submit buttons out of the payload", () => {
+        // `method` is a submit node on the start flow; sending it would pick a
+        // method the user never pressed.
+        expect(collectDefaults(registrationStart)).not.toHaveProperty("method");
+    });
+
+    it("keeps the traits Kratos echoes back as hidden fields", () => {
+        const values = collectDefaults(awaitingCode);
+        expect(values["traits.email"]).toBe("johan@example.com");
+        expect(values["traits.name"]).toBe("Johan");
+    });
+
+    it("knows the code step from the flow itself", () => {
+        expect(isAwaitingCode(registrationStart)).toBe(false);
+        expect(isAwaitingCode(loginStart)).toBe(false);
+        expect(isAwaitingCode(awaitingCode)).toBe(true);
+    });
+
+    it("reads a trait value back for re-rendering the form", () => {
+        expect(traitValue(awaitingCode, "email")).toBe("johan@example.com");
+        expect(traitValue(registrationStart, "email")).toBe("");
+    });
+
+    it("surfaces the error even when an info message came first", () => {
+        const flow = {
+            ui: {
+                action: "",
+                method: "POST",
+                nodes: [],
+                messages: [
+                    { id: 1040005, text: "A code has been sent.", type: "info" as const },
+                    { id: 4010008, text: "The code is invalid.", type: "error" as const },
+                ],
+            },
+            id: "x",
+        };
+        expect(firstMessage(flow)?.text).toBe("The code is invalid.");
+    });
+
+    it("finds no oidc providers when none are configured", () => {
+        expect(oidcProviders(loginStart)).toEqual([]);
+    });
+});
diff --git a/app/src/auth/kratos/nodes.ts b/app/src/auth/kratos/nodes.ts
new file mode 100644
index 0000000000..86bd0ef422
--- /dev/null
+++ b/app/src/auth/kratos/nodes.ts
@@ -0,0 +1,56 @@
+import type { KratosFlow, KratosMessage, KratosNode } from "./types";
+
+/**
+ * The values Kratos expects back, taken from the flow it just sent. Submitting
+ * from the nodes rather than a hand-written body is what keeps `csrf_token` — and
+ * any field a Kratos upgrade adds — in the payload without a code change here.
+ */
+export function collectDefaults(flow: KratosFlow): Record<string, unknown> {
+    const values: Record<string, unknown> = {};
+    for (const node of flow.ui.nodes) {
+        const { name, value, type, disabled } = node.attributes;
+        if (!name || disabled) continue;
+        // Buttons carry the value that *would* be sent had the user pressed them.
+        if (type === "submit" || type === "button") continue;
+        if (value !== undefined && value !== null && value !== "") values[name] = value;
+    }
+    return values;
+}
+
+export function findNode(flow: KratosFlow, name: string): KratosNode | undefined {
+    return flow.ui.nodes.find((node) => node.attributes.name === name);
+}
+
+/** True once Kratos has sent the code and is waiting for it — the second step of the flow. */
+export function isAwaitingCode(flow: KratosFlow): boolean {
+    const code = findNode(flow, "code");
+    return !!code && code.attributes.type !== "hidden";
+}
+
+/** Messages from the flow and from every node, newest-first is not a thing here — order is Kratos'. */
+export function allMessages(flow: KratosFlow): KratosMessage[] {
+    return [...(flow.ui.messages ?? []), ...flow.ui.nodes.flatMap((node) => node.messages ?? [])];
+}
+
+export function firstMessage(flow: KratosFlow): KratosMessage | undefined {
+    const messages = allMessages(flow);
+    // An error is what the user needs to see, even when an info message precedes it.
+    return messages.find((message) => message.type === "error") ?? messages[0];
+}
+
+/** OIDC providers Kratos offers on this flow, so social sign-in sits beside the email option. */
+export function oidcProviders(flow: KratosFlow): { id: string; label: string }[] {
+    return flow.ui.nodes
+        .filter((node) => node.group === "oidc" && node.attributes.name === "provider")
+        .map((node) => ({
+            id: String(node.attributes.value ?? ""),
+            label: node.meta?.label?.text ?? String(node.attributes.value ?? ""),
+        }))
+        .filter((provider) => provider.id);
+}
+
+/** The traits already entered, so a re-render after an error doesn't blank the form. */
+export function traitValue(flow: KratosFlow, trait: string): string {
+    const node = findNode(flow, `traits.${trait}`);
+    return node?.attributes.value ? String(node.attributes.value) : "";
+}
diff --git a/app/src/auth/kratos/types.ts b/app/src/auth/kratos/types.ts
new file mode 100644
index 0000000000..019399fb29
--- /dev/null
+++ b/app/src/auth/kratos/types.ts
@@ -0,0 +1,56 @@
+/** The slice of Kratos' flow model these screens read. Kratos sends more; nothing here needs it. */
+export type KratosMessage = {
+    id: number;
+    text: string;
+    type: "info" | "error" | "success";
+};
+
+export type KratosNode = {
+    type: string;
+    group: string;
+    attributes: {
+        name?: string;
+        type?: string;
+        value?: unknown;
+        disabled?: boolean;
+        node_type?: string;
+    };
+    messages?: KratosMessage[];
+    meta?: { label?: { id: number; text: string } };
+};
+
+export type KratosFlow = {
+    id: string;
+    expires_at?: string;
+    request_url?: string;
+    ui: {
+        action: string;
+        method: string;
+        nodes: KratosNode[];
+        messages?: KratosMessage[];
+    };
+};
+
+export type KratosSession = {
+    id: string;
+    active?: boolean;
+    identity?: {
+        id: string;
+        traits: { email?: string; name?: string };
+        verifiable_addresses?: { value: string; verified: boolean }[];
+    };
+};
+
+export type FlowType = "login" | "registration" | "verification" | "recovery" | "settings";
+
+/**
+ * Every way a submit can land. `flow` is the ordinary "here are your validation
+ * errors" case — Kratos answers 400 with the same flow, re-rendered.
+ */
+export type SubmitResult =
+    | { kind: "session"; session: KratosSession }
+    | { kind: "flow"; flow: KratosFlow }
+    | { kind: "redirect"; to: string }
+    | { kind: "expired" }
+    | { kind: "offline" }
+    | { kind: "error"; message: string };
diff --git a/app/src/auth/kratos/useKratosAuth.spec.ts b/app/src/auth/kratos/useKratosAuth.spec.ts
new file mode 100644
index 0000000000..9e76bd200f
--- /dev/null
+++ b/app/src/auth/kratos/useKratosAuth.spec.ts
@@ -0,0 +1,137 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { defineComponent } from "vue";
+import fixtures from "./fixtures.spec-data.json";
+import { useKratosAuth } from "./useKratosAuth";
+import { createFlow, submitFlow } from "./client";
+import type { FlowType, KratosFlow, SubmitResult } from "./types";
+
+vi.mock("./client", () => ({
+    createFlow: vi.fn(),
+    fetchFlow: vi.fn(),
+    submitFlow: vi.fn(),
+}));
+
+const registrationStart = fixtures.registrationStart as KratosFlow;
+const awaitingCode = fixtures.registrationAwaitingCode as KratosFlow;
+const loginStart = fixtures.loginStart as KratosFlow;
+
+/** onUnmounted needs a component instance, so the composable is hosted in one. */
+function host(type: FlowType) {
+    let auth!: ReturnType<typeof useKratosAuth>;
+    const wrapper = mount(
+        defineComponent({
+            setup() {
+                auth = useKratosAuth(type);
+                return () => null;
+            },
+        }),
+    );
+    return { auth, wrapper };
+}
+
+const submitted = () => vi.mocked(submitFlow).mock.calls.at(-1)![1];
+
+describe("useKratosAuth", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.mocked(createFlow).mockResolvedValue(registrationStart);
+        vi.mocked(submitFlow).mockResolvedValue({ kind: "flow", flow: awaitingCode });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.clearAllMocks();
+    });
+
+    it("opens on the address step", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        expect(auth.step.value).toBe("identifier");
+    });
+
+    it("submits registration as traits, because that is what the flow asks for", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        auth.email.value = "johan@example.com";
+        auth.name.value = "Johan";
+        await auth.submitIdentifier();
+
+        expect(submitted()).toMatchObject({
+            method: "code",
+            "traits.email": "johan@example.com",
+            "traits.name": "Johan",
+        });
+    });
+
+    it("submits login as an identifier, because that is what that flow asks for", async () => {
+        vi.mocked(createFlow).mockResolvedValue(loginStart);
+        const { auth } = host("login");
+        await auth.start();
+        auth.email.value = "johan@example.com";
+        await auth.submitIdentifier();
+
+        expect(submitted()).toMatchObject({ method: "code", identifier: "johan@example.com" });
+        expect(submitted()).not.toHaveProperty("traits.email");
+    });
+
+    it("moves to the code step and holds the resend behind a countdown", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        await auth.submitIdentifier();
+
+        expect(auth.step.value).toBe("code");
+        expect(auth.resendIn.value).toBe(30);
+
+        await auth.resend();
+        expect(vi.mocked(submitFlow)).toHaveBeenCalledTimes(1);
+
+        vi.advanceTimersByTime(30_000);
+        expect(auth.resendIn.value).toBe(0);
+        await auth.resend();
+        expect(submitted()).toMatchObject({ resend: "code" });
+    });
+
+    it("keeps the address on screen when Kratos re-renders the flow", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        auth.email.value = "johan@example.com";
+        await auth.submitIdentifier();
+
+        // The awaiting-code flow echoes the traits back as hidden nodes.
+        expect(auth.email.value).toBe("johan@example.com");
+    });
+
+    it("ends on the done step once a session comes back", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        vi.mocked(submitFlow).mockResolvedValue({
+            kind: "session",
+            session: { id: "s1", active: true },
+        } as SubmitResult);
+        await auth.submitIdentifier();
+
+        expect(auth.step.value).toBe("done");
+        expect(auth.session.value?.id).toBe("s1");
+    });
+
+    it("shows the expired screen rather than a generic failure", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        vi.mocked(submitFlow).mockResolvedValue({ kind: "expired" });
+        await auth.submitCode();
+
+        expect(auth.step.value).toBe("expired");
+    });
+
+    it("goes back to the address step without abandoning the flow", async () => {
+        const { auth } = host("registration");
+        await auth.start();
+        await auth.submitIdentifier();
+        auth.code.value = "123456";
+
+        auth.changeIdentifier();
+        expect(auth.step.value).toBe("identifier");
+        expect(auth.code.value).toBe("");
+        expect(auth.resendIn.value).toBe(0);
+    });
+});
diff --git a/app/src/auth/kratos/useKratosAuth.ts b/app/src/auth/kratos/useKratosAuth.ts
new file mode 100644
index 0000000000..9506d145e7
--- /dev/null
+++ b/app/src/auth/kratos/useKratosAuth.ts
@@ -0,0 +1,177 @@
+import { computed, onUnmounted, ref, shallowRef } from "vue";
+import { createFlow, fetchFlow, submitFlow } from "./client";
+import { findNode, firstMessage, isAwaitingCode, oidcProviders, traitValue } from "./nodes";
+import type { FlowType, KratosFlow, KratosMessage, KratosSession, SubmitResult } from "./types";
+
+export type AuthStep =
+    | "loading"
+    | "identifier"
+    | "code"
+    | "done"
+    | "expired"
+    | "offline"
+    | "failed";
+
+const RESEND_COOLDOWN_SECONDS = 30;
+
+/** Kratos names the address field differently per flow; the flow itself says which. */
+function identifierField(flow: KratosFlow): string {
+    for (const candidate of ["identifier", "email", "traits.email"]) {
+        if (findNode(flow, candidate)) return candidate;
+    }
+    return "identifier";
+}
+
+/**
+ * Drives one Kratos self-service flow through the designed screens. Holds no
+ * opinion about which screen renders — the caller reads `step` and picks.
+ */
+export function useKratosAuth(type: FlowType) {
+    const flow = shallowRef<KratosFlow | null>(null);
+    const step = ref<AuthStep>("loading");
+    const busy = ref(false);
+    const email = ref("");
+    const name = ref("");
+    const code = ref("");
+    const message = ref<KratosMessage | null>(null);
+    const failure = ref("");
+    const session = ref<KratosSession | null>(null);
+    const resendIn = ref(0);
+
+    let countdown: ReturnType<typeof setInterval> | undefined;
+    const stopCountdown = () => {
+        if (countdown) clearInterval(countdown);
+        countdown = undefined;
+    };
+    function startCountdown() {
+        stopCountdown();
+        resendIn.value = RESEND_COOLDOWN_SECONDS;
+        countdown = setInterval(() => {
+            resendIn.value -= 1;
+            if (resendIn.value <= 0) stopCountdown();
+        }, 1000);
+    }
+    onUnmounted(stopCountdown);
+
+    const providers = computed(() => (flow.value ? oidcProviders(flow.value) : []));
+
+    function adopt(next: KratosFlow) {
+        flow.value = next;
+        message.value = firstMessage(next) ?? null;
+        // Kratos re-sends what it already knows; keep the form filled after an error.
+        email.value = traitValue(next, "email") || email.value;
+        name.value = traitValue(next, "name") || name.value;
+        step.value = isAwaitingCode(next) ? "code" : "identifier";
+    }
+
+    /** Start the flow, or pick up the one Kratos named in `?flow=`. */
+    async function start(flowId?: string, returnTo?: string) {
+        step.value = "loading";
+        try {
+            const existing = flowId ? await fetchFlow(type, flowId) : null;
+            const next = existing ?? (await createFlow(type, returnTo));
+            adopt(next);
+            if (isAwaitingCode(next)) startCountdown();
+        } catch {
+            step.value = navigator.onLine === false ? "offline" : "failed";
+            failure.value = "The sign-in service could not be reached.";
+        }
+    }
+
+    async function send(values: Record<string, unknown>): Promise<SubmitResult | null> {
+        if (!flow.value || busy.value) return null;
+        busy.value = true;
+        try {
+            const result = await submitFlow(flow.value, values);
+            switch (result.kind) {
+                case "session":
+                    session.value = result.session;
+                    step.value = "done";
+                    break;
+                case "flow": {
+                    const wasAwaitingCode = step.value === "code";
+                    adopt(result.flow);
+                    // Reaching the code step for the first time means a code was just sent.
+                    if (step.value === "code" && !wasAwaitingCode) startCountdown();
+                    break;
+                }
+                case "redirect":
+                    window.location.assign(result.to);
+                    break;
+                case "expired":
+                    step.value = "expired";
+                    break;
+                case "offline":
+                    step.value = "offline";
+                    break;
+                case "error":
+                    step.value = "failed";
+                    failure.value = result.message;
+                    break;
+            }
+            return result;
+        } finally {
+            busy.value = false;
+        }
+    }
+
+    /** Step one: hand Kratos the address and have it send a code. */
+    async function submitIdentifier() {
+        if (!flow.value) return;
+        const field = identifierField(flow.value);
+        const values: Record<string, unknown> = { method: "code", [field]: email.value };
+        // Registration is the only flow that carries traits alongside the address.
+        if (type === "registration" && findNode(flow.value, "traits.name")) {
+            values["traits.name"] = name.value;
+        }
+        await send(values);
+    }
+
+    /** Step two: the code itself. */
+    async function submitCode() {
+        if (!flow.value) return;
+        const field = identifierField(flow.value);
+        await send({ method: "code", [field]: email.value, code: code.value });
+    }
+
+    async function resend() {
+        if (!flow.value || resendIn.value > 0) return;
+        const field = identifierField(flow.value);
+        code.value = "";
+        const result = await send({ method: "code", [field]: email.value, resend: "code" });
+        if (result?.kind === "flow") startCountdown();
+    }
+
+    /** Go back to the address step without abandoning the flow. */
+    function changeIdentifier() {
+        code.value = "";
+        message.value = null;
+        stopCountdown();
+        resendIn.value = 0;
+        step.value = "identifier";
+    }
+
+    function chooseProvider(provider: string) {
+        return send({ method: "oidc", provider });
+    }
+
+    return {
+        step,
+        busy,
+        email,
+        name,
+        code,
+        message,
+        failure,
+        session,
+        resendIn,
+        providers,
+        start,
+        submitIdentifier,
+        submitCode,
+        resend,
+        changeIdentifier,
+        chooseProvider,
+        restart: () => start(),
+    };
+}
diff --git a/app/src/components/auth/kratos/EmailIdentifierScreen.vue b/app/src/components/auth/kratos/EmailIdentifierScreen.vue
index cb7355d90f..3f299f1d01 100644
--- a/app/src/components/auth/kratos/EmailIdentifierScreen.vue
+++ b/app/src/components/auth/kratos/EmailIdentifierScreen.vue
@@ -61,5 +61,12 @@ const submitLabel = () =>
                 {{ submitLabel() }}
             </LButton>
         </form>
+
+        <template
+            v-if="$slots.footer"
+            #footer
+        >
+            <slot name="footer" />
+        </template>
     </AuthShell>
 </template>
diff --git a/app/src/pages/auth/KratosAuthPage.vue b/app/src/pages/auth/KratosAuthPage.vue
new file mode 100644
index 0000000000..71592f043e
--- /dev/null
+++ b/app/src/pages/auth/KratosAuthPage.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import SignInMethodsScreen from "@/components/auth/kratos/SignInMethodsScreen.vue";
+import EmailIdentifierScreen from "@/components/auth/kratos/EmailIdentifierScreen.vue";
+import OneTimeCodeScreen from "@/components/auth/kratos/OneTimeCodeScreen.vue";
+import RegistrationScreen from "@/components/auth/kratos/RegistrationScreen.vue";
+import AuthDoneScreen from "@/components/auth/kratos/AuthDoneScreen.vue";
+import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
+import { useKratosAuth } from "@/auth/kratos/useKratosAuth";
+import type { FlowType } from "@/auth/kratos/types";
+
+const props = defineProps<{ flowType: FlowType }>();
+
+const route = useRoute();
+const router = useRouter();
+const {
+    step,
+    busy,
+    email,
+    name,
+    code,
+    message,
+    failure,
+    resendIn,
+    providers,
+    start,
+    submitIdentifier,
+    submitCode,
+    resend,
+    changeIdentifier,
+    chooseProvider,
+    restart,
+} = useKratosAuth(props.flowType);
+
+// Where success lands. Kratos only honours `return_to` values its config allows,
+// so an unlisted one is dropped there rather than trusted here.
+const returnTo = computed(() => (route.query.return_to as string) || "/");
+
+// A login flow that also offers social providers opens on the chooser; an
+// email-only configuration skips it, because a one-item menu is not a choice.
+const showMethods = ref(props.flowType === "login");
+
+onMounted(async () => {
+    await start(route.query.flow as string | undefined, returnTo.value);
+    if (props.flowType !== "login" || !providers.value.length) showMethods.value = false;
+});
+
+const codeMode = computed(() => (props.flowType === "verification" ? "verification" : "login"));
+const identifierMode = computed(() => (props.flowType === "recovery" ? "recovery" : "login"));
+const flowMessage = computed(() => message.value ?? undefined);
+
+const leave = () => router.push(returnTo.value);
+
+/** Back from the address step returns to the chooser when there is one to return to. */
+function backFromIdentifier() {
+    if (providers.value.length) {
+        showMethods.value = true;
+        return;
+    }
+    leave();
+}
+</script>
+
+<template>
+    <div class="flex min-h-screen items-center justify-center bg-white p-4 dark:bg-slate-900">
+        <LoadingSpinner v-if="step === 'loading'" />
+
+        <SignInMethodsScreen
+            v-else-if="showMethods && step === 'identifier'"
+            :providers="providers"
+            :message="flowMessage"
+            @email="showMethods = false"
+            @provider="chooseProvider"
+            @guest="leave"
+        />
+
+        <RegistrationScreen
+            v-else-if="step === 'identifier' && flowType === 'registration'"
+            v-model:email="email"
+            v-model:name="name"
+            :message="flowMessage"
+            :busy="busy"
+            @submit="submitIdentifier"
+            @sign-in="router.push('/auth/login')"
+            @back="leave"
+        />
+
+        <EmailIdentifierScreen
+            v-else-if="step === 'identifier'"
+            v-model="email"
+            :mode="identifierMode"
+            :message="flowMessage"
+            :busy="busy"
+            @submit="submitIdentifier"
+            @back="backFromIdentifier"
+        >
+            <template
+                v-if="flowType === 'login'"
+                #footer
+            >
+                <button
+                    type="button"
+                    class="w-full text-center text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
+                    @click="router.push('/auth/signup')"
+                >
+                    Create an account
+                </button>
+            </template>
+        </EmailIdentifierScreen>
+
+        <OneTimeCodeScreen
+            v-else-if="step === 'code'"
+            v-model="code"
+            :email="email"
+            :mode="codeMode"
+            :message="flowMessage"
+            :busy="busy"
+            :resend-in="resendIn"
+            @submit="submitCode"
+            @resend="resend"
+            @change-email="changeIdentifier"
+            @back="changeIdentifier"
+        />
+
+        <AuthDoneScreen
+            v-else-if="step === 'done'"
+            @continue="leave"
+        />
+
+        <AuthErrorScreen
+            v-else-if="step === 'expired'"
+            kind="expired"
+            @restart="restart"
+            @back="leave"
+        />
+
+        <AuthErrorScreen
+            v-else-if="step === 'offline'"
+            kind="offline"
+            @restart="restart"
+            @back="leave"
+        />
+
+        <AuthErrorScreen
+            v-else
+            kind="generic"
+            :detail="failure"
+            @restart="restart"
+            @back="leave"
+        />
+    </div>
+</template>
diff --git a/app/src/router/router.spec.ts b/app/src/router/router.spec.ts
index b6f190b338..236d6fd93a 100644
--- a/app/src/router/router.spec.ts
+++ b/app/src/router/router.spec.ts
@@ -4,8 +4,17 @@ import { flushPromises } from "@vue/test-utils";
 
 describe("Router", () => {
     describe("Router Configuration", () => {
-        it("should have the correct number of routes", () => {
-            expect(router.getRoutes()).toHaveLength(10);
+        it("should have the correct number of shipped routes", () => {
+            // Dev-only routes (the design canvas, the Kratos screens) are marked
+            // devOnly and ship in no build, so they don't count towards this.
+            const shipped = router.getRoutes().filter((route) => !route.meta.devOnly);
+            expect(shipped).toHaveLength(10);
+        });
+
+        it("should not register the Kratos routes without VITE_KRATOS_URL", () => {
+            expect(router.getRoutes().filter((route) => route.meta.devOnly)).not.toContainEqual(
+                expect.objectContaining({ path: "/auth/login" }),
+            );
         });
 
         it("should have home route configured correctly", () => {
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index 5c1575da1b..f065dc8701 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -11,6 +11,33 @@ const BookmarksPage = () => import("@/pages/BookmarksPage.vue");
 const SingleContent = () => import("@/pages/SingleContent/SingleContent.vue");
 const NotFoundPage = () => import("@/pages/NotFoundPage.vue");
 const AuthDesignPage = () => import("@/pages/design/AuthDesignPage.vue");
+const KratosAuthPage = () => import("@/pages/auth/KratosAuthPage.vue");
+
+/**
+ * Kratos self-service screens. Registered only when VITE_KRATOS_URL is set, so
+ * the proof of concept is inert everywhere it hasn't been switched on. The paths
+ * must match the `ui_url`s in the Kratos config.
+ */
+const kratosRoutes: RouteRecordRaw[] = import.meta.env.VITE_KRATOS_URL
+    ? (
+          [
+              ["/auth/login", "login"],
+              ["/auth/signup", "registration"],
+              ["/auth/verify", "verification"],
+              ["/auth/recovery", "recovery"],
+              ["/auth/account", "settings"],
+          ] as const
+      ).map(([path, flowType]) => ({
+          path,
+          component: KratosAuthPage,
+          name: `kratos-${flowType}`,
+          props: { flowType },
+          meta: {
+              analyticsIgnore: true,
+              devOnly: true,
+          },
+      }))
+    : [];
 
 /**
  * Design canvas for the Kratos auth screens. Development only — it renders every
@@ -24,6 +51,7 @@ const designRoutes: RouteRecordRaw[] = import.meta.env.DEV
               name: "design-auth",
               meta: {
                   analyticsIgnore: true,
+                  devOnly: true,
               },
           },
       ]
@@ -96,6 +124,7 @@ export const routes: RouteRecordRaw[] = [
         },
     },
     ...designRoutes,
+    ...kratosRoutes,
     // Note that this route should always come after all defined routes,
     // to prevent wrongly configured slugs from taking over pages
     {
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 0532699592..0a86ed7b8a 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -114,6 +114,17 @@ export default defineConfig({
         watch: {
             ignored: ["dist/**", "dist-web/**", "**/dist/**", "**/dist-web/**"],
         },
+        // Kratos has to answer on the app's own origin or the browser drops its
+        // session and CSRF cookies as cross-site. This proxy is the dev stand-in
+        // for the reverse proxy production needs; Kratos' `serve.public.base_url`
+        // names the same /.ory prefix so the URLs it hands back stay same-origin.
+        proxy: {
+            "/.ory": {
+                target: env.KRATOS_PUBLIC_URL || "http://127.0.0.1:4433",
+                changeOrigin: false,
+                rewrite: (path: string) => path.replace(/^\/\.ory/, ""),
+            },
+        },
     },
     build: {
         target: "es2015",
diff --git a/docs/temp_kratos-guest-auth-ui.md b/docs/temp_kratos-guest-auth-ui.md
index 2f2d6e987f..6ab9ac5d3b 100644
--- a/docs/temp_kratos-guest-auth-ui.md
+++ b/docs/temp_kratos-guest-auth-ui.md
@@ -109,3 +109,67 @@ component. The table above doubles as the string inventory for whoever adds the
 - Is a guest's bookmark set meant to sync per user once they have an account? The upgrade
   screen promises "everything saved on this device comes with you", which is true today only
   because nothing moves. It becomes a real promise the moment bookmarks sync.
+
+## Proof of concept
+
+The screens are wired to a real Kratos. `kratos/README.md` has the run
+instructions; the short version is `docker compose -f kratos/docker-compose.yml up -d`
+plus `VITE_KRATOS_URL="/.ory"` in `app/.env`. Without that variable the `/auth/*`
+routes are not registered at all, so the PoC is inert wherever it hasn't been
+switched on.
+
+What is implemented:
+
+- `app/src/auth/kratos/client.ts` — the flow API over `fetch`, no SDK. Every
+  outcome is a value rather than a throw, because a 400 carrying validation
+  errors is an ordinary step in these flows.
+- `app/src/auth/kratos/nodes.ts` — builds the submitted payload **from the flow's
+  own `ui.nodes`**. That is what keeps `csrf_token`, echoed traits, and any field
+  a Kratos upgrade adds in the body without a code change here.
+- `app/src/auth/kratos/useKratosAuth.ts` — the state machine behind the screens:
+  address step → code step → session, plus resend cooldown, flow expiry and the
+  offline case.
+- `app/src/pages/auth/KratosAuthPage.vue` — picks which designed screen renders
+  for the current step. One component serves login, signup, verification and
+  recovery, because Kratos models them as the same two-step shape.
+
+### What was verified against Kratos v1.3.1, not assumed
+
+- **Sign-up works in one method.** Posting `method: "code"` with traits to the
+  registration flow sends the code directly — the two-step `profile` screen newer
+  Kratos versions show by default is not on the path. Second post with the code
+  returns `200` and an active session, because registration runs the `session` hook.
+- **Login is the same shape** with `identifier` instead of `traits.email`. The
+  flow itself says which field it wants, so `identifierField()` reads it off the
+  nodes rather than hard-coding a table.
+- **Flat dotted keys are accepted as JSON.** `{"traits.email": "…"}` populates the
+  trait — so the payload built straight from node names needs no un-flattening.
+- **The proxy topology holds.** Through `/.ory` the CSRF cookie comes back as
+  `Domain=localhost; SameSite=Lax` and `ui.action` points at the app's own origin.
+
+The recorded flows are checked in as `fixtures.spec-data.json` and the specs
+assert against them, so the tests describe what Kratos actually sends.
+
+## The gap this PoC does not close
+
+**A Kratos session does not authenticate anything to the Luminary API.** Today
+`AuthGuard` and `socketio.ts` validate a JWT against the JWKS of the provider named
+in `x-auth-provider-id`. Kratos issues a cookie session, not a JWT. So a user who
+completes this flow is signed in to Kratos and still anonymous to Luminary — which
+is fine for the PoC (guests are anonymous by design) and blocks nothing that guests
+can already do.
+
+Two ways to close it, when it matters:
+
+1. **Introspect in the API.** A new branch in `AuthIdentityService` that calls
+   Kratos' `/sessions/whoami` with the forwarded cookie, caches the answer briefly,
+   and maps the identity onto groups through `AutoGroupMappings` under a synthetic
+   provider id. No new infrastructure, no new crypto; costs one cacheable hop, and
+   the socket handshake needs the cookie rather than a bearer token.
+2. **Put Ory Oathkeeper in front.** It converts the session into a JWT the existing
+   JWKS path already validates, so the API changes not at all — at the price of
+   another service to run and configure.
+
+For a self-hosted deployment I'd take (1): it keeps the moving parts in a codebase
+we own, and the identity→groups mapping it needs is a thing `AuthIdentityService`
+already does. Either way it is a deliberate second step, not an oversight in this one.
diff --git a/kratos/README.md b/kratos/README.md
new file mode 100644
index 0000000000..d4c905dcd5
--- /dev/null
+++ b/kratos/README.md
@@ -0,0 +1,42 @@
+# Kratos — guest auth proof of concept
+
+Development only. Nothing here is deployed, and nothing in `api/` depends on it.
+
+## Run it
+
+```sh
+docker compose -f kratos/docker-compose.yml up -d
+```
+
+Then set `VITE_KRATOS_URL="/.ory"` in `app/.env` and start the app as usual
+(`npm run dev` in `app/`). The routes appear only when that variable is set.
+
+- `/auth/login` — sign in with an emailed one-time code
+- `/auth/signup` — create an account with the same code method
+- `/auth/verify`, `/auth/recovery`, `/auth/account`
+- **Codes arrive in Mailpit: http://localhost:8025** — no mail leaves the machine.
+
+## Why the /.ory proxy
+
+Kratos' `serve.public.base_url` is the _app's_ origin plus `/.ory`, not Kratos'
+own address, and Vite proxies that prefix to the container. Every URL Kratos
+hands the browser is therefore same-site with the app, so the session and CSRF
+cookies survive. Production wants the same shape from a real reverse proxy —
+that is the whole reason the screens live in the app rather than in a separate
+self-service UI.
+
+## What is configured
+
+- `code.passwordless_enabled: true` — one setting turns the emailed code into a
+  login method _and_ a registration method. `password` and `link` are off.
+- `identity.schema.json` — a `guest` identity: `email` (required, the code
+  identifier, verifiable) and an optional `name`.
+- Registration runs the `session` hook, so signing up ends signed in.
+- SQLite on a named volume, so identities survive `docker compose down`. Use
+  `down -v` to start from nothing.
+
+## Reset
+
+```sh
+docker compose -f kratos/docker-compose.yml down -v
+```
diff --git a/kratos/config/identity.schema.json b/kratos/config/identity.schema.json
new file mode 100644
index 0000000000..31e26cf156
--- /dev/null
+++ b/kratos/config/identity.schema.json
@@ -0,0 +1,39 @@
+{
+    "$id": "https://luminary.bcc.no/schemas/guest.schema.json",
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "title": "Luminary guest",
+    "type": "object",
+    "properties": {
+        "traits": {
+            "type": "object",
+            "properties": {
+                "email": {
+                    "type": "string",
+                    "format": "email",
+                    "title": "Email address",
+                    "minLength": 3,
+                    "ory.sh/kratos": {
+                        "credentials": {
+                            "code": {
+                                "identifier": true,
+                                "via": "email"
+                            }
+                        },
+                        "verification": {
+                            "via": "email"
+                        },
+                        "recovery": {
+                            "via": "email"
+                        }
+                    }
+                },
+                "name": {
+                    "type": "string",
+                    "title": "Name"
+                }
+            },
+            "required": ["email"],
+            "additionalProperties": false
+        }
+    }
+}
diff --git a/kratos/config/kratos.yml b/kratos/config/kratos.yml
new file mode 100644
index 0000000000..b53f768add
--- /dev/null
+++ b/kratos/config/kratos.yml
@@ -0,0 +1,113 @@
+# Kratos configuration for the guest-auth proof of concept. Development only.
+#
+# `serve.public.base_url` is the app's own origin plus the proxy prefix, not
+# Kratos' own address: every URL Kratos hands the browser (`ui.action`, redirects)
+# has to be same-site with the app or the session and CSRF cookies are dropped.
+# Vite proxies /.ory to this container — the same shape production should use.
+version: v1.3.1
+
+dsn: sqlite:///var/lib/sqlite/db.sqlite?_fk=true
+
+serve:
+    public:
+        base_url: http://localhost:4174/.ory/
+    admin:
+        base_url: http://kratos:4434/
+
+cookies:
+    domain: localhost
+    same_site: Lax
+
+session:
+    lifespan: 720h
+    cookie:
+        domain: localhost
+        same_site: Lax
+
+selfservice:
+    default_browser_return_url: http://localhost:4174/
+    allowed_return_urls:
+        - http://localhost:4174
+
+    methods:
+        # One decision, both flows: `passwordless_enabled` turns the emailed
+        # one-time code into a login method as well as a registration method.
+        code:
+            enabled: true
+            passwordless_enabled: true
+            config:
+                lifespan: 15m
+        password:
+            enabled: false
+        link:
+            enabled: false
+
+    flows:
+        error:
+            ui_url: http://localhost:4174/auth/error
+
+        login:
+            ui_url: http://localhost:4174/auth/login
+            lifespan: 30m
+
+        registration:
+            ui_url: http://localhost:4174/auth/signup
+            lifespan: 30m
+            after:
+                code:
+                    hooks:
+                        # Sign the user in as soon as they register, so the PoC
+                        # ends on a session rather than on "now go and log in".
+                        - hook: session
+
+        verification:
+            enabled: true
+            ui_url: http://localhost:4174/auth/verify
+            use: code
+            after:
+                default_browser_return_url: http://localhost:4174/
+
+        recovery:
+            enabled: true
+            ui_url: http://localhost:4174/auth/recovery
+            use: code
+
+        settings:
+            ui_url: http://localhost:4174/auth/account
+            privileged_session_max_age: 15m
+
+        logout:
+            after:
+                default_browser_return_url: http://localhost:4174/
+
+identity:
+    default_schema_id: guest
+    schemas:
+        - id: guest
+          url: file:///etc/config/kratos/identity.schema.json
+
+courier:
+    smtp:
+        # Mailpit, not a real relay — codes are read from its web UI on :8025.
+        connection_uri: smtp://mailpit:1025/?disable_starttls=true
+        from_address: no-reply@luminary.local
+        from_name: Luminary
+
+log:
+    level: debug
+    format: text
+    leak_sensitive_values: true
+
+secrets:
+    cookie:
+        - PLEASE-CHANGE-ME-I-AM-A-DEV-ONLY-SECRET
+    cipher:
+        - 32-LONG-SECRET-NOT-SECURE-AT-ALL
+
+ciphers:
+    algorithm: xchacha20-poly1305
+
+hashers:
+    algorithm: bcrypt
+    bcrypt:
+        cost: 8
diff --git a/kratos/docker-compose.yml b/kratos/docker-compose.yml
new file mode 100644
index 0000000000..cb87075b82
--- /dev/null
+++ b/kratos/docker-compose.yml
@@ -0,0 +1,35 @@
+# Local Kratos for the guest-auth PoC. Nothing here is deployed.
+#   docker compose -f kratos/docker-compose.yml up -d
+# Kratos public API :4433 (reached through the app's /.ory proxy), admin :4434,
+# Mailpit UI http://localhost:8025 — that is where the one-time codes arrive.
+services:
+    kratos-migrate:
+        image: oryd/kratos:v1.3.1
+        volumes:
+            - kratos-sqlite:/var/lib/sqlite
+            - ./config:/etc/config/kratos
+        command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
+        restart: on-failure
+
+    kratos:
+        image: oryd/kratos:v1.3.1
+        depends_on:
+            kratos-migrate:
+                condition: service_completed_successfully
+        ports:
+            - "4433:4433"
+            - "4434:4434"
+        volumes:
+            - kratos-sqlite:/var/lib/sqlite
+            - ./config:/etc/config/kratos
+        command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
+        restart: unless-stopped
+
+    mailpit:
+        image: axllent/mailpit:latest
+        ports:
+            - "8025:8025"
+        restart: unless-stopped
+
+volumes:
+    kratos-sqlite:

From 78d8d16c3ac59e1f3ff239ec24e4e1d90fe8873a Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:19:41 +0200
Subject: [PATCH 03/15] feat(app): an account screen for the Kratos proof of
 concept
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/auth/account was routed at the settings flow, which renders as an
address prompt — the settings flow has none of the two-step shape the
other screens are built around. It reads the session directly instead,
so it is a page of its own rather than another flowType.

Kratos leaves the current session out of GET /sessions by design; it
comes from whoami, which carries the same devices and authenticated_at
fields. The screen joins the two and puts this device first, or the
"this device" row never appears.

Identity deletion is not part of Kratos' self-service API, so the screen
takes a canDelete prop and the PoC hides the offer rather than showing
one that cannot work.

The route-count spec now asserts that dev-only routes are flagged rather
than counting the whole table, which depended on whether the PoC
happened to be switched on in the environment running the tests.
---
 app/src/auth/kratos/client.ts                 |  35 +++++-
 app/src/auth/kratos/types.ts                  |   6 ++
 .../auth/kratos/AccountSettingsScreen.vue     |   4 +
 app/src/pages/auth/KratosAccountPage.vue      | 101 ++++++++++++++++++
 app/src/router/router.spec.ts                 |  15 ++-
 app/src/router/routes.ts                      |  15 ++-
 6 files changed, 168 insertions(+), 8 deletions(-)
 create mode 100644 app/src/pages/auth/KratosAccountPage.vue

diff --git a/app/src/auth/kratos/client.ts b/app/src/auth/kratos/client.ts
index 092c1d8209..c65b5a3aef 100644
--- a/app/src/auth/kratos/client.ts
+++ b/app/src/auth/kratos/client.ts
@@ -1,4 +1,10 @@
-import type { FlowType, KratosFlow, KratosSession, SubmitResult } from "./types";
+import type {
+    FlowType,
+    KratosFlow,
+    KratosSession,
+    KratosSessionListEntry,
+    SubmitResult,
+} from "./types";
 import { collectDefaults } from "./nodes";
 
 /**
@@ -108,7 +114,7 @@ export async function submitFlow(
 }
 
 /** The current session, or null when there isn't one. Never throws for "not signed in". */
-export async function whoami(): Promise<KratosSession | null> {
+export async function whoami(): Promise<KratosSessionListEntry | null> {
     try {
         const response = await fetch(
             new URL(`${KRATOS_BASE}/sessions/whoami`, window.location.origin),
@@ -118,12 +124,35 @@ export async function whoami(): Promise<KratosSession | null> {
             },
         );
         if (!response.ok) return null;
-        return await readJson<KratosSession>(response);
+        return await readJson<KratosSessionListEntry>(response);
     } catch {
         return null;
     }
 }
 
+/**
+ * The identity's *other* sessions. Kratos deliberately leaves the current one
+ * out — that comes from `whoami` — so the account screen joins the two.
+ */
+export async function listOtherSessions(): Promise<KratosSessionListEntry[]> {
+    const response = await fetch(new URL(`${KRATOS_BASE}/sessions`, window.location.origin), {
+        headers: { Accept: "application/json" },
+        credentials: "include",
+    });
+    if (!response.ok) return [];
+    return readJson<KratosSessionListEntry[]>(response);
+}
+
+/** Ends every session except this one. Kratos models it as deleting the others. */
+export async function signOutOtherSessions(): Promise<boolean> {
+    const response = await fetch(new URL(`${KRATOS_BASE}/sessions`, window.location.origin), {
+        method: "DELETE",
+        headers: { Accept: "application/json" },
+        credentials: "include",
+    });
+    return response.ok;
+}
+
 /** Kratos hands out a single-use logout URL rather than accepting a bare POST. */
 export async function logout(): Promise<boolean> {
     const response = await fetch(
diff --git a/app/src/auth/kratos/types.ts b/app/src/auth/kratos/types.ts
index 019399fb29..d79f4e0945 100644
--- a/app/src/auth/kratos/types.ts
+++ b/app/src/auth/kratos/types.ts
@@ -41,6 +41,12 @@ export type KratosSession = {
     };
 };
 
+/** A row of `GET /sessions` — the same session, plus the device that opened it. */
+export type KratosSessionListEntry = KratosSession & {
+    authenticated_at?: string;
+    devices?: { id: string; ip_address?: string; user_agent?: string; location?: string }[];
+};
+
 export type FlowType = "login" | "registration" | "verification" | "recovery" | "settings";
 
 /**
diff --git a/app/src/components/auth/kratos/AccountSettingsScreen.vue b/app/src/components/auth/kratos/AccountSettingsScreen.vue
index 44971f013d..29d83818ac 100644
--- a/app/src/components/auth/kratos/AccountSettingsScreen.vue
+++ b/app/src/components/auth/kratos/AccountSettingsScreen.vue
@@ -22,11 +22,14 @@ type Props = {
     emailVerified?: boolean;
     methods?: LinkedMethod[];
     sessions?: ActiveSession[];
+    /** Kratos has no self-service identity deletion, so hosts that lack it hide the offer. */
+    canDelete?: boolean;
 };
 withDefaults(defineProps<Props>(), {
     emailVerified: true,
     methods: () => [],
     sessions: () => [],
+    canDelete: true,
 });
 defineEmits<{
     changeEmail: [];
@@ -153,6 +156,7 @@ const c = useAuthCopy();
         </section>
 
         <button
+            v-if="canDelete"
             type="button"
             class="self-start text-sm text-red-600 underline underline-offset-2 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
             @click="$emit('deleteAccount')"
diff --git a/app/src/pages/auth/KratosAccountPage.vue b/app/src/pages/auth/KratosAccountPage.vue
new file mode 100644
index 0000000000..6658a92295
--- /dev/null
+++ b/app/src/pages/auth/KratosAccountPage.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import LButton from "@/components/button/LButton.vue";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import AccountSettingsScreen from "@/components/auth/kratos/AccountSettingsScreen.vue";
+import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
+import type { ActiveSession } from "@/components/auth/kratos/AccountSettingsScreen.vue";
+import { listOtherSessions, logout, signOutOtherSessions, whoami } from "@/auth/kratos/client";
+import type { KratosSessionListEntry } from "@/auth/kratos/types";
+
+const router = useRouter();
+const loading = ref(true);
+const session = ref<KratosSessionListEntry | null>(null);
+const others = ref<KratosSessionListEntry[]>([]);
+
+const email = computed(() => session.value?.identity?.traits.email ?? "");
+const verified = computed(
+    () => session.value?.identity?.verifiable_addresses?.some((a) => a.verified) ?? false,
+);
+
+/** A user agent is not a device name; this is only good enough to tell rows apart. */
+function deviceName(agent?: string): string {
+    if (!agent) return "Unknown device";
+    for (const needle of ["iPhone", "iPad", "Android", "Macintosh", "Windows", "Linux"]) {
+        if (agent.includes(needle)) return needle === "Macintosh" ? "Mac" : needle;
+    }
+    return agent.split("/")[0] || "Unknown device";
+}
+
+function toRow(entry: KratosSessionListEntry, current: boolean): ActiveSession {
+    const device = entry.devices?.[0];
+    return {
+        id: entry.id,
+        device: deviceName(device?.user_agent),
+        location: device?.ip_address?.split(":")[0],
+        lastSeen: entry.authenticated_at?.slice(0, 16).replace("T", " ") ?? "",
+        current,
+    };
+}
+
+// This device first: Kratos never includes the current session in the list.
+const rows = computed<ActiveSession[]>(() => [
+    ...(session.value ? [toRow(session.value, true)] : []),
+    ...others.value.map((entry) => toRow(entry, false)),
+]);
+
+async function load() {
+    loading.value = true;
+    session.value = await whoami();
+    others.value = session.value ? await listOtherSessions() : [];
+    loading.value = false;
+}
+onMounted(load);
+
+async function onSignOutOthers() {
+    await signOutOtherSessions();
+    await load();
+}
+
+async function onSignOut() {
+    await logout();
+    router.push("/auth/login");
+}
+</script>
+
+<template>
+    <div
+        class="flex min-h-screen flex-col items-center justify-center gap-4 bg-white p-4 dark:bg-slate-900"
+    >
+        <LoadingSpinner v-if="loading" />
+
+        <AuthErrorScreen
+            v-else-if="!session"
+            kind="generic"
+            detail="You are not signed in."
+            @restart="router.push('/auth/login')"
+            @back="router.push('/')"
+        />
+
+        <template v-else>
+            <AccountSettingsScreen
+                :email="email"
+                :email-verified="verified"
+                :sessions="rows"
+                :can-delete="false"
+                @sign-out-others="onSignOutOthers"
+            />
+            <div class="w-full max-w-md">
+                <LButton
+                    variant="secondary"
+                    size="lg"
+                    class="w-full"
+                    @click="onSignOut"
+                >
+                    Sign out
+                </LButton>
+            </div>
+        </template>
+    </div>
+</template>
diff --git a/app/src/router/router.spec.ts b/app/src/router/router.spec.ts
index 236d6fd93a..3e31ccf9c7 100644
--- a/app/src/router/router.spec.ts
+++ b/app/src/router/router.spec.ts
@@ -11,10 +11,17 @@ describe("Router", () => {
             expect(shipped).toHaveLength(10);
         });
 
-        it("should not register the Kratos routes without VITE_KRATOS_URL", () => {
-            expect(router.getRoutes().filter((route) => route.meta.devOnly)).not.toContainEqual(
-                expect.objectContaining({ path: "/auth/login" }),
-            );
+        it("should mark every development-only route as such", () => {
+            // Whether these are registered depends on the environment; that they
+            // are all flagged devOnly is what keeps them out of the shipped count.
+            const developmentOnly = router
+                .getRoutes()
+                .filter(
+                    (route) => route.path.startsWith("/auth/") || route.path.startsWith("/design/"),
+                );
+            for (const route of developmentOnly) {
+                expect(route.meta.devOnly).toBe(true);
+            }
         });
 
         it("should have home route configured correctly", () => {
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index f065dc8701..7f71fe2f7d 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -12,6 +12,7 @@ const SingleContent = () => import("@/pages/SingleContent/SingleContent.vue");
 const NotFoundPage = () => import("@/pages/NotFoundPage.vue");
 const AuthDesignPage = () => import("@/pages/design/AuthDesignPage.vue");
 const KratosAuthPage = () => import("@/pages/auth/KratosAuthPage.vue");
+const KratosAccountPage = () => import("@/pages/auth/KratosAccountPage.vue");
 
 /**
  * Kratos self-service screens. Registered only when VITE_KRATOS_URL is set, so
@@ -25,7 +26,6 @@ const kratosRoutes: RouteRecordRaw[] = import.meta.env.VITE_KRATOS_URL
               ["/auth/signup", "registration"],
               ["/auth/verify", "verification"],
               ["/auth/recovery", "recovery"],
-              ["/auth/account", "settings"],
           ] as const
       ).map(([path, flowType]) => ({
           path,
@@ -39,6 +39,19 @@ const kratosRoutes: RouteRecordRaw[] = import.meta.env.VITE_KRATOS_URL
       }))
     : [];
 
+/**
+ * The account screen reads the session directly rather than driving a flow, so
+ * it is a page of its own rather than another `flowType`.
+ */
+if (import.meta.env.VITE_KRATOS_URL) {
+    kratosRoutes.push({
+        path: "/auth/account",
+        component: KratosAccountPage,
+        name: "kratos-account",
+        meta: { analyticsIgnore: true, devOnly: true },
+    });
+}
+
 /**
  * Design canvas for the Kratos auth screens. Development only — it renders every
  * screen and state side by side and ships in no build.

From 8bafadaee26ddd5ef17978be4387298b1d5dfb6d Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:37:58 +0200
Subject: [PATCH 04/15] feat(app): reach the Kratos screens from the real login
 modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The screens existed but nothing led to them. The provider modal now
offers "Continue with email" beside the configured providers, which
routes to /auth/login carrying the current path as return_to rather than
going through loginWithProvider — Kratos is not an OIDC provider, and an
AuthProvider doc pointed at it would redirect to an /authorize endpoint
that does not exist.

The entry counts as a sign-in method, so the "no methods available"
state no longer shows when it is the only one.

A Kratos session is held separately from the OIDC one and surfaced as
its own profile-menu entry linking to /auth/account. Conflating them
would have the app claim an authority it does not have: the Luminary API
honours the OIDC token and knows nothing about a Kratos session.

All of it is behind VITE_KRATOS_URL, so an environment without the proof
of concept sees exactly what it saw before.

The modal's specs now drive that flag explicitly instead of inheriting
whatever the developer's own .env happens to say.
---
 app/src/App.vue                               |  4 ++
 app/src/auth/kratos/session.ts                | 29 ++++++++
 app/src/components/auth/kratos/authCopy.ts    |  2 +
 .../AuthProviderSelectionModal.spec.ts        | 72 ++++++++++++++++---
 .../AuthProviderSelectionModal.vue            | 41 ++++++++++-
 app/src/components/navigation/ProfileMenu.vue | 49 +++++++++++--
 app/src/pages/auth/KratosAccountPage.vue      | 10 +--
 7 files changed, 185 insertions(+), 22 deletions(-)
 create mode 100644 app/src/auth/kratos/session.ts

diff --git a/app/src/App.vue b/app/src/App.vue
index 26276b4d1a..b3c6c92f27 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -22,6 +22,7 @@ import AffinityDebugOverlay from "@/components/debug/AffinityDebugOverlay.vue";
 import { useAuthWithPrivacyPolicy } from "@/composables/useAuthWithPrivacyPolicy";
 import { showProviderSelectionModal } from "@/auth";
 import AuthProviderSelectionModal from "@/components/authProvider/AuthProviderSelectionModal.vue";
+import { refreshKratosSession } from "@/auth/kratos/session";
 import { useI18n } from "vue-i18n";
 import defaultLogo from "@/assets/logo.svg?url";
 import { usePwaUpdate } from "@/composables/usePwaUpdate";
@@ -159,6 +160,9 @@ onMounted(() => {
     // auth-scoped response cache, so it's never the wrong (public) content. No-op when
     // the gate never engaged (logged-out reload, or the normal SPA build).
     document.documentElement.classList.remove("ssg-auth-pending");
+
+    // No-op unless the Kratos proof of concept is switched on.
+    refreshKratosSession();
 });
 
 onErrorCaptured((err) => {
diff --git a/app/src/auth/kratos/session.ts b/app/src/auth/kratos/session.ts
new file mode 100644
index 0000000000..cd36daa025
--- /dev/null
+++ b/app/src/auth/kratos/session.ts
@@ -0,0 +1,29 @@
+import { computed, ref } from "vue";
+import { isKratosEnabled, logout, whoami } from "./client";
+import type { KratosSessionListEntry } from "./types";
+
+/**
+ * The Kratos session, when the proof of concept is switched on. Null is the
+ * ordinary guest state, not an error — and it stays null while VITE_KRATOS_URL
+ * is unset, so nothing that reads this changes behaviour with Kratos absent.
+ *
+ * Deliberately separate from `@/auth`'s OIDC session: a Kratos session proves
+ * nothing to the Luminary API, so conflating the two would have the app claim
+ * an authority it does not have.
+ */
+export const kratosSession = ref<KratosSessionListEntry | null>(null);
+
+export const kratosIdentityLabel = computed(() => {
+    const traits = kratosSession.value?.identity?.traits;
+    return traits?.name || traits?.email || "";
+});
+
+export async function refreshKratosSession(): Promise<void> {
+    if (!isKratosEnabled()) return;
+    kratosSession.value = await whoami();
+}
+
+export async function signOutKratos(): Promise<void> {
+    await logout();
+    kratosSession.value = null;
+}
diff --git a/app/src/components/auth/kratos/authCopy.ts b/app/src/components/auth/kratos/authCopy.ts
index 64f21192bc..9c5d4d9825 100644
--- a/app/src/components/auth/kratos/authCopy.ts
+++ b/app/src/components/auth/kratos/authCopy.ts
@@ -76,6 +76,8 @@ export const authCopy = {
     "auth.guest.sign_in": "Sign in",
     "auth.guest.continue": "Continue without an account",
     "auth.guest.badge": "Guest",
+    "auth.guest.signed_in_as": "Signed in as {name}",
+    "auth.guest.sign_out": "Sign out of your guest account",
 
     "auth.gate.bookmarks_title": "Save this for later",
     "auth.gate.bookmarks_body":
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
index e095cec981..1ff418aea0 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
@@ -8,11 +8,14 @@ import AuthProviderSelectionModal from "./AuthProviderSelectionModal.vue";
 
 vi.mock("vue-i18n", () => ({
     useI18n: () => ({
+        // `te` is false throughout: the Kratos entry's copy has no translation
+        // here, so it renders its English default.
+        te: () => false,
         t: (key: string) =>
             (
-                {
+                ({
                     "login.provider.button": "Sign in with Example Org",
-                } as Record<string, string>
+                }) as Record<string, string>
             )[key] ?? key,
     }),
 }));
@@ -22,6 +25,13 @@ vi.mock("@/auth", () => ({
     showProviderSelectionModal: ref(true),
 }));
 
+// Whether the Kratos entry is offered depends on an environment variable, which
+// would otherwise make these assertions depend on the developer's own .env.
+const kratosEnabled = { value: false };
+vi.mock("@/auth/kratos/client", () => ({
+    isKratosEnabled: () => kratosEnabled.value,
+}));
+
 vi.mock("@/components/images/LImage.vue", () => ({
     default: {
         name: "LImage",
@@ -82,6 +92,7 @@ const mockProviderDisplayNameFallback: AuthProviderDto = {
 describe("AuthProviderSelectionModal.vue", () => {
     beforeEach(async () => {
         vi.clearAllMocks();
+        kratosEnabled.value = false;
         showProviderSelectionModal.value = true;
         await db.docs.clear();
     });
@@ -137,9 +148,7 @@ describe("AuthProviderSelectionModal.vue", () => {
             expect(wrapper.html()).toContain("Acme Corp");
         });
 
-        const providerBtn = wrapper
-            .findAll("button")
-            .find((b) => b.text().includes("Acme Corp"));
+        const providerBtn = wrapper.findAll("button").find((b) => b.text().includes("Acme Corp"));
         await providerBtn!.trigger("click");
 
         expect(loginWithProvider).toHaveBeenCalledTimes(1);
@@ -159,9 +168,7 @@ describe("AuthProviderSelectionModal.vue", () => {
             expect(wrapper.html()).toContain("Beta Inc");
         });
 
-        const providerBtn = wrapper
-            .findAll("button")
-            .find((b) => b.text().includes("Beta Inc"));
+        const providerBtn = wrapper.findAll("button").find((b) => b.text().includes("Beta Inc"));
         const style = providerBtn!.attributes("style") ?? "";
         expect(style).toContain("background-color");
         expect(style).toContain("color");
@@ -210,4 +217,53 @@ describe("AuthProviderSelectionModal.vue", () => {
             expect(wrapper.html()).toContain("Login with Display Name");
         });
     });
+
+    describe("with the Kratos screens switched on", () => {
+        beforeEach(() => {
+            kratosEnabled.value = true;
+        });
+
+        it("offers the email entry alongside the configured providers", async () => {
+            await db.docs.put(mockProviderA);
+
+            const wrapper = mount(AuthProviderSelectionModal, {
+                props: { isVisible: true },
+            });
+
+            await waitForExpect(() => {
+                expect(wrapper.html()).toContain("Acme Corp");
+                expect(wrapper.html()).toContain("Continue with email");
+            });
+        });
+
+        it("is a method in its own right, so no empty state with no providers", async () => {
+            const wrapper = mount(AuthProviderSelectionModal, {
+                props: { isVisible: true },
+            });
+
+            await waitForExpect(() => {
+                expect(wrapper.html()).toContain("Continue with email");
+            });
+            expect(wrapper.html()).not.toContain("auth.no_methods_available");
+        });
+
+        it("does not send the email entry through loginWithProvider", async () => {
+            const wrapper = mount(AuthProviderSelectionModal, {
+                props: { isVisible: true },
+            });
+
+            await waitForExpect(() => {
+                expect(wrapper.html()).toContain("Continue with email");
+            });
+            const emailButton = wrapper
+                .findAll("button")
+                .find((button) => button.text().includes("Continue with email"));
+            await emailButton!.trigger("click");
+
+            // Kratos is not an OIDC provider; routing it through the OIDC client
+            // would redirect to an /authorize endpoint that does not exist.
+            expect(loginWithProvider).not.toHaveBeenCalled();
+            expect(showProviderSelectionModal.value).toBe(false);
+        });
+    });
 });
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.vue b/app/src/components/authProvider/AuthProviderSelectionModal.vue
index f26164b841..05f3ebde04 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.vue
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import LModal from "@/components/form/LModal.vue";
 import LImage from "@/components/images/LImage.vue";
-import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { EnvelopeIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+// The router singleton rather than useRouter(), so this modal keeps working
+// wherever it is mounted without a router context.
+import router from "@/router";
+import { isKratosEnabled } from "@/auth/kratos/client";
+import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
 import { showProviderSelectionModal, loginWithProvider } from "@/auth";
 import { DocType, useHybridQuery, type AuthProviderDto } from "luminary-shared";
 import { computed } from "vue";
@@ -9,6 +14,9 @@ import { useI18n } from "vue-i18n";
 import { resolveI18nEmbedded } from "@/util/resolveI18nEmbedded";
 
 const { t } = useI18n();
+const c = useAuthCopy();
+// Only offered where the Kratos screens exist at all.
+const kratosEnabled = isKratosEnabled();
 const isVisible = defineModel<boolean>("isVisible");
 // AuthProvider is a fully-synced type, so HybridQuery reads from IndexedDB only.
 // Sorting by sortIndex (a non-content field) stays in a computed.
@@ -21,7 +29,10 @@ const providers = computed(() =>
     [...allProviders.value].sort((a, b) => (a.sortIndex ?? 0) - (b.sortIndex ?? 0)),
 );
 const resolveProviderLabel = (provider: AuthProviderDto) =>
-    resolveI18nEmbedded(provider.label || provider.displayName || provider.domain || provider._id, t);
+    resolveI18nEmbedded(
+        provider.label || provider.displayName || provider.domain || provider._id,
+        t,
+    );
 
 const hasIcon = (provider: AuthProviderDto) =>
     provider.imageData?.fileCollections?.some((fc) => fc.imageFiles?.length > 0) ?? false;
@@ -33,6 +44,15 @@ const handleProviderSelect = (provider: AuthProviderDto) => {
 const handleClose = () => {
     showProviderSelectionModal.value = false;
 };
+
+/**
+ * Kratos is not an OIDC provider, so it cannot be an AuthProvider doc and does
+ * not go through loginWithProvider — it is its own route in this app.
+ */
+const handleGuestSelect = () => {
+    handleClose();
+    router.push({ path: "/auth/login", query: { return_to: router.currentRoute.value.fullPath } });
+};
 </script>
 
 <template>
@@ -43,6 +63,21 @@ const handleClose = () => {
     >
         <!-- Provider list -->
         <div class="flex flex-col gap-3 py-2">
+            <button
+                v-if="kratosEnabled"
+                class="flex h-full w-full items-center gap-3 rounded-lg border border-zinc-200 bg-white px-4 py-5 hover:bg-zinc-50 hover:shadow-sm dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600/60"
+                @click="handleGuestSelect"
+            >
+                <div
+                    class="flex size-9 shrink-0 items-center justify-center rounded-md bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
+                >
+                    <EnvelopeIcon class="h-5 w-5" />
+                </div>
+                <span class="text-start text-[15px] font-medium text-zinc-700 dark:text-slate-200">
+                    {{ c("auth.methods.email") }}
+                </span>
+            </button>
+
             <button
                 v-for="provider in providers"
                 :key="provider._id"
@@ -94,7 +129,7 @@ const handleClose = () => {
             </button>
 
             <div
-                v-if="providers.length === 0"
+                v-if="providers.length === 0 && !kratosEnabled"
                 class="flex flex-col items-center justify-center py-8 text-center"
             >
                 <div class="mb-3 rounded-full bg-zinc-100 p-3 dark:bg-slate-700">
diff --git a/app/src/components/navigation/ProfileMenu.vue b/app/src/components/navigation/ProfileMenu.vue
index d7dcf60535..d5df3714d8 100644
--- a/app/src/components/navigation/ProfileMenu.vue
+++ b/app/src/components/navigation/ProfileMenu.vue
@@ -14,6 +14,7 @@ import { useRouter } from "vue-router";
 import { computed, onMounted, ref, type ComputedRef } from "vue";
 import {
     ShieldCheckIcon,
+    UserCircleIcon,
     BookmarkIcon,
     Bars3Icon,
     Cog6ToothIcon,
@@ -34,6 +35,8 @@ import LToggle from "../form/LToggle.vue";
 import MobileSidebar from "../common/MobileSidebar.vue";
 import DropdownMenu from "../common/DropdownMenu.vue";
 import { getNavigationItems } from "./navigationItems";
+import { kratosIdentityLabel, kratosSession } from "@/auth/kratos/session";
+import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
 import { useSearchOverlay } from "@/composables/useSearchOverlay";
 
 type Trigger = "avatar" | "bars" | "sidebar";
@@ -46,6 +49,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 const { user, logout, loginWithRedirect, isAuthenticated } = useAuthWithPrivacyPolicy();
+const c = useAuthCopy();
 const router = useRouter();
 
 const showThemeSelector = ref(false);
@@ -156,6 +160,21 @@ const privacyPolicyNavigationItem = computed(
     }),
 );
 
+/**
+ * Shown only while a Kratos session exists. It is not folded into the login/logout
+ * item above: that one reflects the OIDC session the Luminary API actually honours,
+ * and a guest session is a separate thing.
+ */
+const kratosNavigationItem = computed(() =>
+    kratosSession.value
+        ? {
+              name: c("auth.guest.signed_in_as", { name: kratosIdentityLabel.value }),
+              icon: UserCircleIcon,
+              action: () => router.push("/auth/account"),
+          }
+        : null,
+);
+
 const userNavigation = computed(() => {
     const authItem = isAuthenticated.value
         ? {
@@ -187,7 +206,13 @@ const userNavigation = computed(() => {
               },
           };
 
-    return [...commonNavigation.value, privacyPolicyNavigationItem.value, authItem];
+    const kratosItem = kratosNavigationItem.value;
+    return [
+        ...commonNavigation.value,
+        ...(kratosItem ? [kratosItem] : []),
+        privacyPolicyNavigationItem.value,
+        authItem,
+    ];
 });
 
 const sidebarNavigation = computed(() =>
@@ -207,7 +232,6 @@ const sidebarNavigation = computed(() =>
         aria-label="Open user menu"
         class="-m-1.5 flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-zinc-200 dark:hover:bg-slate-600"
         @click="menuOpen = !menuOpen"
-
     >
         <img
             v-if="isAuthenticated && user?.picture"
@@ -436,11 +460,14 @@ const sidebarNavigation = computed(() =>
                             aria-hidden="true"
                         />
                         <div class="flex flex-col leading-none">
-                            <span class="text-sm font-medium">{{ t("profile_menu.language") }}</span>
+                            <span class="text-sm font-medium">{{
+                                t("profile_menu.language")
+                            }}</span>
                             <span
                                 v-if="appLanguageAsRef?.name"
                                 class="mt-0.5 text-xs text-zinc-500 dark:text-slate-300"
-                            >{{ appLanguageAsRef.name }}</span>
+                                >{{ appLanguageAsRef.name }}</span
+                            >
                         </div>
                     </span>
 
@@ -467,7 +494,9 @@ const sidebarNavigation = computed(() =>
                                 class="h-5 w-5 flex-shrink-0"
                                 aria-hidden="true"
                             />
-                            <span class="text-sm font-medium">{{ t("profile_menu.settings") }}</span>
+                            <span class="text-sm font-medium">{{
+                                t("profile_menu.settings")
+                            }}</span>
                         </span>
                     </RouterLink>
                 </div>
@@ -496,7 +525,11 @@ const sidebarNavigation = computed(() =>
                     @click="isAuthenticated ? handleLogout() : handleLogin()"
                 >
                     <component
-                        :is="isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon"
+                        :is="
+                            isAuthenticated
+                                ? ArrowRightEndOnRectangleIcon
+                                : ArrowLeftEndOnRectangleIcon
+                        "
                         class="h-5 w-5 flex-shrink-0"
                         aria-hidden="true"
                     />
@@ -522,7 +555,9 @@ const sidebarNavigation = computed(() =>
                     >
                         <UserIcon class="h-5 w-5 text-zinc-600 dark:text-slate-100" />
                     </div>
-                    <span class="flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100">
+                    <span
+                        class="flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100"
+                    >
                         {{ user?.name || user?.email }}
                     </span>
                 </div>
diff --git a/app/src/pages/auth/KratosAccountPage.vue b/app/src/pages/auth/KratosAccountPage.vue
index 6658a92295..bf6be32f03 100644
--- a/app/src/pages/auth/KratosAccountPage.vue
+++ b/app/src/pages/auth/KratosAccountPage.vue
@@ -6,12 +6,14 @@ import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import AccountSettingsScreen from "@/components/auth/kratos/AccountSettingsScreen.vue";
 import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
 import type { ActiveSession } from "@/components/auth/kratos/AccountSettingsScreen.vue";
-import { listOtherSessions, logout, signOutOtherSessions, whoami } from "@/auth/kratos/client";
+import { listOtherSessions, signOutOtherSessions } from "@/auth/kratos/client";
+import { kratosSession, refreshKratosSession, signOutKratos } from "@/auth/kratos/session";
 import type { KratosSessionListEntry } from "@/auth/kratos/types";
 
 const router = useRouter();
 const loading = ref(true);
-const session = ref<KratosSessionListEntry | null>(null);
+// Shared with the profile menu, so signing out here updates it too.
+const session = kratosSession;
 const others = ref<KratosSessionListEntry[]>([]);
 
 const email = computed(() => session.value?.identity?.traits.email ?? "");
@@ -47,7 +49,7 @@ const rows = computed<ActiveSession[]>(() => [
 
 async function load() {
     loading.value = true;
-    session.value = await whoami();
+    await refreshKratosSession();
     others.value = session.value ? await listOtherSessions() : [];
     loading.value = false;
 }
@@ -59,7 +61,7 @@ async function onSignOutOthers() {
 }
 
 async function onSignOut() {
-    await logout();
+    await signOutKratos();
     router.push("/auth/login");
 }
 </script>

From 5386401bcf517ccb5bed0b2ef9c047b161e88940 Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:43:25 +0200
Subject: [PATCH 05/15] fix(app): being signed in already is not a failed
 sign-in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kratos answers 400 session_already_available rather than opening a login
or registration flow while a session is live. createFlow threw on any
non-OK status, so clicking the guest entry with a session already in the
browser produced "Something went wrong — the sign-in service could not
be reached", which is neither what happened nor something the user can
act on.

Starting a flow now reports its three outcomes as values, and an
existing session sends the user to their account instead. A failure to
reach Kratos still reports as one, so the two stay distinguishable.

Also renames the entry to "Sign in as Guest", in the provider modal and
on the method chooser both.
---
 app/src/auth/kratos/client.ts                 | 32 ++++++++++++++-----
 app/src/auth/kratos/types.ts                  |  9 ++++++
 app/src/auth/kratos/useKratosAuth.spec.ts     | 23 +++++++++++--
 app/src/auth/kratos/useKratosAuth.ts          | 24 ++++++++++++--
 .../auth/kratos/SignInMethodsScreen.vue       |  2 +-
 app/src/components/auth/kratos/authCopy.ts    |  2 +-
 .../AuthProviderSelectionModal.spec.ts        |  8 ++---
 .../AuthProviderSelectionModal.vue            |  2 +-
 app/src/pages/auth/KratosAuthPage.vue         |  6 ++++
 9 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/app/src/auth/kratos/client.ts b/app/src/auth/kratos/client.ts
index c65b5a3aef..8071a69212 100644
--- a/app/src/auth/kratos/client.ts
+++ b/app/src/auth/kratos/client.ts
@@ -1,4 +1,5 @@
 import type {
+    FlowStart,
     FlowType,
     KratosFlow,
     KratosSession,
@@ -27,17 +28,32 @@ async function readJson<T>(response: Response): Promise<T> {
     return (await response.json()) as T;
 }
 
-/** Start a browser flow. `returnTo` survives the round trip and decides where success lands. */
-export async function createFlow(type: FlowType, returnTo?: string): Promise<KratosFlow> {
+/**
+ * Start a browser flow. `returnTo` survives the round trip and decides where
+ * success lands. Being signed in already is a normal answer here, not a failure:
+ * Kratos refuses to open a login or registration flow for a live session.
+ */
+export async function createFlow(type: FlowType, returnTo?: string): Promise<FlowStart> {
     const url = new URL(`${KRATOS_BASE}/self-service/${type}/browser`, window.location.origin);
     if (returnTo) url.searchParams.set("return_to", returnTo);
 
-    const response = await fetch(url, {
-        headers: { Accept: "application/json" },
-        credentials: "include",
-    });
-    if (!response.ok) throw new Error(`Could not start the ${type} flow (${response.status})`);
-    return readJson<KratosFlow>(response);
+    let response: Response;
+    try {
+        response = await fetch(url, {
+            headers: { Accept: "application/json" },
+            credentials: "include",
+        });
+    } catch {
+        return { kind: "unavailable" };
+    }
+
+    if (response.ok) return { kind: "flow", flow: await readJson<KratosFlow>(response) };
+
+    if (response.status === 400) {
+        const body = await readJson<{ error?: { id?: string } }>(response);
+        if (body.error?.id === "session_already_available") return { kind: "session_exists" };
+    }
+    return { kind: "unavailable" };
 }
 
 /** Fetch the flow named in the URL Kratos redirected the browser to. */
diff --git a/app/src/auth/kratos/types.ts b/app/src/auth/kratos/types.ts
index d79f4e0945..2817c97929 100644
--- a/app/src/auth/kratos/types.ts
+++ b/app/src/auth/kratos/types.ts
@@ -49,6 +49,15 @@ export type KratosSessionListEntry = KratosSession & {
 
 export type FlowType = "login" | "registration" | "verification" | "recovery" | "settings";
 
+/**
+ * Starting a flow can find you already signed in — Kratos answers 400
+ * `session_already_available` rather than handing back a flow.
+ */
+export type FlowStart =
+    | { kind: "flow"; flow: KratosFlow }
+    | { kind: "session_exists" }
+    | { kind: "unavailable" };
+
 /**
  * Every way a submit can land. `flow` is the ordinary "here are your validation
  * errors" case — Kratos answers 400 with the same flow, re-rendered.
diff --git a/app/src/auth/kratos/useKratosAuth.spec.ts b/app/src/auth/kratos/useKratosAuth.spec.ts
index 9e76bd200f..432a001aa5 100644
--- a/app/src/auth/kratos/useKratosAuth.spec.ts
+++ b/app/src/auth/kratos/useKratosAuth.spec.ts
@@ -35,7 +35,7 @@ const submitted = () => vi.mocked(submitFlow).mock.calls.at(-1)![1];
 describe("useKratosAuth", () => {
     beforeEach(() => {
         vi.useFakeTimers();
-        vi.mocked(createFlow).mockResolvedValue(registrationStart);
+        vi.mocked(createFlow).mockResolvedValue({ kind: "flow", flow: registrationStart });
         vi.mocked(submitFlow).mockResolvedValue({ kind: "flow", flow: awaitingCode });
     });
     afterEach(() => {
@@ -43,6 +43,25 @@ describe("useKratosAuth", () => {
         vi.clearAllMocks();
     });
 
+    it("reports an existing session instead of failing the flow", async () => {
+        // Kratos answers 400 session_already_available rather than opening a
+        // login flow for a live session; that is not an error to show the user.
+        vi.mocked(createFlow).mockResolvedValue({ kind: "session_exists" });
+        const { auth } = host("login");
+        await auth.start();
+
+        expect(auth.step.value).toBe("signed-in");
+        expect(auth.failure.value).toBe("");
+    });
+
+    it("shows the failure screen when Kratos cannot be reached", async () => {
+        vi.mocked(createFlow).mockResolvedValue({ kind: "unavailable" });
+        const { auth } = host("login");
+        await auth.start();
+
+        expect(auth.step.value).toBe("failed");
+    });
+
     it("opens on the address step", async () => {
         const { auth } = host("registration");
         await auth.start();
@@ -64,7 +83,7 @@ describe("useKratosAuth", () => {
     });
 
     it("submits login as an identifier, because that is what that flow asks for", async () => {
-        vi.mocked(createFlow).mockResolvedValue(loginStart);
+        vi.mocked(createFlow).mockResolvedValue({ kind: "flow", flow: loginStart });
         const { auth } = host("login");
         await auth.start();
         auth.email.value = "johan@example.com";
diff --git a/app/src/auth/kratos/useKratosAuth.ts b/app/src/auth/kratos/useKratosAuth.ts
index 9506d145e7..3c1c6a872d 100644
--- a/app/src/auth/kratos/useKratosAuth.ts
+++ b/app/src/auth/kratos/useKratosAuth.ts
@@ -8,6 +8,8 @@ export type AuthStep =
     | "identifier"
     | "code"
     | "done"
+    /** Kratos refused to open the flow because a session is already live. */
+    | "signed-in"
     | "expired"
     | "offline"
     | "failed";
@@ -69,9 +71,25 @@ export function useKratosAuth(type: FlowType) {
         step.value = "loading";
         try {
             const existing = flowId ? await fetchFlow(type, flowId) : null;
-            const next = existing ?? (await createFlow(type, returnTo));
-            adopt(next);
-            if (isAwaitingCode(next)) startCountdown();
+            if (existing) {
+                adopt(existing);
+                if (isAwaitingCode(existing)) startCountdown();
+                return;
+            }
+
+            const started = await createFlow(type, returnTo);
+            if (started.kind === "session_exists") {
+                step.value = "signed-in";
+                return;
+            }
+            if (started.kind === "unavailable") {
+                step.value = navigator.onLine === false ? "offline" : "failed";
+                failure.value = "The sign-in service could not be reached.";
+                return;
+            }
+
+            adopt(started.flow);
+            if (isAwaitingCode(started.flow)) startCountdown();
         } catch {
             step.value = navigator.onLine === false ? "offline" : "failed";
             failure.value = "The sign-in service could not be reached.";
diff --git a/app/src/components/auth/kratos/SignInMethodsScreen.vue b/app/src/components/auth/kratos/SignInMethodsScreen.vue
index 12fae2171d..cf93d1ded1 100644
--- a/app/src/components/auth/kratos/SignInMethodsScreen.vue
+++ b/app/src/components/auth/kratos/SignInMethodsScreen.vue
@@ -39,7 +39,7 @@ const c = useAuthCopy();
                 <EnvelopeIcon class="h-5 w-5" />
             </span>
             <span class="text-[15px] font-medium text-zinc-800 dark:text-slate-100">
-                {{ c("auth.methods.email") }}
+                {{ c("auth.methods.guest_sign_in") }}
             </span>
         </button>
 
diff --git a/app/src/components/auth/kratos/authCopy.ts b/app/src/components/auth/kratos/authCopy.ts
index 9c5d4d9825..6d9f6783a4 100644
--- a/app/src/components/auth/kratos/authCopy.ts
+++ b/app/src/components/auth/kratos/authCopy.ts
@@ -7,7 +7,7 @@ export const authCopy = {
     "auth.methods.title": "Sign in",
     "auth.methods.subtitle":
         "Use your email address, or continue with an account you already have.",
-    "auth.methods.email": "Continue with email",
+    "auth.methods.guest_sign_in": "Sign in as Guest",
     "auth.methods.divider": "or",
     "auth.methods.guest": "Continue without an account",
     "auth.methods.none": "No sign-in methods are available right now.",
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
index 1ff418aea0..c671c353f5 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
@@ -232,7 +232,7 @@ describe("AuthProviderSelectionModal.vue", () => {
 
             await waitForExpect(() => {
                 expect(wrapper.html()).toContain("Acme Corp");
-                expect(wrapper.html()).toContain("Continue with email");
+                expect(wrapper.html()).toContain("Sign in as Guest");
             });
         });
 
@@ -242,7 +242,7 @@ describe("AuthProviderSelectionModal.vue", () => {
             });
 
             await waitForExpect(() => {
-                expect(wrapper.html()).toContain("Continue with email");
+                expect(wrapper.html()).toContain("Sign in as Guest");
             });
             expect(wrapper.html()).not.toContain("auth.no_methods_available");
         });
@@ -253,11 +253,11 @@ describe("AuthProviderSelectionModal.vue", () => {
             });
 
             await waitForExpect(() => {
-                expect(wrapper.html()).toContain("Continue with email");
+                expect(wrapper.html()).toContain("Sign in as Guest");
             });
             const emailButton = wrapper
                 .findAll("button")
-                .find((button) => button.text().includes("Continue with email"));
+                .find((button) => button.text().includes("Sign in as Guest"));
             await emailButton!.trigger("click");
 
             // Kratos is not an OIDC provider; routing it through the OIDC client
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.vue b/app/src/components/authProvider/AuthProviderSelectionModal.vue
index 05f3ebde04..07bba64d32 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.vue
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.vue
@@ -74,7 +74,7 @@ const handleGuestSelect = () => {
                     <EnvelopeIcon class="h-5 w-5" />
                 </div>
                 <span class="text-start text-[15px] font-medium text-zinc-700 dark:text-slate-200">
-                    {{ c("auth.methods.email") }}
+                    {{ c("auth.methods.guest_sign_in") }}
                 </span>
             </button>
 
diff --git a/app/src/pages/auth/KratosAuthPage.vue b/app/src/pages/auth/KratosAuthPage.vue
index 71592f043e..2f951ca07e 100644
--- a/app/src/pages/auth/KratosAuthPage.vue
+++ b/app/src/pages/auth/KratosAuthPage.vue
@@ -44,6 +44,12 @@ const showMethods = ref(props.flowType === "login");
 
 onMounted(async () => {
     await start(route.query.flow as string | undefined, returnTo.value);
+    // Already signed in: show the account rather than an error about a flow
+    // Kratos was right to refuse.
+    if (step.value === "signed-in") {
+        router.replace("/auth/account");
+        return;
+    }
     if (props.flowType !== "login" || !providers.value.length) showMethods.value = false;
 });
 

From b4e577a8ea7f6a3ee34f06670987bae6b3ec1c71 Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:52:09 +0200
Subject: [PATCH 06/15] fix(app): show the guest identity where the app shows
 an account
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Completing a guest sign-in left "Login" in the menu. Two causes, both
mine: the flow completes without a page load, so the shared session ref
was never re-read; and the profile menu and desktop sidebar render their
auth row from hard-coded markup rather than from the navigation list the
earlier commit changed, so only the dropdown ever saw a guest.

The auth row now has three states rather than two — signed in, guest, or
neither — and the account name falls back to the guest identity in both
surfaces. Signing out of a guest session is offered where signing out of
an OIDC session would be.

The label reads a possibly-plain `user` through unref: it is a ref in the
app and a bare object in several mounted tests, and the template's
unwrapping used to hide the difference.
---
 app/src/components/auth/kratos/authCopy.ts    |  2 +-
 .../components/navigation/DesktopSidebar.vue  | 75 ++++++++++++----
 .../components/navigation/ProfileMenu.spec.ts | 42 +++++++++
 app/src/components/navigation/ProfileMenu.vue | 85 +++++++++++++------
 app/src/pages/auth/KratosAuthPage.vue         | 11 ++-
 5 files changed, 168 insertions(+), 47 deletions(-)

diff --git a/app/src/components/auth/kratos/authCopy.ts b/app/src/components/auth/kratos/authCopy.ts
index 6d9f6783a4..e129b46605 100644
--- a/app/src/components/auth/kratos/authCopy.ts
+++ b/app/src/components/auth/kratos/authCopy.ts
@@ -77,7 +77,7 @@ export const authCopy = {
     "auth.guest.continue": "Continue without an account",
     "auth.guest.badge": "Guest",
     "auth.guest.signed_in_as": "Signed in as {name}",
-    "auth.guest.sign_out": "Sign out of your guest account",
+    "auth.guest.sign_out": "Sign out",
 
     "auth.gate.bookmarks_title": "Save this for later",
     "auth.gate.bookmarks_body":
diff --git a/app/src/components/navigation/DesktopSidebar.vue b/app/src/components/navigation/DesktopSidebar.vue
index d16a1ca650..dc9da5b9f2 100644
--- a/app/src/components/navigation/DesktopSidebar.vue
+++ b/app/src/components/navigation/DesktopSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref, onMounted, onUnmounted, unref } from "vue";
 import { useI18n } from "vue-i18n";
 import { getNavigationItems } from "./navigationItems";
 import { useSearchOverlay } from "@/composables/useSearchOverlay";
@@ -29,7 +29,12 @@ import LDialog from "../common/LDialog.vue";
 import LToggle from "../form/LToggle.vue";
 import { cmsLanguages } from "@/globalConfig";
 import { useDisplayLanguageIds } from "@/ssg/renderLanguage";
-import { showPrivacyPolicyModal, useAuthWithPrivacyPolicy } from "@/composables/useAuthWithPrivacyPolicy";
+import {
+    showPrivacyPolicyModal,
+    useAuthWithPrivacyPolicy,
+} from "@/composables/useAuthWithPrivacyPolicy";
+import { kratosIdentityLabel, kratosSession, signOutKratos } from "@/auth/kratos/session";
+import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
 import { isConnected } from "luminary-shared";
 import { useNotificationStore, type Notification } from "@/stores/notification";
 import { useHydrated } from "@/composables/useHydrated";
@@ -38,6 +43,7 @@ const { t } = useI18n();
 const { openSearch, isSearchOpen } = useSearchOverlay();
 const { collapsed, toggleCollapsed } = useDesktopSidebar();
 const { user, logout, loginWithRedirect, isAuthenticated } = useAuthWithPrivacyPolicy();
+const c = useAuthCopy();
 
 const LOGO = import.meta.env.VITE_LOGO || defaultLogo;
 const LOGO_DARK = import.meta.env.VITE_LOGO_DARK || defaultLogoDark;
@@ -87,10 +93,32 @@ const languageTooltip = computed(() => {
     return name ? `${t("profile_menu.language")} — ${name}` : t("profile_menu.language");
 });
 
+/** A guest session is only the account on show while there is no OIDC one. */
+const hasGuestSession = computed(() => !isAuthenticated.value && !!kratosSession.value);
+
+const accountLabel = computed(() => {
+    if (isAuthenticated.value) {
+        const details = unref(user) as { name?: string; email?: string } | undefined;
+        return details?.name || details?.email || t("profile_menu.title");
+    }
+    return kratosIdentityLabel.value;
+});
+
 const profileTooltip = computed(() =>
-    isAuthenticated.value ? user.value?.name || user.value?.email || t("profile_menu.title") : "",
+    isAuthenticated.value || hasGuestSession.value ? accountLabel.value : "",
 );
 
+const authActionLabel = computed(() => {
+    if (isAuthenticated.value) return t("profile_menu.logout");
+    return hasGuestSession.value ? c("auth.guest.sign_out") : t("profile_menu.login");
+});
+
+const handleAuthAction = () => {
+    if (isAuthenticated.value) return handleLogout();
+    if (hasGuestSession.value) return signOutKratos();
+    return handleLogin();
+};
+
 const showOfflineNotification = () => {
     useNotificationStore().addNotification({
         id: "no-internet-connection-logout",
@@ -250,7 +278,8 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                    >{{ item.name }}</span>
+                        >{{ item.name }}</span
+                    >
                 </a>
             </RouterLink>
 
@@ -271,7 +300,8 @@ const handleLogin = () => {
                 <span
                     v-if="!collapsed"
                     :class="navLabelClass"
-                >{{ t("menu.search") }}</span>
+                    >{{ t("menu.search") }}</span
+                >
             </span>
 
             <RouterLink
@@ -293,7 +323,8 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                    >{{ t("profile_menu.bookmarks") }}</span>
+                        >{{ t("profile_menu.bookmarks") }}</span
+                    >
                 </a>
             </RouterLink>
 
@@ -313,7 +344,8 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                    >{{ t("profile_menu.theme") }}</span>
+                        >{{ t("profile_menu.theme") }}</span
+                    >
                 </span>
 
                 <span
@@ -327,13 +359,14 @@ const handleLogin = () => {
                     />
                     <div
                         v-if="!collapsed"
-                        class="min-w-0 flex flex-col leading-none"
+                        class="flex min-w-0 flex-col leading-none"
                     >
                         <span :class="navLabelClass">{{ t("profile_menu.language") }}</span>
                         <span
                             v-if="renderLanguage?.name"
                             :class="navMetaClass"
-                        >{{ renderLanguage.name }}</span>
+                            >{{ renderLanguage.name }}</span
+                        >
                     </div>
                 </span>
 
@@ -356,7 +389,8 @@ const handleLogin = () => {
                         <span
                             v-if="!collapsed"
                             :class="navLabelClass"
-                        >{{ t("profile_menu.settings") }}</span>
+                            >{{ t("profile_menu.settings") }}</span
+                        >
                     </a>
                 </RouterLink>
             </div>
@@ -380,17 +414,22 @@ const handleLogin = () => {
                 <span
                     v-if="!collapsed"
                     :class="navLabelClass"
-                >{{ t("profile_menu.privacy_policy") }}</span>
+                    >{{ t("profile_menu.privacy_policy") }}</span
+                >
             </button>
 
             <button
                 type="button"
                 :class="[...actionButtonClasses(), !collapsed ? 'mb-2' : 'mb-1']"
-                :title="isAuthenticated ? t('profile_menu.logout') : t('profile_menu.login')"
-                @click="isAuthenticated ? handleLogout() : handleLogin()"
+                :title="authActionLabel"
+                @click="handleAuthAction()"
             >
                 <component
-                    :is="isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon"
+                    :is="
+                        isAuthenticated || hasGuestSession
+                            ? ArrowRightEndOnRectangleIcon
+                            : ArrowLeftEndOnRectangleIcon
+                    "
                     :class="navIconClass"
                     aria-hidden="true"
                 />
@@ -398,15 +437,15 @@ const handleLogin = () => {
                     v-if="!collapsed"
                     :class="navLabelClass"
                 >
-                    {{ isAuthenticated ? t("profile_menu.logout") : t("profile_menu.login") }}
+                    {{ authActionLabel }}
                 </span>
             </button>
 
             <div
-                v-if="isAuthenticated"
+                v-if="isAuthenticated || hasGuestSession"
                 :class="[
                     'flex items-center rounded-md',
-                    collapsed ? 'justify-center px-0 py-1' : 'gap-3 pl-1.5 py-1.5',
+                    collapsed ? 'justify-center px-0 py-1' : 'gap-3 py-1.5 pl-1.5',
                 ]"
                 :title="profileTooltip"
             >
@@ -426,7 +465,7 @@ const handleLogin = () => {
                     v-if="!collapsed"
                     class="min-w-0 flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100"
                 >
-                    {{ user?.name || user?.email }}
+                    {{ accountLabel }}
                 </span>
             </div>
         </div>
diff --git a/app/src/components/navigation/ProfileMenu.spec.ts b/app/src/components/navigation/ProfileMenu.spec.ts
index 533c8ae519..125d2009eb 100644
--- a/app/src/components/navigation/ProfileMenu.spec.ts
+++ b/app/src/components/navigation/ProfileMenu.spec.ts
@@ -12,6 +12,7 @@ import { isConnected } from "luminary-shared";
 import { useI18n } from "vue-i18n";
 import { useNotificationStore } from "@/stores/notification";
 import { isAuthPluginInstalled } from "@/auth";
+import { kratosSession } from "@/auth/kratos/session";
 
 const routePushMock = vi.hoisted(() => vi.fn());
 vi.mock("vue-router", () => ({
@@ -24,6 +25,8 @@ vi.mock("@/auth", async () => (await import("@/tests/mockAuth")).createAuthMock(
 
 vi.mock("vue-i18n", () => ({
     useI18n: () => ({
+        // The Kratos copy has no translation here, so it renders its English default.
+        te: () => false,
         t: (key: string) => mockLanguageDtoEng.translations[key] || key,
     }),
 }));
@@ -54,6 +57,7 @@ describe("ProfileMenu", () => {
     afterEach(() => {
         vi.clearAllMocks();
         isAuthPluginInstalled.value = false;
+        kratosSession.value = null;
     });
 
     it("shows the user's name", async () => {
@@ -163,4 +167,42 @@ describe("ProfileMenu", () => {
             expect(notificationStore.addNotification).toHaveBeenCalled();
         });
     });
+
+    describe("with a guest session", () => {
+        const guest = {
+            id: "session-1",
+            active: true,
+            identity: { id: "i1", traits: { email: "guest@example.com", name: "Guest Person" } },
+        };
+
+        it("names the guest instead of offering a login", async () => {
+            (auth as any).useAuth.mockReturnValue({ isAuthenticated: ref(false) });
+            kratosSession.value = guest;
+
+            const wrapper = mount(ProfileMenu);
+            await wrapper.find("button").trigger("click");
+
+            expect(wrapper.html()).toContain("Guest Person");
+            // The auth row offers a way out of the guest session, not a way in.
+            const authRow = wrapper.findAll("button").find((button) => {
+                const text = button.text();
+                return text === "Sign out" || text === "Login";
+            });
+            expect(authRow?.text()).toBe("Sign out");
+        });
+
+        it("still offers a login when there is no guest session", async () => {
+            (auth as any).useAuth.mockReturnValue({ isAuthenticated: ref(false) });
+            kratosSession.value = null;
+
+            const wrapper = mount(ProfileMenu);
+            await wrapper.find("button").trigger("click");
+
+            const authRow = wrapper.findAll("button").find((button) => {
+                const text = button.text();
+                return text === "Sign out" || text === "Login";
+            });
+            expect(authRow?.text()).toBe("Login");
+        });
+    });
 });
diff --git a/app/src/components/navigation/ProfileMenu.vue b/app/src/components/navigation/ProfileMenu.vue
index d5df3714d8..509525b7e9 100644
--- a/app/src/components/navigation/ProfileMenu.vue
+++ b/app/src/components/navigation/ProfileMenu.vue
@@ -11,7 +11,7 @@ import {
 import { Bars3Icon as Bars3IconSolid } from "@heroicons/vue/24/solid";
 import ThemeSelectorModal from "./ThemeSelectorModal.vue";
 import { useRouter } from "vue-router";
-import { computed, onMounted, ref, type ComputedRef } from "vue";
+import { computed, onMounted, ref, unref, type ComputedRef } from "vue";
 import {
     ShieldCheckIcon,
     UserCircleIcon,
@@ -35,7 +35,7 @@ import LToggle from "../form/LToggle.vue";
 import MobileSidebar from "../common/MobileSidebar.vue";
 import DropdownMenu from "../common/DropdownMenu.vue";
 import { getNavigationItems } from "./navigationItems";
-import { kratosIdentityLabel, kratosSession } from "@/auth/kratos/session";
+import { kratosIdentityLabel, kratosSession, signOutKratos } from "@/auth/kratos/session";
 import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
 import { useSearchOverlay } from "@/composables/useSearchOverlay";
 
@@ -165,6 +165,33 @@ const privacyPolicyNavigationItem = computed(
  * item above: that one reflects the OIDC session the Luminary API actually honours,
  * and a guest session is a separate thing.
  */
+/**
+ * The name on the menu trigger. A guest session is not the OIDC session the API
+ * honours, but it is still who the user signed in as, so it is what to show them.
+ */
+/** A guest session is only the account on show while there is no OIDC one. */
+const hasGuestSession = computed(() => !isAuthenticated.value && !!kratosSession.value);
+
+const authActionLabel = computed(() => {
+    if (isAuthenticated.value) return t("profile_menu.logout");
+    return hasGuestSession.value ? c("auth.guest.sign_out") : t("profile_menu.login");
+});
+
+const handleAuthAction = () => {
+    if (isAuthenticated.value) return handleLogout();
+    if (hasGuestSession.value) return signOutKratos();
+    return handleLogin();
+};
+
+const accountLabel = computed(() => {
+    if (isAuthenticated.value) {
+        // `user` is a ref in the app but a plain object in some mounted tests.
+        const details = unref(user) as { name?: string; email?: string } | undefined;
+        return details?.name || details?.email;
+    }
+    return kratosIdentityLabel.value || t("profile_menu.title");
+});
+
 const kratosNavigationItem = computed(() =>
     kratosSession.value
         ? {
@@ -188,23 +215,29 @@ const userNavigation = computed(() => {
                   showOfflineNotification();
               },
           }
-        : {
-              name: t("profile_menu.login"),
-              icon: ArrowLeftEndOnRectangleIcon,
-              action: () => {
-                  if (isConnected.value) {
-                      loginWithRedirect();
-                      return;
-                  }
-                  useNotificationStore().addNotification({
-                      id: "no-internet-connection-login",
-                      title: t("profile_menu.login.offline_notification_title"),
-                      description: t("profile_menu.login.offline_notification"),
-                      type: "toast",
-                      state: "error",
-                  } as Notification);
-              },
-          };
+        : kratosSession.value
+          ? {
+                name: c("auth.guest.sign_out"),
+                icon: ArrowRightEndOnRectangleIcon,
+                action: () => signOutKratos(),
+            }
+          : {
+                name: t("profile_menu.login"),
+                icon: ArrowLeftEndOnRectangleIcon,
+                action: () => {
+                    if (isConnected.value) {
+                        loginWithRedirect();
+                        return;
+                    }
+                    useNotificationStore().addNotification({
+                        id: "no-internet-connection-login",
+                        title: t("profile_menu.login.offline_notification_title"),
+                        description: t("profile_menu.login.offline_notification"),
+                        type: "toast",
+                        state: "error",
+                    } as Notification);
+                },
+            };
 
     const kratosItem = kratosNavigationItem.value;
     return [
@@ -280,7 +313,7 @@ const sidebarNavigation = computed(() =>
                 <span
                     class="flex-1 truncate text-left text-sm font-medium text-zinc-700 dark:text-slate-100"
                 >
-                    {{ isAuthenticated ? user?.name || user?.email : t("profile_menu.title") }}
+                    {{ accountLabel }}
                 </span>
                 <component
                     :is="menuOpen ? ChevronUpIcon : ChevronDownIcon"
@@ -522,25 +555,23 @@ const sidebarNavigation = computed(() =>
                 <button
                     type="button"
                     class="mb-2 flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-left text-zinc-600 hover:bg-zinc-200 dark:text-slate-100 dark:hover:bg-slate-700"
-                    @click="isAuthenticated ? handleLogout() : handleLogin()"
+                    @click="handleAuthAction()"
                 >
                     <component
                         :is="
-                            isAuthenticated
+                            isAuthenticated || hasGuestSession
                                 ? ArrowRightEndOnRectangleIcon
                                 : ArrowLeftEndOnRectangleIcon
                         "
                         class="h-5 w-5 flex-shrink-0"
                         aria-hidden="true"
                     />
-                    <span class="text-sm font-medium">
-                        {{ isAuthenticated ? t("profile_menu.logout") : t("profile_menu.login") }}
-                    </span>
+                    <span class="text-sm font-medium">{{ authActionLabel }}</span>
                 </button>
 
                 <!-- Profile display -->
                 <div
-                    v-if="isAuthenticated"
+                    v-if="isAuthenticated || hasGuestSession"
                     class="flex items-center gap-3 rounded-md px-3 py-1.5"
                 >
                     <img
@@ -558,7 +589,7 @@ const sidebarNavigation = computed(() =>
                     <span
                         class="flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100"
                     >
-                        {{ user?.name || user?.email }}
+                        {{ accountLabel }}
                     </span>
                 </div>
             </div>
diff --git a/app/src/pages/auth/KratosAuthPage.vue b/app/src/pages/auth/KratosAuthPage.vue
index 2f951ca07e..03f1e4dd96 100644
--- a/app/src/pages/auth/KratosAuthPage.vue
+++ b/app/src/pages/auth/KratosAuthPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import SignInMethodsScreen from "@/components/auth/kratos/SignInMethodsScreen.vue";
@@ -9,6 +9,7 @@ import RegistrationScreen from "@/components/auth/kratos/RegistrationScreen.vue"
 import AuthDoneScreen from "@/components/auth/kratos/AuthDoneScreen.vue";
 import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
 import { useKratosAuth } from "@/auth/kratos/useKratosAuth";
+import { refreshKratosSession } from "@/auth/kratos/session";
 import type { FlowType } from "@/auth/kratos/types";
 
 const props = defineProps<{ flowType: FlowType }>();
@@ -57,6 +58,14 @@ const codeMode = computed(() => (props.flowType === "verification" ? "verificati
 const identifierMode = computed(() => (props.flowType === "recovery" ? "recovery" : "login"));
 const flowMessage = computed(() => message.value ?? undefined);
 
+// The flow completes without a page load, so the shared session state — and
+// everything reading it, the profile menu included — is stale until it is
+// re-read. Watched rather than tied to the "continue" button, because the user
+// may navigate away from the success screen instead of pressing it.
+watch(step, (current) => {
+    if (current === "done") refreshKratosSession();
+});
+
 const leave = () => router.push(returnTo.value);
 
 /** Back from the address step returns to the chooser when there is one to return to. */

From e2b465e919daf9d072316f5a1fd9b849a36fc7e2 Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:53:28 +0200
Subject: [PATCH 07/15] docs: what using Kratos through Hydra would cost,
 checked against the API's validator

---
 docs/temp_kratos-guest-auth-ui.md | 77 +++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/docs/temp_kratos-guest-auth-ui.md b/docs/temp_kratos-guest-auth-ui.md
index 6ab9ac5d3b..c3b1f07bc8 100644
--- a/docs/temp_kratos-guest-auth-ui.md
+++ b/docs/temp_kratos-guest-auth-ui.md
@@ -173,3 +173,80 @@ Two ways to close it, when it matters:
 For a self-hosted deployment I'd take (1): it keeps the moving parts in a codebase
 we own, and the identity→groups mapping it needs is a thing `AuthIdentityService`
 already does. Either way it is a deliberate second step, not an oversight in this one.
+
+## Using the existing AuthProvider system via Ory Hydra
+
+Kratos alone cannot be an `AuthProvider` doc: it has no `/authorize`, no
+`client_id`, no JWKS and issues no JWT. **Hydra can.** Hydra is Ory's OAuth2 /
+OIDC server, and Kratos becomes the thing that authenticates users for it — so
+from Luminary's side it is an ordinary OIDC provider and the existing model
+applies unchanged.
+
+The shape:
+
+```
+app → Hydra /oauth2/auth → our /auth/login (the Kratos flow, these screens)
+    → Kratos accepts the login request → Hydra → our consent endpoint
+    → Hydra issues a JWT → the API validates it exactly as it does today
+```
+
+### What has to be true for the current API code to accept it
+
+Checked against `api/src/auth/authIdentity.service.ts`, not assumed:
+
+- **JWT access tokens must be switched on.** Hydra issues opaque tokens by
+  default, and an opaque token fails `jwtService.verifyAsync` outright. Set
+  `strategies.access_token: jwt` in Hydra's config file — the
+  `OAUTH2_ACCESS_TOKEN_STRATEGY` environment variable appears only in Hydra's
+  own tests and does not work.
+- **The issuer must match exactly.** The API builds `https://${provider.domain}/`
+  — hard-coded scheme, trailing slash, no path. So Hydra's `urls.self.issuer`
+  has to be `https://<domain>/`. A Hydra mounted at `https://example.com/hydra/`
+  or served over http will fail validation with no way to express it in an
+  `AuthProvider` doc.
+- **JWKS lines up.** The API fetches `https://${provider.domain}/.well-known/jwks.json`,
+  which is exactly where self-hosted Hydra publishes.
+- **The client id check passes.** The API compares `azp ?? client_id` against
+  `provider.clientId`; Hydra's JWT access tokens carry `client_id`.
+- **Audience.** `app/src/auth.ts` already sends `audience` as an authorization
+  parameter, which Hydra supports — the client must be configured to allow that
+  audience.
+
+### Group mappings work, at a different claim path
+
+Custom claims set when accepting consent land under **`ext`** in Hydra's JWT
+access tokens, not at the top level. So an `AutoGroupMappings` condition reads
+`ext.email` rather than `email`. Nothing needs changing for that:
+`extractClaimValue` already walks dotted paths. Hydra's
+`allowed_top_level_claims` can promote specific claims instead, with
+`mirror_top_level_claims` and `preserve_ext_claims` deciding whether they are
+also kept under `ext`.
+
+### What we would still have to build
+
+Kratos handles the login half once `oauth2_provider.url` points at Hydra's admin
+API: it reads the `login_challenge`, validates it, honours Hydra's `skip` flag,
+and on success calls `PUT /admin/oauth2/auth/requests/login/accept` with the
+identity and session ids (the session's AMR flows into the ID token's `amr`).
+
+**Consent is not Kratos' job.** We would own that endpoint. For a first-party app
+it can auto-accept, but it is still ours to write — and it is the natural place
+to inject the claims the group mappings read.
+
+### The trade
+
+Gained: no change to the API's auth model, the CMS can add it as an ordinary
+provider with no code change, and guests get the same group machinery as BCC
+users.
+
+Paid: a second Ory service and its database, a consent endpoint of our own, the
+issuer/JWKS constraints above pinning the deployment topology, and the redirect
+round-trip — the in-app, never-leave-the-page property that motivated this design
+goes away.
+
+The screens are not wasted either way: under Hydra they become the login UI
+Kratos drives.
+
+**Worth doing if guests are meant to be real Luminary users with groups.** If the
+goal is only that a reader keeps their bookmarks across devices, Kratos plus
+session introspection in the API is much less machinery for the same outcome.

From 36ef6e432c6b614212c0f629076861d0e90eef3e Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 09:56:03 +0200
Subject: [PATCH 08/15] docs: recommend the Hydra path, and the order to build
 it in

---
 docs/temp_kratos-guest-auth-ui.md | 54 +++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/docs/temp_kratos-guest-auth-ui.md b/docs/temp_kratos-guest-auth-ui.md
index c3b1f07bc8..377ccfb05f 100644
--- a/docs/temp_kratos-guest-auth-ui.md
+++ b/docs/temp_kratos-guest-auth-ui.md
@@ -250,3 +250,57 @@ Kratos drives.
 **Worth doing if guests are meant to be real Luminary users with groups.** If the
 goal is only that a reader keeps their bookmarks across devices, Kratos plus
 session introspection in the API is much less machinery for the same outcome.
+
+## Recommendation
+
+**Take the Hydra path, and drop the idea of teaching `AuthProviderDto` a second
+kind.** The discriminator would have put a second code path through the most
+security-sensitive code in the system — the one whose failure codes already drive
+eviction and silent-refresh logic in both clients (see the cross-package
+contracts in the root `CLAUDE.md`) — and kept it there forever. Hydra makes that
+unnecessary: a guest becomes an ordinary OIDC provider, added from the CMS,
+mapped to groups by the machinery that already exists.
+
+The deciding evidence is that a **"Guest" `AuthProvider` doc already exists** in
+the running system. That says the intended model is _guest = an authenticated
+principal that gets groups_, not _guest = an anonymous reader_. Hydra preserves
+that model exactly; Kratos on its own replaces it with a second, parallel one.
+
+Be clear about what it costs, though: **the never-leave-the-app property goes
+away.** The user does bounce through Hydra's origin. What they do _not_ lose is
+our screens — Hydra's `urls.login` points back at `/auth/login`, so the pages
+they actually look at are the ones in this branch, on our domain, with our
+branding. It ends up the same shape as the existing BCC flow.
+
+### Order to build it
+
+1. **Now** — nothing. The Kratos-only PoC stands as the design proof. It touches
+   no production path, so there is nothing to undo.
+2. **Hydra beside Kratos** in the same compose file. Public client with PKCE,
+   `strategies.access_token: jwt`, issuer on `https://<domain>/` with the
+   trailing slash, `urls.login` → `/auth/login`, `urls.consent` → `/auth/consent`.
+3. **A consent endpoint of our own**, auto-accepting for the first-party client
+   only — never for arbitrary clients.
+4. **A `Guest` provider doc from the CMS**, pointing at Hydra's domain, client id
+   and audience. No change in `api/` or `app/src/auth.ts`. Verify the JWT
+   validates before going further.
+5. **`AutoGroupMappings` for that provider id**, then guests have groups.
+6. **Retire the interim entry** — "Sign in as Guest" becomes an ordinary provider
+   button again, and the bespoke `/auth/*` routes exist only as Hydra's login UI.
+
+### Decide the claim contract before writing any of it
+
+The consent endpoint decides what the token carries, and the group mappings are
+written against it — so getting it wrong is expensive to change once mappings
+exist in production. Suggested: a stable identity id, `email`, and a `tier`
+marker for guests, **promoted with `allowed_top_level_claims`** rather than left
+under `ext`. Mappings then read `email` for every provider instead of `email` for
+one and `ext.email` for another, and the CMS config stays uniform.
+
+### Two things that already line up
+
+- `app/src/auth.ts` requests `openid profile email offline_access`, and
+  `signinSilent()` throws without a refresh token — so Hydra's client must be
+  allowed `offline_access` and issue refresh tokens. The app itself needs no
+  change.
+- The JWKS path and the `azp ?? client_id` check match Hydra's output as-is.

From 6b4688e44f897423fec27d62f914daf36af6ca0e Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 10:23:14 +0200
Subject: [PATCH 09/15] refactor: issue guest tokens through Ory Hydra
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kratos cannot be an AuthProvider — no /authorize, no client_id, no JWKS,
no JWT. Hydra can. Kratos authenticates and Hydra issues the token, so a
guest is now an ordinary provider row: the app's oidc-client-ts redirect
and the API's JWKS validation both apply with no Kratos special case
anywhere, and the CMS manages it like any other provider.

Gone with it is the parallel guest session the Kratos-only PoC needed —
its shared ref, its entry in the provider modal, and the guest branches
in the profile menu and sidebar. The OIDC session is the session again;
a second one beside it was a second answer to who is signed in.

api/src/oauth/ handles Hydra's consent and logout hand-offs. Accepting
either needs Hydra's admin API, which a browser must never reach, so
urls.consent points at the API rather than the web client. It grants
only what was asked for and only for the one trusted client; any other
client is refused rather than quietly approved.

providerBaseUrl() honours an explicit scheme on a provider's domain and
still assumes https without one — the rule app/src/auth.ts already
applied on the client. The issuer and JWKS URL were hard-coded to https,
so no provider could be reached over http and no local Hydra could be
validated at all.

Two things the running stack settled, neither of them what the docs
imply. skip_consent on the client does not remove the consent round
trip: Hydra still redirects and still expects an accept. And a browser
flow must be navigated to rather than fetched — asking Kratos for one
with Accept: application/json returns 200 null in exactly the case where
it could have completed the flow itself.

Verified end to end against Hydra v2.2.0: iss, aud, client_id and sub
land where the validator expects them, tier arrives promoted out of ext,
and a refresh token is issued, which signinSilent() requires.
---
 api/.env.example                              |   5 +
 api/src/app.module.ts                         |   2 +
 api/src/auth/authIdentity.service.spec.ts     |  16 ++-
 api/src/auth/authIdentity.service.ts          |  15 ++-
 api/src/oauth/hydra.config.ts                 |  23 ++++
 api/src/oauth/oauth.controller.spec.ts        |  77 ++++++++++++
 api/src/oauth/oauth.controller.ts             | 115 ++++++++++++++++++
 app/src/App.vue                               |   4 -
 app/src/auth/kratos/client.ts                 |  16 +++
 app/src/auth/kratos/session.ts                |  29 -----
 .../AuthProviderSelectionModal.spec.ts        |  60 ---------
 .../AuthProviderSelectionModal.vue            |  36 +-----
 .../components/navigation/DesktopSidebar.vue  |  40 ++----
 .../components/navigation/ProfileMenu.spec.ts |  42 -------
 app/src/components/navigation/ProfileMenu.vue | 106 +++++-----------
 app/src/pages/auth/KratosAccountPage.vue      |  15 +--
 app/src/pages/auth/KratosAuthPage.vue         |  25 ++--
 docs/temp_kratos-guest-auth-ui.md             |  52 +++++++-
 kratos/README.md                              |  42 -------
 kratos/docker-compose.yml                     |  35 ------
 ory/README.md                                 |  70 +++++++++++
 ory/config/hydra.yml                          |  66 ++++++++++
 {kratos => ory}/config/identity.schema.json   |   0
 {kratos => ory}/config/kratos.yml             |   8 ++
 ory/docker-compose.yml                        |  98 +++++++++++++++
 ory/seed-auth-provider.mjs                    |  78 ++++++++++++
 26 files changed, 698 insertions(+), 377 deletions(-)
 create mode 100644 api/src/oauth/hydra.config.ts
 create mode 100644 api/src/oauth/oauth.controller.spec.ts
 create mode 100644 api/src/oauth/oauth.controller.ts
 delete mode 100644 app/src/auth/kratos/session.ts
 delete mode 100644 kratos/README.md
 delete mode 100644 kratos/docker-compose.yml
 create mode 100644 ory/README.md
 create mode 100644 ory/config/hydra.yml
 rename {kratos => ory}/config/identity.schema.json (100%)
 rename {kratos => ory}/config/kratos.yml (90%)
 create mode 100644 ory/docker-compose.yml
 create mode 100644 ory/seed-auth-provider.mjs

diff --git a/api/.env.example b/api/.env.example
index 09b880e64f..ef9d5e465c 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -63,3 +63,8 @@ BYPASS_TEMPLATE_VALIDATION=false
 
 # Maximum file size for media uploads in bytes
 MAX_MEDIA_UPLOAD_FILE_SIZE=15000000 # 15MB
+
+# Ory Hydra (guest auth). Unset, the /oauth/* endpoints refuse every request.
+# HYDRA_ADMIN_URL="http://localhost:4445"
+# The single first-party client whose consent is granted without a screen.
+# HYDRA_TRUSTED_CLIENT_ID="luminary-app"
diff --git a/api/src/app.module.ts b/api/src/app.module.ts
index ff1ea16511..57ccbeb7a7 100644
--- a/api/src/app.module.ts
+++ b/api/src/app.module.ts
@@ -2,6 +2,7 @@ import { Module } from "@nestjs/common";
 import { ConfigModule } from "@nestjs/config";
 import { JwtModule } from "@nestjs/jwt";
 import { AppController } from "./app.controller";
+import { OauthController } from "./oauth/oauth.controller";
 import { DbService } from "./db/db.service";
 import { Socketio } from "./socketio";
 import { S3Service } from "./s3/s3.service";
@@ -57,6 +58,7 @@ if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
         QueryController,
         FtsSearchController,
         StorageStatusController,
+        OauthController,
     ],
     providers: [
         DbService,
diff --git a/api/src/auth/authIdentity.service.spec.ts b/api/src/auth/authIdentity.service.spec.ts
index d2b14688ea..5836e6d702 100644
--- a/api/src/auth/authIdentity.service.spec.ts
+++ b/api/src/auth/authIdentity.service.spec.ts
@@ -1,4 +1,4 @@
-import { AuthIdentityService } from "./authIdentity.service";
+import { AuthIdentityService, providerBaseUrl } from "./authIdentity.service";
 import { Test, TestingModule } from "@nestjs/testing";
 import { JwtService } from "@nestjs/jwt";
 import { DbService } from "../db/db.service";
@@ -1196,3 +1196,17 @@ describe("AuthGuard (Integrated)", () => {
         });
     });
 });
+
+describe("providerBaseUrl", () => {
+    it("assumes https for a bare hostname, as every configured provider uses", () => {
+        expect(providerBaseUrl("auth.example.com")).toBe("https://auth.example.com");
+    });
+
+    it("honours an explicit scheme, so a provider can be reached over http in development", () => {
+        expect(providerBaseUrl("http://localhost:4444")).toBe("http://localhost:4444");
+    });
+
+    it("drops a trailing slash, which the issuer and JWKS URLs add back themselves", () => {
+        expect(providerBaseUrl("https://auth.example.com/")).toBe("https://auth.example.com");
+    });
+});
diff --git a/api/src/auth/authIdentity.service.ts b/api/src/auth/authIdentity.service.ts
index f75d02b093..7a25ea73c3 100644
--- a/api/src/auth/authIdentity.service.ts
+++ b/api/src/auth/authIdentity.service.ts
@@ -35,6 +35,17 @@ export type AuthFailureReason = "provider_not_found" | "token_invalid";
 
 export const AUTH_FAILURE_MESSAGE = "Invalid authentication token";
 
+/**
+ * The provider's base URL. `domain` is normally a bare hostname and https is
+ * assumed, but an explicit scheme is honoured so a provider can be reached over
+ * http in development — the same rule `app/src/auth.ts` already applies when it
+ * builds the OIDC authority, so both ends agree on what a domain means.
+ */
+export function providerBaseUrl(domain: string): string {
+    const withScheme = /^https?:\/\//.test(domain) ? domain : `https://${domain}`;
+    return withScheme.replace(/\/+$/, "");
+}
+
 @Injectable()
 export class AuthIdentityService implements OnModuleInit {
     private readonly logger = new Logger(AuthIdentityService.name);
@@ -325,7 +336,7 @@ export class AuthIdentityService implements OnModuleInit {
                     cache: true,
                     rateLimit: true,
                     jwksRequestsPerMinute: 5,
-                    jwksUri: `https://${provider.domain}/.well-known/jwks.json`,
+                    jwksUri: `${providerBaseUrl(provider.domain)}/.well-known/jwks.json`,
                 });
                 this.jwksClients.set(provider.domain, jwksClient);
             }
@@ -344,7 +355,7 @@ export class AuthIdentityService implements OnModuleInit {
             const payload = await this.jwtService.verifyAsync(token, {
                 secret: publicKey,
                 audience: provider.audience,
-                issuer: `https://${provider.domain}/`,
+                issuer: `${providerBaseUrl(provider.domain)}/`,
                 algorithms: ["RS256"],
             });
 
diff --git a/api/src/oauth/hydra.config.ts b/api/src/oauth/hydra.config.ts
new file mode 100644
index 0000000000..d83b909807
--- /dev/null
+++ b/api/src/oauth/hydra.config.ts
@@ -0,0 +1,23 @@
+/**
+ * Hydra's admin API is never reachable from a browser, so accepting a login,
+ * consent or logout request is server work. These values switch that endpoint
+ * on; with `adminUrl` unset the controller refuses every request, so an
+ * environment that does not run Hydra cannot be talked into acting as its
+ * consent authority.
+ */
+export type HydraConfig = {
+    adminUrl?: string;
+    /**
+     * The one client whose consent is granted without asking. OAuth2 is a
+     * delegation protocol: skipping the screen is only defensible when the
+     * client and the identity provider are the same product.
+     */
+    trustedClientId?: string;
+};
+
+export function hydraConfig(): HydraConfig {
+    return {
+        adminUrl: process.env.HYDRA_ADMIN_URL?.replace(/\/+$/, ""),
+        trustedClientId: process.env.HYDRA_TRUSTED_CLIENT_ID,
+    };
+}
diff --git a/api/src/oauth/oauth.controller.spec.ts b/api/src/oauth/oauth.controller.spec.ts
new file mode 100644
index 0000000000..200cc7dcca
--- /dev/null
+++ b/api/src/oauth/oauth.controller.spec.ts
@@ -0,0 +1,77 @@
+import {
+    BadRequestException,
+    ForbiddenException,
+    ServiceUnavailableException,
+} from "@nestjs/common";
+import { OauthController } from "./oauth.controller";
+
+const reply = () => ({ redirect: jest.fn() }) as any;
+const ok = (body: unknown) => ({ ok: true, status: 200, json: async () => body }) as Response;
+
+describe("OauthController", () => {
+    let controller: OauthController;
+    let fetchMock: jest.Mock;
+
+    beforeEach(() => {
+        controller = new OauthController();
+        process.env.HYDRA_ADMIN_URL = "http://hydra:4445";
+        process.env.HYDRA_TRUSTED_CLIENT_ID = "luminary-app";
+        fetchMock = jest.fn();
+        global.fetch = fetchMock as unknown as typeof fetch;
+    });
+
+    afterEach(() => {
+        delete process.env.HYDRA_ADMIN_URL;
+        delete process.env.HYDRA_TRUSTED_CLIENT_ID;
+        jest.restoreAllMocks();
+    });
+
+    it("refuses to act as a consent authority when no provider is configured", async () => {
+        delete process.env.HYDRA_ADMIN_URL;
+        await expect(controller.consent("challenge", reply())).rejects.toThrow(
+            ServiceUnavailableException,
+        );
+    });
+
+    it("rejects a request with no challenge", async () => {
+        await expect(controller.consent("", reply())).rejects.toThrow(BadRequestException);
+    });
+
+    it("grants the trusted client exactly what it asked for", async () => {
+        fetchMock
+            .mockResolvedValueOnce(
+                ok({
+                    client: { client_id: "luminary-app" },
+                    requested_scope: ["openid", "email"],
+                    requested_access_token_audience: ["luminary-api"],
+                }),
+            )
+            .mockResolvedValueOnce(ok({ redirect_to: "http://hydra/continue" }));
+
+        const res = reply();
+        await controller.consent("chal", res);
+
+        const accept = JSON.parse(fetchMock.mock.calls[1][1].body);
+        expect(accept.grant_scope).toEqual(["openid", "email"]);
+        expect(accept.grant_access_token_audience).toEqual(["luminary-api"]);
+        // The claims AutoGroupMappings conditions are written against.
+        expect(accept.session.access_token).toEqual({ tier: "guest" });
+        expect(res.redirect).toHaveBeenCalledWith("http://hydra/continue", 302);
+    });
+
+    it("will not skip the consent screen for any other client", async () => {
+        fetchMock.mockResolvedValueOnce(ok({ client: { client_id: "someone-else" } }));
+
+        await expect(controller.consent("chal", reply())).rejects.toThrow(ForbiddenException);
+        // Nothing was granted.
+        expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    it("accepts a logout challenge and sends the browser on", async () => {
+        fetchMock.mockResolvedValueOnce(ok({ redirect_to: "http://app/bye" }));
+
+        const res = reply();
+        await controller.logout("chal", res);
+        expect(res.redirect).toHaveBeenCalledWith("http://app/bye", 302);
+    });
+});
diff --git a/api/src/oauth/oauth.controller.ts b/api/src/oauth/oauth.controller.ts
new file mode 100644
index 0000000000..0400618249
--- /dev/null
+++ b/api/src/oauth/oauth.controller.ts
@@ -0,0 +1,115 @@
+import {
+    BadRequestException,
+    Controller,
+    ForbiddenException,
+    Get,
+    Query,
+    Res,
+    ServiceUnavailableException,
+} from "@nestjs/common";
+import type { FastifyReply } from "fastify";
+import { hydraConfig } from "./hydra.config";
+
+type ConsentRequest = {
+    client?: { client_id?: string };
+    requested_scope?: string[];
+    requested_access_token_audience?: string[];
+    subject?: string;
+    context?: Record<string, unknown>;
+};
+
+/**
+ * Hydra's consent and logout hand-offs. The browser is redirected here, this
+ * accepts the request through Hydra's admin API, and sends the browser back.
+ * Nothing about Hydra's admin API is ever exposed to the client.
+ */
+@Controller("oauth")
+export class OauthController {
+    private admin(): { adminUrl: string; trustedClientId?: string } {
+        const { adminUrl, trustedClientId } = hydraConfig();
+        if (!adminUrl) {
+            throw new ServiceUnavailableException("No OAuth2 provider is configured");
+        }
+        return { adminUrl, trustedClientId };
+    }
+
+    private async hydra<T>(url: string, init?: RequestInit): Promise<T> {
+        const response = await fetch(url, {
+            ...init,
+            headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
+        });
+        if (!response.ok) {
+            throw new BadRequestException(`Hydra rejected the request (${response.status})`);
+        }
+        return (await response.json()) as T;
+    }
+
+    /**
+     * Grants exactly what the trusted client asked for. A first-party client has
+     * nothing to delegate — the user is consenting to the application they are
+     * already using — so there is no screen, but the grant is still explicit and
+     * still refused for any other client.
+     */
+    @Get("consent")
+    async consent(
+        @Query("consent_challenge") challenge: string,
+        @Res() reply: FastifyReply,
+    ): Promise<void> {
+        if (!challenge) throw new BadRequestException("Missing consent_challenge");
+        const { adminUrl, trustedClientId } = this.admin();
+
+        const request = await this.hydra<ConsentRequest>(
+            `${adminUrl}/admin/oauth2/auth/requests/consent?consent_challenge=${encodeURIComponent(
+                challenge,
+            )}`,
+        );
+
+        const clientId = request.client?.client_id;
+        if (!trustedClientId || clientId !== trustedClientId) {
+            throw new ForbiddenException("This client requires a consent screen");
+        }
+
+        const { redirect_to } = await this.hydra<{ redirect_to: string }>(
+            `${adminUrl}/admin/oauth2/auth/requests/consent/accept?consent_challenge=${encodeURIComponent(
+                challenge,
+            )}`,
+            {
+                method: "PUT",
+                body: JSON.stringify({
+                    grant_scope: request.requested_scope ?? [],
+                    grant_access_token_audience: request.requested_access_token_audience ?? [],
+                    remember: true,
+                    remember_for: 0,
+                    // Claims the AutoGroupMappings conditions are written against.
+                    // Promoted to the top level by Hydra's allowed_top_level_claims,
+                    // so a mapping reads `tier`, not `ext.tier`.
+                    session: {
+                        access_token: { tier: "guest" },
+                        id_token: { tier: "guest" },
+                    },
+                }),
+            },
+        );
+
+        reply.redirect(redirect_to, 302);
+    }
+
+    /** The same hand-off for logout, which Hydra also routes through a challenge. */
+    @Get("logout")
+    async logout(
+        @Query("logout_challenge") challenge: string,
+        @Res() reply: FastifyReply,
+    ): Promise<void> {
+        if (!challenge) throw new BadRequestException("Missing logout_challenge");
+        const { adminUrl } = this.admin();
+
+        const { redirect_to } = await this.hydra<{ redirect_to: string }>(
+            `${adminUrl}/admin/oauth2/auth/requests/logout/accept?logout_challenge=${encodeURIComponent(
+                challenge,
+            )}`,
+            { method: "PUT" },
+        );
+
+        reply.redirect(redirect_to, 302);
+    }
+}
diff --git a/app/src/App.vue b/app/src/App.vue
index b3c6c92f27..26276b4d1a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -22,7 +22,6 @@ import AffinityDebugOverlay from "@/components/debug/AffinityDebugOverlay.vue";
 import { useAuthWithPrivacyPolicy } from "@/composables/useAuthWithPrivacyPolicy";
 import { showProviderSelectionModal } from "@/auth";
 import AuthProviderSelectionModal from "@/components/authProvider/AuthProviderSelectionModal.vue";
-import { refreshKratosSession } from "@/auth/kratos/session";
 import { useI18n } from "vue-i18n";
 import defaultLogo from "@/assets/logo.svg?url";
 import { usePwaUpdate } from "@/composables/usePwaUpdate";
@@ -160,9 +159,6 @@ onMounted(() => {
     // auth-scoped response cache, so it's never the wrong (public) content. No-op when
     // the gate never engaged (logged-out reload, or the normal SPA build).
     document.documentElement.classList.remove("ssg-auth-pending");
-
-    // No-op unless the Kratos proof of concept is switched on.
-    refreshKratosSession();
 });
 
 onErrorCaptured((err) => {
diff --git a/app/src/auth/kratos/client.ts b/app/src/auth/kratos/client.ts
index 8071a69212..05a149d9d9 100644
--- a/app/src/auth/kratos/client.ts
+++ b/app/src/auth/kratos/client.ts
@@ -28,6 +28,22 @@ async function readJson<T>(response: Response): Promise<T> {
     return (await response.json()) as T;
 }
 
+/**
+ * The URL a browser flow must be **navigated** to, not fetched. Kratos answers a
+ * JSON fetch of this endpoint with `200 null` when it can complete the flow on
+ * its own — the OAuth2 skip case, where a live session lets it accept Hydra's
+ * login request immediately. Only a real navigation follows the 303 it issues.
+ */
+export function browserInitUrl(
+    type: FlowType,
+    opts: { returnTo?: string; loginChallenge?: string } = {},
+): string {
+    const url = new URL(`${KRATOS_BASE}/self-service/${type}/browser`, window.location.origin);
+    if (opts.returnTo) url.searchParams.set("return_to", opts.returnTo);
+    if (opts.loginChallenge) url.searchParams.set("login_challenge", opts.loginChallenge);
+    return url.toString();
+}
+
 /**
  * Start a browser flow. `returnTo` survives the round trip and decides where
  * success lands. Being signed in already is a normal answer here, not a failure:
diff --git a/app/src/auth/kratos/session.ts b/app/src/auth/kratos/session.ts
deleted file mode 100644
index cd36daa025..0000000000
--- a/app/src/auth/kratos/session.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { computed, ref } from "vue";
-import { isKratosEnabled, logout, whoami } from "./client";
-import type { KratosSessionListEntry } from "./types";
-
-/**
- * The Kratos session, when the proof of concept is switched on. Null is the
- * ordinary guest state, not an error — and it stays null while VITE_KRATOS_URL
- * is unset, so nothing that reads this changes behaviour with Kratos absent.
- *
- * Deliberately separate from `@/auth`'s OIDC session: a Kratos session proves
- * nothing to the Luminary API, so conflating the two would have the app claim
- * an authority it does not have.
- */
-export const kratosSession = ref<KratosSessionListEntry | null>(null);
-
-export const kratosIdentityLabel = computed(() => {
-    const traits = kratosSession.value?.identity?.traits;
-    return traits?.name || traits?.email || "";
-});
-
-export async function refreshKratosSession(): Promise<void> {
-    if (!isKratosEnabled()) return;
-    kratosSession.value = await whoami();
-}
-
-export async function signOutKratos(): Promise<void> {
-    await logout();
-    kratosSession.value = null;
-}
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
index c671c353f5..89d9a1b2dc 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
@@ -8,9 +8,6 @@ import AuthProviderSelectionModal from "./AuthProviderSelectionModal.vue";
 
 vi.mock("vue-i18n", () => ({
     useI18n: () => ({
-        // `te` is false throughout: the Kratos entry's copy has no translation
-        // here, so it renders its English default.
-        te: () => false,
         t: (key: string) =>
             (
                 ({
@@ -25,13 +22,6 @@ vi.mock("@/auth", () => ({
     showProviderSelectionModal: ref(true),
 }));
 
-// Whether the Kratos entry is offered depends on an environment variable, which
-// would otherwise make these assertions depend on the developer's own .env.
-const kratosEnabled = { value: false };
-vi.mock("@/auth/kratos/client", () => ({
-    isKratosEnabled: () => kratosEnabled.value,
-}));
-
 vi.mock("@/components/images/LImage.vue", () => ({
     default: {
         name: "LImage",
@@ -92,7 +82,6 @@ const mockProviderDisplayNameFallback: AuthProviderDto = {
 describe("AuthProviderSelectionModal.vue", () => {
     beforeEach(async () => {
         vi.clearAllMocks();
-        kratosEnabled.value = false;
         showProviderSelectionModal.value = true;
         await db.docs.clear();
     });
@@ -217,53 +206,4 @@ describe("AuthProviderSelectionModal.vue", () => {
             expect(wrapper.html()).toContain("Login with Display Name");
         });
     });
-
-    describe("with the Kratos screens switched on", () => {
-        beforeEach(() => {
-            kratosEnabled.value = true;
-        });
-
-        it("offers the email entry alongside the configured providers", async () => {
-            await db.docs.put(mockProviderA);
-
-            const wrapper = mount(AuthProviderSelectionModal, {
-                props: { isVisible: true },
-            });
-
-            await waitForExpect(() => {
-                expect(wrapper.html()).toContain("Acme Corp");
-                expect(wrapper.html()).toContain("Sign in as Guest");
-            });
-        });
-
-        it("is a method in its own right, so no empty state with no providers", async () => {
-            const wrapper = mount(AuthProviderSelectionModal, {
-                props: { isVisible: true },
-            });
-
-            await waitForExpect(() => {
-                expect(wrapper.html()).toContain("Sign in as Guest");
-            });
-            expect(wrapper.html()).not.toContain("auth.no_methods_available");
-        });
-
-        it("does not send the email entry through loginWithProvider", async () => {
-            const wrapper = mount(AuthProviderSelectionModal, {
-                props: { isVisible: true },
-            });
-
-            await waitForExpect(() => {
-                expect(wrapper.html()).toContain("Sign in as Guest");
-            });
-            const emailButton = wrapper
-                .findAll("button")
-                .find((button) => button.text().includes("Sign in as Guest"));
-            await emailButton!.trigger("click");
-
-            // Kratos is not an OIDC provider; routing it through the OIDC client
-            // would redirect to an /authorize endpoint that does not exist.
-            expect(loginWithProvider).not.toHaveBeenCalled();
-            expect(showProviderSelectionModal.value).toBe(false);
-        });
-    });
 });
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.vue b/app/src/components/authProvider/AuthProviderSelectionModal.vue
index 07bba64d32..a9e1a4a272 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.vue
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import LModal from "@/components/form/LModal.vue";
 import LImage from "@/components/images/LImage.vue";
-import { EnvelopeIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
-// The router singleton rather than useRouter(), so this modal keeps working
-// wherever it is mounted without a router context.
-import router from "@/router";
-import { isKratosEnabled } from "@/auth/kratos/client";
-import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 import { showProviderSelectionModal, loginWithProvider } from "@/auth";
 import { DocType, useHybridQuery, type AuthProviderDto } from "luminary-shared";
 import { computed } from "vue";
@@ -14,9 +9,6 @@ import { useI18n } from "vue-i18n";
 import { resolveI18nEmbedded } from "@/util/resolveI18nEmbedded";
 
 const { t } = useI18n();
-const c = useAuthCopy();
-// Only offered where the Kratos screens exist at all.
-const kratosEnabled = isKratosEnabled();
 const isVisible = defineModel<boolean>("isVisible");
 // AuthProvider is a fully-synced type, so HybridQuery reads from IndexedDB only.
 // Sorting by sortIndex (a non-content field) stays in a computed.
@@ -44,15 +36,6 @@ const handleProviderSelect = (provider: AuthProviderDto) => {
 const handleClose = () => {
     showProviderSelectionModal.value = false;
 };
-
-/**
- * Kratos is not an OIDC provider, so it cannot be an AuthProvider doc and does
- * not go through loginWithProvider — it is its own route in this app.
- */
-const handleGuestSelect = () => {
-    handleClose();
-    router.push({ path: "/auth/login", query: { return_to: router.currentRoute.value.fullPath } });
-};
 </script>
 
 <template>
@@ -63,21 +46,6 @@ const handleGuestSelect = () => {
     >
         <!-- Provider list -->
         <div class="flex flex-col gap-3 py-2">
-            <button
-                v-if="kratosEnabled"
-                class="flex h-full w-full items-center gap-3 rounded-lg border border-zinc-200 bg-white px-4 py-5 hover:bg-zinc-50 hover:shadow-sm dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600/60"
-                @click="handleGuestSelect"
-            >
-                <div
-                    class="flex size-9 shrink-0 items-center justify-center rounded-md bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
-                >
-                    <EnvelopeIcon class="h-5 w-5" />
-                </div>
-                <span class="text-start text-[15px] font-medium text-zinc-700 dark:text-slate-200">
-                    {{ c("auth.methods.guest_sign_in") }}
-                </span>
-            </button>
-
             <button
                 v-for="provider in providers"
                 :key="provider._id"
@@ -129,7 +97,7 @@ const handleGuestSelect = () => {
             </button>
 
             <div
-                v-if="providers.length === 0 && !kratosEnabled"
+                v-if="providers.length === 0"
                 class="flex flex-col items-center justify-center py-8 text-center"
             >
                 <div class="mb-3 rounded-full bg-zinc-100 p-3 dark:bg-slate-700">
diff --git a/app/src/components/navigation/DesktopSidebar.vue b/app/src/components/navigation/DesktopSidebar.vue
index dc9da5b9f2..0df054de46 100644
--- a/app/src/components/navigation/DesktopSidebar.vue
+++ b/app/src/components/navigation/DesktopSidebar.vue
@@ -33,8 +33,6 @@ import {
     showPrivacyPolicyModal,
     useAuthWithPrivacyPolicy,
 } from "@/composables/useAuthWithPrivacyPolicy";
-import { kratosIdentityLabel, kratosSession, signOutKratos } from "@/auth/kratos/session";
-import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
 import { isConnected } from "luminary-shared";
 import { useNotificationStore, type Notification } from "@/stores/notification";
 import { useHydrated } from "@/composables/useHydrated";
@@ -43,7 +41,6 @@ const { t } = useI18n();
 const { openSearch, isSearchOpen } = useSearchOverlay();
 const { collapsed, toggleCollapsed } = useDesktopSidebar();
 const { user, logout, loginWithRedirect, isAuthenticated } = useAuthWithPrivacyPolicy();
-const c = useAuthCopy();
 
 const LOGO = import.meta.env.VITE_LOGO || defaultLogo;
 const LOGO_DARK = import.meta.env.VITE_LOGO_DARK || defaultLogoDark;
@@ -93,31 +90,12 @@ const languageTooltip = computed(() => {
     return name ? `${t("profile_menu.language")} — ${name}` : t("profile_menu.language");
 });
 
-/** A guest session is only the account on show while there is no OIDC one. */
-const hasGuestSession = computed(() => !isAuthenticated.value && !!kratosSession.value);
-
 const accountLabel = computed(() => {
-    if (isAuthenticated.value) {
-        const details = unref(user) as { name?: string; email?: string } | undefined;
-        return details?.name || details?.email || t("profile_menu.title");
-    }
-    return kratosIdentityLabel.value;
+    const details = unref(user) as { name?: string; email?: string } | undefined;
+    return details?.name || details?.email || t("profile_menu.title");
 });
 
-const profileTooltip = computed(() =>
-    isAuthenticated.value || hasGuestSession.value ? accountLabel.value : "",
-);
-
-const authActionLabel = computed(() => {
-    if (isAuthenticated.value) return t("profile_menu.logout");
-    return hasGuestSession.value ? c("auth.guest.sign_out") : t("profile_menu.login");
-});
-
-const handleAuthAction = () => {
-    if (isAuthenticated.value) return handleLogout();
-    if (hasGuestSession.value) return signOutKratos();
-    return handleLogin();
-};
+const profileTooltip = computed(() => (isAuthenticated.value ? accountLabel.value : ""));
 
 const showOfflineNotification = () => {
     useNotificationStore().addNotification({
@@ -421,14 +399,12 @@ const handleLogin = () => {
             <button
                 type="button"
                 :class="[...actionButtonClasses(), !collapsed ? 'mb-2' : 'mb-1']"
-                :title="authActionLabel"
-                @click="handleAuthAction()"
+                :title="isAuthenticated ? t('profile_menu.logout') : t('profile_menu.login')"
+                @click="isAuthenticated ? handleLogout() : handleLogin()"
             >
                 <component
                     :is="
-                        isAuthenticated || hasGuestSession
-                            ? ArrowRightEndOnRectangleIcon
-                            : ArrowLeftEndOnRectangleIcon
+                        isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon
                     "
                     :class="navIconClass"
                     aria-hidden="true"
@@ -437,12 +413,12 @@ const handleLogin = () => {
                     v-if="!collapsed"
                     :class="navLabelClass"
                 >
-                    {{ authActionLabel }}
+                    {{ isAuthenticated ? t("profile_menu.logout") : t("profile_menu.login") }}
                 </span>
             </button>
 
             <div
-                v-if="isAuthenticated || hasGuestSession"
+                v-if="isAuthenticated"
                 :class="[
                     'flex items-center rounded-md',
                     collapsed ? 'justify-center px-0 py-1' : 'gap-3 py-1.5 pl-1.5',
diff --git a/app/src/components/navigation/ProfileMenu.spec.ts b/app/src/components/navigation/ProfileMenu.spec.ts
index 125d2009eb..533c8ae519 100644
--- a/app/src/components/navigation/ProfileMenu.spec.ts
+++ b/app/src/components/navigation/ProfileMenu.spec.ts
@@ -12,7 +12,6 @@ import { isConnected } from "luminary-shared";
 import { useI18n } from "vue-i18n";
 import { useNotificationStore } from "@/stores/notification";
 import { isAuthPluginInstalled } from "@/auth";
-import { kratosSession } from "@/auth/kratos/session";
 
 const routePushMock = vi.hoisted(() => vi.fn());
 vi.mock("vue-router", () => ({
@@ -25,8 +24,6 @@ vi.mock("@/auth", async () => (await import("@/tests/mockAuth")).createAuthMock(
 
 vi.mock("vue-i18n", () => ({
     useI18n: () => ({
-        // The Kratos copy has no translation here, so it renders its English default.
-        te: () => false,
         t: (key: string) => mockLanguageDtoEng.translations[key] || key,
     }),
 }));
@@ -57,7 +54,6 @@ describe("ProfileMenu", () => {
     afterEach(() => {
         vi.clearAllMocks();
         isAuthPluginInstalled.value = false;
-        kratosSession.value = null;
     });
 
     it("shows the user's name", async () => {
@@ -167,42 +163,4 @@ describe("ProfileMenu", () => {
             expect(notificationStore.addNotification).toHaveBeenCalled();
         });
     });
-
-    describe("with a guest session", () => {
-        const guest = {
-            id: "session-1",
-            active: true,
-            identity: { id: "i1", traits: { email: "guest@example.com", name: "Guest Person" } },
-        };
-
-        it("names the guest instead of offering a login", async () => {
-            (auth as any).useAuth.mockReturnValue({ isAuthenticated: ref(false) });
-            kratosSession.value = guest;
-
-            const wrapper = mount(ProfileMenu);
-            await wrapper.find("button").trigger("click");
-
-            expect(wrapper.html()).toContain("Guest Person");
-            // The auth row offers a way out of the guest session, not a way in.
-            const authRow = wrapper.findAll("button").find((button) => {
-                const text = button.text();
-                return text === "Sign out" || text === "Login";
-            });
-            expect(authRow?.text()).toBe("Sign out");
-        });
-
-        it("still offers a login when there is no guest session", async () => {
-            (auth as any).useAuth.mockReturnValue({ isAuthenticated: ref(false) });
-            kratosSession.value = null;
-
-            const wrapper = mount(ProfileMenu);
-            await wrapper.find("button").trigger("click");
-
-            const authRow = wrapper.findAll("button").find((button) => {
-                const text = button.text();
-                return text === "Sign out" || text === "Login";
-            });
-            expect(authRow?.text()).toBe("Login");
-        });
-    });
 });
diff --git a/app/src/components/navigation/ProfileMenu.vue b/app/src/components/navigation/ProfileMenu.vue
index 509525b7e9..7f2bfabc5b 100644
--- a/app/src/components/navigation/ProfileMenu.vue
+++ b/app/src/components/navigation/ProfileMenu.vue
@@ -35,8 +35,6 @@ import LToggle from "../form/LToggle.vue";
 import MobileSidebar from "../common/MobileSidebar.vue";
 import DropdownMenu from "../common/DropdownMenu.vue";
 import { getNavigationItems } from "./navigationItems";
-import { kratosIdentityLabel, kratosSession, signOutKratos } from "@/auth/kratos/session";
-import { useAuthCopy } from "@/components/auth/kratos/useAuthCopy";
 import { useSearchOverlay } from "@/composables/useSearchOverlay";
 
 type Trigger = "avatar" | "bars" | "sidebar";
@@ -49,7 +47,6 @@ withDefaults(defineProps<Props>(), {
 });
 
 const { user, logout, loginWithRedirect, isAuthenticated } = useAuthWithPrivacyPolicy();
-const c = useAuthCopy();
 const router = useRouter();
 
 const showThemeSelector = ref(false);
@@ -160,48 +157,13 @@ const privacyPolicyNavigationItem = computed(
     }),
 );
 
-/**
- * Shown only while a Kratos session exists. It is not folded into the login/logout
- * item above: that one reflects the OIDC session the Luminary API actually honours,
- * and a guest session is a separate thing.
- */
-/**
- * The name on the menu trigger. A guest session is not the OIDC session the API
- * honours, but it is still who the user signed in as, so it is what to show them.
- */
-/** A guest session is only the account on show while there is no OIDC one. */
-const hasGuestSession = computed(() => !isAuthenticated.value && !!kratosSession.value);
-
-const authActionLabel = computed(() => {
-    if (isAuthenticated.value) return t("profile_menu.logout");
-    return hasGuestSession.value ? c("auth.guest.sign_out") : t("profile_menu.login");
-});
-
-const handleAuthAction = () => {
-    if (isAuthenticated.value) return handleLogout();
-    if (hasGuestSession.value) return signOutKratos();
-    return handleLogin();
-};
-
+/** The name shown on the menu trigger and in the panel header. */
 const accountLabel = computed(() => {
-    if (isAuthenticated.value) {
-        // `user` is a ref in the app but a plain object in some mounted tests.
-        const details = unref(user) as { name?: string; email?: string } | undefined;
-        return details?.name || details?.email;
-    }
-    return kratosIdentityLabel.value || t("profile_menu.title");
+    // `user` is a ref in the app but a plain object in some mounted tests.
+    const details = unref(user) as { name?: string; email?: string } | undefined;
+    return isAuthenticated.value ? details?.name || details?.email : t("profile_menu.title");
 });
 
-const kratosNavigationItem = computed(() =>
-    kratosSession.value
-        ? {
-              name: c("auth.guest.signed_in_as", { name: kratosIdentityLabel.value }),
-              icon: UserCircleIcon,
-              action: () => router.push("/auth/account"),
-          }
-        : null,
-);
-
 const userNavigation = computed(() => {
     const authItem = isAuthenticated.value
         ? {
@@ -215,37 +177,25 @@ const userNavigation = computed(() => {
                   showOfflineNotification();
               },
           }
-        : kratosSession.value
-          ? {
-                name: c("auth.guest.sign_out"),
-                icon: ArrowRightEndOnRectangleIcon,
-                action: () => signOutKratos(),
-            }
-          : {
-                name: t("profile_menu.login"),
-                icon: ArrowLeftEndOnRectangleIcon,
-                action: () => {
-                    if (isConnected.value) {
-                        loginWithRedirect();
-                        return;
-                    }
-                    useNotificationStore().addNotification({
-                        id: "no-internet-connection-login",
-                        title: t("profile_menu.login.offline_notification_title"),
-                        description: t("profile_menu.login.offline_notification"),
-                        type: "toast",
-                        state: "error",
-                    } as Notification);
-                },
-            };
-
-    const kratosItem = kratosNavigationItem.value;
-    return [
-        ...commonNavigation.value,
-        ...(kratosItem ? [kratosItem] : []),
-        privacyPolicyNavigationItem.value,
-        authItem,
-    ];
+        : {
+              name: t("profile_menu.login"),
+              icon: ArrowLeftEndOnRectangleIcon,
+              action: () => {
+                  if (isConnected.value) {
+                      loginWithRedirect();
+                      return;
+                  }
+                  useNotificationStore().addNotification({
+                      id: "no-internet-connection-login",
+                      title: t("profile_menu.login.offline_notification_title"),
+                      description: t("profile_menu.login.offline_notification"),
+                      type: "toast",
+                      state: "error",
+                  } as Notification);
+              },
+          };
+
+    return [...commonNavigation.value, privacyPolicyNavigationItem.value, authItem];
 });
 
 const sidebarNavigation = computed(() =>
@@ -555,23 +505,25 @@ const sidebarNavigation = computed(() =>
                 <button
                     type="button"
                     class="mb-2 flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-left text-zinc-600 hover:bg-zinc-200 dark:text-slate-100 dark:hover:bg-slate-700"
-                    @click="handleAuthAction()"
+                    @click="isAuthenticated ? handleLogout() : handleLogin()"
                 >
                     <component
                         :is="
-                            isAuthenticated || hasGuestSession
+                            isAuthenticated
                                 ? ArrowRightEndOnRectangleIcon
                                 : ArrowLeftEndOnRectangleIcon
                         "
                         class="h-5 w-5 flex-shrink-0"
                         aria-hidden="true"
                     />
-                    <span class="text-sm font-medium">{{ authActionLabel }}</span>
+                    <span class="text-sm font-medium">
+                        {{ isAuthenticated ? t("profile_menu.logout") : t("profile_menu.login") }}
+                    </span>
                 </button>
 
                 <!-- Profile display -->
                 <div
-                    v-if="isAuthenticated || hasGuestSession"
+                    v-if="isAuthenticated"
                     class="flex items-center gap-3 rounded-md px-3 py-1.5"
                 >
                     <img
diff --git a/app/src/pages/auth/KratosAccountPage.vue b/app/src/pages/auth/KratosAccountPage.vue
index bf6be32f03..c842e1c79f 100644
--- a/app/src/pages/auth/KratosAccountPage.vue
+++ b/app/src/pages/auth/KratosAccountPage.vue
@@ -6,19 +6,20 @@ import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import AccountSettingsScreen from "@/components/auth/kratos/AccountSettingsScreen.vue";
 import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
 import type { ActiveSession } from "@/components/auth/kratos/AccountSettingsScreen.vue";
-import { listOtherSessions, signOutOtherSessions } from "@/auth/kratos/client";
-import { kratosSession, refreshKratosSession, signOutKratos } from "@/auth/kratos/session";
+import { listOtherSessions, logout, signOutOtherSessions, whoami } from "@/auth/kratos/client";
 import type { KratosSessionListEntry } from "@/auth/kratos/types";
 
 const router = useRouter();
 const loading = ref(true);
-// Shared with the profile menu, so signing out here updates it too.
-const session = kratosSession;
+const session = ref<KratosSessionListEntry | null>(null);
 const others = ref<KratosSessionListEntry[]>([]);
 
 const email = computed(() => session.value?.identity?.traits.email ?? "");
 const verified = computed(
-    () => session.value?.identity?.verifiable_addresses?.some((a) => a.verified) ?? false,
+    () =>
+        session.value?.identity?.verifiable_addresses?.some(
+            (address: { verified: boolean }) => address.verified,
+        ) ?? false,
 );
 
 /** A user agent is not a device name; this is only good enough to tell rows apart. */
@@ -49,7 +50,7 @@ const rows = computed<ActiveSession[]>(() => [
 
 async function load() {
     loading.value = true;
-    await refreshKratosSession();
+    session.value = await whoami();
     others.value = session.value ? await listOtherSessions() : [];
     loading.value = false;
 }
@@ -61,7 +62,7 @@ async function onSignOutOthers() {
 }
 
 async function onSignOut() {
-    await signOutKratos();
+    await logout();
     router.push("/auth/login");
 }
 </script>
diff --git a/app/src/pages/auth/KratosAuthPage.vue b/app/src/pages/auth/KratosAuthPage.vue
index 03f1e4dd96..7d19e37492 100644
--- a/app/src/pages/auth/KratosAuthPage.vue
+++ b/app/src/pages/auth/KratosAuthPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import SignInMethodsScreen from "@/components/auth/kratos/SignInMethodsScreen.vue";
@@ -8,8 +8,8 @@ import OneTimeCodeScreen from "@/components/auth/kratos/OneTimeCodeScreen.vue";
 import RegistrationScreen from "@/components/auth/kratos/RegistrationScreen.vue";
 import AuthDoneScreen from "@/components/auth/kratos/AuthDoneScreen.vue";
 import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
+import { browserInitUrl } from "@/auth/kratos/client";
 import { useKratosAuth } from "@/auth/kratos/useKratosAuth";
-import { refreshKratosSession } from "@/auth/kratos/session";
 import type { FlowType } from "@/auth/kratos/types";
 
 const props = defineProps<{ flowType: FlowType }>();
@@ -44,7 +44,18 @@ const returnTo = computed(() => (route.query.return_to as string) || "/");
 const showMethods = ref(props.flowType === "login");
 
 onMounted(async () => {
-    await start(route.query.flow as string | undefined, returnTo.value);
+    const flowId = route.query.flow as string | undefined;
+    const loginChallenge = route.query.login_challenge as string | undefined;
+
+    // Hydra sent the user here to authenticate. Hand the challenge to Kratos by
+    // navigating: it either completes the OAuth2 login outright (an existing
+    // session) or bounces back here with a flow id for the screens below.
+    if (loginChallenge && !flowId) {
+        window.location.assign(browserInitUrl(props.flowType, { loginChallenge }));
+        return;
+    }
+
+    await start(flowId, returnTo.value);
     // Already signed in: show the account rather than an error about a flow
     // Kratos was right to refuse.
     if (step.value === "signed-in") {
@@ -58,14 +69,6 @@ const codeMode = computed(() => (props.flowType === "verification" ? "verificati
 const identifierMode = computed(() => (props.flowType === "recovery" ? "recovery" : "login"));
 const flowMessage = computed(() => message.value ?? undefined);
 
-// The flow completes without a page load, so the shared session state — and
-// everything reading it, the profile menu included — is stale until it is
-// re-read. Watched rather than tied to the "continue" button, because the user
-// may navigate away from the success screen instead of pressing it.
-watch(step, (current) => {
-    if (current === "done") refreshKratosSession();
-});
-
 const leave = () => router.push(returnTo.value);
 
 /** Back from the address step returns to the chooser when there is one to return to. */
diff --git a/docs/temp_kratos-guest-auth-ui.md b/docs/temp_kratos-guest-auth-ui.md
index 377ccfb05f..87861b4ae6 100644
--- a/docs/temp_kratos-guest-auth-ui.md
+++ b/docs/temp_kratos-guest-auth-ui.md
@@ -1,4 +1,12 @@
-# Guest auth on Ory Kratos — UI design
+# Guest auth on Ory — UI design
+
+> **Status: built on Hydra.** The recommendation at the end of this doc was
+> taken. Kratos authenticates and **Hydra issues the tokens**, so a guest is an
+> ordinary `AuthProvider` row and neither the app's OIDC client nor the API's
+> JWKS validation has a Kratos special case. Sections below that weigh
+> Kratos-only against Hydra are kept because they are why the decision went that
+> way — not because both options are live. `ory/README.md` is the running
+> instructions.
 
 Working doc for the app-side login screens. The screens themselves are real components in
 `app/src/components/auth/kratos/`; run `npm run dev` in `app/` and open `/design/auth` to
@@ -304,3 +312,45 @@ one and `ext.email` for another, and the CMS config stays uniform.
   allowed `offline_access` and issue refresh tokens. The app itself needs no
   change.
 - The JWKS path and the `azp ?? client_id` check match Hydra's output as-is.
+
+## What the Hydra refactor actually changed
+
+Verified against Hydra v2.2.0 and Kratos v1.3.1 running locally, not against the
+docs alone.
+
+**Removed.** The parallel guest session the Kratos-only PoC needed — its shared
+`kratosSession` ref, the bespoke entry in the provider modal, and the guest
+branches in the profile menu and desktop sidebar. With Hydra the ordinary OIDC
+session is _the_ session, so a second one alongside it would have been a second
+answer to "who is signed in".
+
+**Added.**
+
+- `api/src/oauth/` — Hydra's consent and logout hand-offs. Accepting either needs
+  Hydra's admin API, which a browser must never reach, so `urls.consent` points
+  at the API rather than the web client. It grants only what the request asked
+  for, and only for the one trusted client id; anything else is refused rather
+  than silently approved.
+- `providerBaseUrl()` in `authIdentity.service.ts` — the issuer and JWKS URL were
+  built as `https://${domain}/`, so a provider could never be reached over http.
+  An explicit scheme is now honoured and https still assumed without one, which
+  is the rule `app/src/auth.ts` already applied on the client. Without it no
+  local Hydra can be validated at all.
+- `ory/seed-auth-provider.mjs` — writes the provider doc. Deliberately the same
+  shape the CMS writes; there is no Kratos-specific field to add.
+
+**Two findings that shaped the code.**
+
+- `skip_consent: true` on the client does **not** remove the consent round trip
+  in self-hosted Hydra. It still redirects and still expects an accept. The
+  observed consent request even reported `skip: false`. An endpoint was needed
+  either way.
+- **A browser flow has to be navigated to, not fetched.** Requesting
+  `/self-service/login/browser?login_challenge=…` with `Accept: application/json`
+  returns `200 null` in the case where Kratos can complete the flow itself; the
+  `303` only appears for a real navigation. The PoC fetched it, which worked
+  only because nothing had a live session yet.
+
+**Confirmed end to end**: `iss`, `aud`, `client_id` and `sub` all land where the
+API's validator expects them, `tier` arrives promoted to the top level rather
+than under `ext`, and a refresh token is issued — which `signinSilent()` requires.
diff --git a/kratos/README.md b/kratos/README.md
deleted file mode 100644
index d4c905dcd5..0000000000
--- a/kratos/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Kratos — guest auth proof of concept
-
-Development only. Nothing here is deployed, and nothing in `api/` depends on it.
-
-## Run it
-
-```sh
-docker compose -f kratos/docker-compose.yml up -d
-```
-
-Then set `VITE_KRATOS_URL="/.ory"` in `app/.env` and start the app as usual
-(`npm run dev` in `app/`). The routes appear only when that variable is set.
-
-- `/auth/login` — sign in with an emailed one-time code
-- `/auth/signup` — create an account with the same code method
-- `/auth/verify`, `/auth/recovery`, `/auth/account`
-- **Codes arrive in Mailpit: http://localhost:8025** — no mail leaves the machine.
-
-## Why the /.ory proxy
-
-Kratos' `serve.public.base_url` is the _app's_ origin plus `/.ory`, not Kratos'
-own address, and Vite proxies that prefix to the container. Every URL Kratos
-hands the browser is therefore same-site with the app, so the session and CSRF
-cookies survive. Production wants the same shape from a real reverse proxy —
-that is the whole reason the screens live in the app rather than in a separate
-self-service UI.
-
-## What is configured
-
-- `code.passwordless_enabled: true` — one setting turns the emailed code into a
-  login method _and_ a registration method. `password` and `link` are off.
-- `identity.schema.json` — a `guest` identity: `email` (required, the code
-  identifier, verifiable) and an optional `name`.
-- Registration runs the `session` hook, so signing up ends signed in.
-- SQLite on a named volume, so identities survive `docker compose down`. Use
-  `down -v` to start from nothing.
-
-## Reset
-
-```sh
-docker compose -f kratos/docker-compose.yml down -v
-```
diff --git a/kratos/docker-compose.yml b/kratos/docker-compose.yml
deleted file mode 100644
index cb87075b82..0000000000
--- a/kratos/docker-compose.yml
+++ /dev/null
@@ -1,35 +0,0 @@
-# Local Kratos for the guest-auth PoC. Nothing here is deployed.
-#   docker compose -f kratos/docker-compose.yml up -d
-# Kratos public API :4433 (reached through the app's /.ory proxy), admin :4434,
-# Mailpit UI http://localhost:8025 — that is where the one-time codes arrive.
-services:
-    kratos-migrate:
-        image: oryd/kratos:v1.3.1
-        volumes:
-            - kratos-sqlite:/var/lib/sqlite
-            - ./config:/etc/config/kratos
-        command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
-        restart: on-failure
-
-    kratos:
-        image: oryd/kratos:v1.3.1
-        depends_on:
-            kratos-migrate:
-                condition: service_completed_successfully
-        ports:
-            - "4433:4433"
-            - "4434:4434"
-        volumes:
-            - kratos-sqlite:/var/lib/sqlite
-            - ./config:/etc/config/kratos
-        command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
-        restart: unless-stopped
-
-    mailpit:
-        image: axllent/mailpit:latest
-        ports:
-            - "8025:8025"
-        restart: unless-stopped
-
-volumes:
-    kratos-sqlite:
diff --git a/ory/README.md b/ory/README.md
new file mode 100644
index 0000000000..68de1da4f0
--- /dev/null
+++ b/ory/README.md
@@ -0,0 +1,70 @@
+# Ory — guest auth
+
+Development only. Kratos authenticates, **Hydra issues the tokens**, so from
+Luminary's side a guest is an ordinary OIDC provider: the app's existing
+`oidc-client-ts` redirect and the API's existing JWKS validation both apply with
+no special case for Kratos anywhere.
+
+## Run it
+
+```sh
+docker compose -f ory/docker-compose.yml up -d
+node ory/seed-auth-provider.mjs        # creates the "Sign in as Guest" provider doc
+```
+
+`api/.env` needs `HYDRA_ADMIN_URL` and `HYDRA_TRUSTED_CLIENT_ID` (see
+`api/.env.example`), and `app/.env` needs `VITE_KRATOS_URL="/.ory"` for the
+login screens. **Restart the API** after adding them.
+
+Then sign in from the app's normal login modal — "Sign in as Guest" is a
+provider button like any other. **Codes arrive in Mailpit: http://localhost:8025.**
+
+## What runs
+
+| Service | Port | Role                                                      |
+| ------- | ---- | --------------------------------------------------------- |
+| Kratos  | 4433 | Self-service login/registration. Never issues app tokens. |
+| Kratos  | 4434 | Admin. Not reachable from the browser.                    |
+| Hydra   | 4444 | OAuth2/OIDC. Issues the JWT the Luminary API validates.   |
+| Hydra   | 4445 | Admin. Consent and logout are accepted here, by the API.  |
+| Mailpit | 8025 | Catches the one-time codes.                               |
+
+## The flow
+
+```
+app → Hydra /oauth2/auth
+    → our /auth/login?login_challenge=…   (navigated, not fetched — see below)
+    → Kratos: email, one-time code
+    → Kratos accepts the OAuth2 login request
+    → Hydra → the API's /oauth/consent  (server-side accept)
+    → Hydra issues the code → app exchanges it → JWT
+```
+
+Two things that are easy to get wrong and are why the code looks as it does:
+
+- **A browser flow must be navigated to, not fetched.** Asking
+  `/self-service/login/browser?login_challenge=…` with `Accept: application/json`
+  returns `200 null` when Kratos can complete the flow itself — the case where a
+  live session lets it accept Hydra's request outright. Only a real navigation
+  follows the `303`.
+- **Consent is server work.** Accepting it needs Hydra's admin API, which a
+  browser must never reach, so `urls.consent` points at the API rather than the
+  web client. `skip_consent` on the client does _not_ remove the round trip in
+  self-hosted Hydra — Hydra still asks, the API still has to answer.
+
+## Claims
+
+The API's consent accept injects `tier: "guest"`, and Hydra's
+`allowed_top_level_claims` promotes it out of `ext`, so an `AutoGroupMappings`
+condition reads `tier` rather than `ext.tier` — the same shape as every other
+provider's mappings.
+
+Give guests their groups with a mapping on this provider whose condition is
+**"User is authenticated"**: every guest who signs in through it lands in the
+groups you choose. No per-user claim needed.
+
+## Reset
+
+```sh
+docker compose -f ory/docker-compose.yml down -v
+```
diff --git a/ory/config/hydra.yml b/ory/config/hydra.yml
new file mode 100644
index 0000000000..a55c12b13c
--- /dev/null
+++ b/ory/config/hydra.yml
@@ -0,0 +1,66 @@
+# Hydra configuration for the guest-auth proof of concept. Development only.
+#
+# Hydra is what makes a guest an ordinary OIDC provider from Luminary's side:
+# the app's existing oidc-client-ts redirect and the API's existing JWKS
+# validation both apply unchanged. Kratos authenticates; Hydra issues the token.
+serve:
+    public:
+        port: 4444
+        cors:
+            enabled: true
+            allowed_origins:
+                - http://localhost:4174
+            allowed_methods: [GET, POST, PUT, DELETE]
+            allowed_headers: [Authorization, Content-Type]
+            allow_credentials: true
+    admin:
+        port: 4445
+
+dsn: sqlite:///var/lib/sqlite/hydra.sqlite?_fk=true&mode=rwc
+
+urls:
+    self:
+        # The API derives both the expected issuer and the JWKS URL from the
+        # AuthProvider doc's `domain`, so this value and that field must agree
+        # exactly, trailing slash included.
+        issuer: http://localhost:4444/
+    # Hydra sends the user here to authenticate; it is our own route, driving
+    # Kratos. The screens the user sees are ours.
+    login: http://localhost:4174/auth/login
+    # Consent and logout are accepted through Hydra's admin API, which a browser
+    # must never reach — so they are handled by the API, not by the web client.
+    consent: http://localhost:3001/oauth/consent
+    logout: http://localhost:3001/oauth/logout
+    error: http://localhost:4174/auth/error
+    post_logout_redirect: http://localhost:4174/
+
+oauth2:
+    # Claims added at consent are nested under `ext` unless they are promoted.
+    # Promoting them keeps AutoGroupMappings conditions identical across
+    # providers — `email`, not `ext.email` for this one and `email` for others.
+    allowed_top_level_claims:
+        - email
+        - name
+        - tier
+    mirror_top_level_claims: false
+    exclude_not_before_claim: false
+
+strategies:
+    # Opaque tokens are the default and would fail the API's JWT verification
+    # outright. The environment variable spelling of this setting does not work.
+    access_token: jwt
+
+ttl:
+    access_token: 1h
+    refresh_token: 720h
+    id_token: 1h
+    auth_code: 10m
+
+secrets:
+    system:
+        - PLEASE-CHANGE-ME-I-AM-A-DEV-ONLY-SECRET
+
+log:
+    level: debug
+    format: text
+    leak_sensitive_values: true
diff --git a/kratos/config/identity.schema.json b/ory/config/identity.schema.json
similarity index 100%
rename from kratos/config/identity.schema.json
rename to ory/config/identity.schema.json
diff --git a/kratos/config/kratos.yml b/ory/config/kratos.yml
similarity index 90%
rename from kratos/config/kratos.yml
rename to ory/config/kratos.yml
index b53f768add..bc44baaba1 100644
--- a/kratos/config/kratos.yml
+++ b/ory/config/kratos.yml
@@ -24,10 +24,18 @@ session:
         domain: localhost
         same_site: Lax
 
+# Hydra's admin API. With this set, Kratos understands the `login_challenge`
+# Hydra puts on the login URL: it validates the challenge, honours Hydra's skip
+# flag, and on success accepts the OAuth2 login request itself. Consent is not
+# Kratos' job.
+oauth2_provider:
+    url: http://hydra:4445
+
 selfservice:
     default_browser_return_url: http://localhost:4174/
     allowed_return_urls:
         - http://localhost:4174
+        - http://localhost:4444
 
     methods:
         # One decision, both flows: `passwordless_enabled` turns the emailed
diff --git a/ory/docker-compose.yml b/ory/docker-compose.yml
new file mode 100644
index 0000000000..c1a2023559
--- /dev/null
+++ b/ory/docker-compose.yml
@@ -0,0 +1,98 @@
+# Local Ory stack for the guest-auth proof of concept. Nothing here is deployed.
+#   docker compose -f ory/docker-compose.yml up -d
+#
+# Kratos authenticates (public :4433, admin :4434), Hydra issues the OAuth2/OIDC
+# tokens (public :4444, admin :4445), Mailpit catches the one-time codes
+# (http://localhost:8025). Hydra's admin API is never reachable from the browser.
+services:
+    kratos-migrate:
+        image: oryd/kratos:v1.3.1
+        volumes:
+            - kratos-sqlite:/var/lib/sqlite
+            - ./config:/etc/config/kratos
+        command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
+        restart: on-failure
+
+    kratos:
+        image: oryd/kratos:v1.3.1
+        depends_on:
+            kratos-migrate:
+                condition: service_completed_successfully
+        ports:
+            - "4433:4433"
+            - "4434:4434"
+        volumes:
+            - kratos-sqlite:/var/lib/sqlite
+            - ./config:/etc/config/kratos
+        command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
+        restart: unless-stopped
+
+    hydra-migrate:
+        image: oryd/hydra:v2.2.0
+        volumes:
+            - hydra-sqlite:/var/lib/sqlite
+            - ./config:/etc/config/hydra
+        command: migrate sql -e --yes --config /etc/config/hydra/hydra.yml
+        restart: on-failure
+
+    hydra:
+        image: oryd/hydra:v2.2.0
+        depends_on:
+            hydra-migrate:
+                condition: service_completed_successfully
+        ports:
+            - "4444:4444"
+            - "4445:4445"
+        volumes:
+            - hydra-sqlite:/var/lib/sqlite
+            - ./config:/etc/config/hydra
+        command: serve all --dev --config /etc/config/hydra/hydra.yml
+        restart: unless-stopped
+
+    # Registers the app as a public client once Hydra is up. The admin API
+    # rather than the CLI, because `hydra create oauth2-client` generates the
+    # client id and the AuthProvider doc has to name a known one.
+    #
+    # `skip_consent` marks it first-party: there is nothing for a user to
+    # consent to when the client and the identity provider are the same product.
+    hydra-client:
+        image: curlimages/curl:latest
+        depends_on:
+            hydra:
+                condition: service_started
+        entrypoint: ["/bin/sh", "-c"]
+        command:
+            - |
+              until curl -sf http://hydra:4445/health/ready >/dev/null; do sleep 1; done
+              if curl -sf http://hydra:4445/admin/clients/luminary-app >/dev/null 2>&1; then
+                echo "client luminary-app already registered"; exit 0
+              fi
+              curl -sS -X POST http://hydra:4445/admin/clients \
+                -H 'Content-Type: application/json' \
+                -d '{
+                  "client_id": "luminary-app",
+                  "client_name": "Luminary app",
+                  "grant_types": ["authorization_code", "refresh_token"],
+                  "response_types": ["code"],
+                  "scope": "openid offline_access profile email",
+                  "audience": ["luminary-api"],
+                  "redirect_uris": ["http://localhost:4174"],
+                  "post_logout_redirect_uris": ["http://localhost:4174"],
+                  "token_endpoint_auth_method": "none",
+                  "skip_consent": true,
+                  "skip_logout_consent": true
+                }' && echo "" && echo "registered client luminary-app"
+        restart: on-failure
+
+    mailpit:
+        image: axllent/mailpit:latest
+        ports:
+            - "8025:8025"
+        restart: unless-stopped
+
+volumes:
+    # Kratos (uid 10000) and Hydra (uid 100) run as different users, so one
+    # shared volume leaves whichever writes first owning it and the other
+    # unable to open its database.
+    kratos-sqlite:
+    hydra-sqlite:
diff --git a/ory/seed-auth-provider.mjs b/ory/seed-auth-provider.mjs
new file mode 100644
index 0000000000..39d3b749be
--- /dev/null
+++ b/ory/seed-auth-provider.mjs
@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+// Creates (or updates) the AuthProvider doc that points Luminary at Hydra.
+//
+// A Hydra-backed guest is an ordinary OIDC provider, so this writes exactly the
+// same shape the CMS writes — there is no Kratos-specific field. Run it once:
+//   node ory/seed-auth-provider.mjs
+// Reads DB_CONNECTION_STRING and DB_DATABASE from api/.env.
+
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+function env() {
+    const raw = readFileSync(join(here, "..", "api", ".env"), "utf8");
+    const values = {};
+    for (const line of raw.split("\n")) {
+        const match = /^\s*([A-Z0-9_]+)\s*=\s*(.*)$/.exec(line);
+        if (match) values[match[1]] = match[2].trim().replace(/^["']|["']$/g, "");
+    }
+    return values;
+}
+
+const { DB_CONNECTION_STRING, DB_DATABASE } = env();
+if (!DB_CONNECTION_STRING || !DB_DATABASE) {
+    console.error("DB_CONNECTION_STRING and DB_DATABASE must be set in api/.env");
+    process.exit(1);
+}
+
+// fetch() refuses a URL carrying credentials, and CouchDB connection strings
+// conventionally carry them — so they move to an Authorization header.
+const connection = new URL(DB_CONNECTION_STRING);
+const auth =
+    connection.username || connection.password
+        ? "Basic " +
+          Buffer.from(
+              `${decodeURIComponent(connection.username)}:${decodeURIComponent(connection.password)}`,
+          ).toString("base64")
+        : undefined;
+connection.username = "";
+connection.password = "";
+
+const base = `${connection.toString().replace(/\/+$/, "")}/${DB_DATABASE}`;
+const headers = { "Content-Type": "application/json", ...(auth ? { Authorization: auth } : {}) };
+const id = "auth-provider-guest-hydra";
+
+// `domain` carries its scheme because Hydra runs over http locally. The API
+// honours an explicit scheme and assumes https without one, so a production
+// entry is the bare hostname exactly as every other provider's is.
+const doc = {
+    _id: id,
+    type: "authProvider",
+    memberOf: [],
+    updatedTimeUtc: Date.now(),
+    domain: "http://localhost:4444",
+    clientId: "luminary-app",
+    audience: "luminary-api",
+    label: "Sign in as Guest",
+    displayName: "Guest (Ory)",
+    sortIndex: 0,
+};
+
+const existing = await fetch(`${base}/${id}`, { headers });
+if (existing.ok) doc._rev = (await existing.json())._rev;
+
+const response = await fetch(`${base}/${id}`, {
+    method: "PUT",
+    headers,
+    body: JSON.stringify(doc),
+});
+
+if (!response.ok) {
+    console.error(`CouchDB refused the write (${response.status}):`, await response.text());
+    process.exit(1);
+}
+console.log(existing.ok ? "updated" : "created", id, "->", doc.domain);
+console.log("The provider appears in the app's login modal as:", doc.label);

From c58d9d6b77a4852ec91a9d9f36f70437d2d9cd05 Mon Sep 17 00:00:00 2001
From: Dirk <dirkdevbusiness@gmail.com>
Date: Thu, 20 Aug 2026 10:46:20 +0200
Subject: [PATCH 10/15] Add PoC docker-compose setup for guest auth via Ory
 Kratos + Hydra

- Kratos handles identity/password auth; Hydra issues OAuth2 tokens
  consumed by Luminary's API, since the API validates bearer access
  tokens rather than Kratos sessions directly
- Adds a minimal login/consent bridge server to wire Kratos flows into
  Hydra's login/consent challenges, plus Caddy for local TLS routing
- Includes docker-compose.yml.bak as a reference of the pre-Hydra,
  Kratos-only setup this replaces
---
 ory-kratos-setup-poc/Caddyfile                |   9 +
 ory-kratos-setup-poc/docker-compose.yml       | 123 ++++++++++
 ory-kratos-setup-poc/docker-compose.yml.bak   |  61 +++++
 ory-kratos-setup-poc/hydra-config/hydra.yml   |  32 +++
 .../kratos-config/identity.schema.json        |  38 +++
 ory-kratos-setup-poc/kratos-config/kratos.yml |  76 ++++++
 ory-kratos-setup-poc/login-consent/server.js  | 219 ++++++++++++++++++
 .../postgres-init/001-create-hydra-db.sql     |   2 +
 8 files changed, 560 insertions(+)
 create mode 100644 ory-kratos-setup-poc/Caddyfile
 create mode 100644 ory-kratos-setup-poc/docker-compose.yml
 create mode 100644 ory-kratos-setup-poc/docker-compose.yml.bak
 create mode 100644 ory-kratos-setup-poc/hydra-config/hydra.yml
 create mode 100644 ory-kratos-setup-poc/kratos-config/identity.schema.json
 create mode 100644 ory-kratos-setup-poc/kratos-config/kratos.yml
 create mode 100644 ory-kratos-setup-poc/login-consent/server.js
 create mode 100644 ory-kratos-setup-poc/postgres-init/001-create-hydra-db.sql

diff --git a/ory-kratos-setup-poc/Caddyfile b/ory-kratos-setup-poc/Caddyfile
new file mode 100644
index 0000000000..a281f57200
--- /dev/null
+++ b/ory-kratos-setup-poc/Caddyfile
@@ -0,0 +1,9 @@
+auth.luminary.local {
+	tls internal
+	reverse_proxy hydra:4444
+}
+
+login.luminary.local {
+	tls internal
+	reverse_proxy login-consent:4456
+}
diff --git a/ory-kratos-setup-poc/docker-compose.yml b/ory-kratos-setup-poc/docker-compose.yml
new file mode 100644
index 0000000000..08f359aec3
--- /dev/null
+++ b/ory-kratos-setup-poc/docker-compose.yml
@@ -0,0 +1,123 @@
+version: "3.8"
+
+services:
+  postgres:
+    image: postgres:16
+    container_name: kratos-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: kratos
+      POSTGRES_PASSWORD: kratos
+      POSTGRES_DB: kratos
+    volumes:
+      - kratos-postgres-data:/var/lib/postgresql/data
+      - ./postgres-init:/docker-entrypoint-initdb.d
+    ports:
+      - "5432:5432"
+
+  kratos-migrate:
+    image: oryd/kratos:v1.3.1
+    container_name: kratos-migrate
+    depends_on:
+      - postgres
+    environment:
+      - DSN=postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
+    volumes:
+      - ./kratos-config:/etc/config/kratos
+    command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
+
+  kratos:
+    image: oryd/kratos:v1.3.1
+    container_name: kratos
+    restart: unless-stopped
+    depends_on:
+      - postgres
+      - kratos-migrate
+    environment:
+      - DSN=postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
+    ports:
+      - "4433:4433" # public API
+      - "4434:4434" # admin API
+    volumes:
+      - ./kratos-config:/etc/config/kratos
+    command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
+
+  kratos-selfservice-ui:
+    image: oryd/kratos-selfservice-ui-node:v1.3.1
+    container_name: kratos-selfservice-ui
+    restart: unless-stopped
+    depends_on:
+      - kratos
+    environment:
+      - PORT=4455
+      - KRATOS_PUBLIC_URL=http://kratos:4433/
+      - KRATOS_BROWSER_URL=http://127.0.0.1:4433/
+      - COOKIE_SECRET=PLEASE-CHANGE-ME-I-AM-INSECURE
+      - CSRF_COOKIE_NAME=ory_csrf_ui
+      - CSRF_COOKIE_SECRET=PLEASE-CHANGE-ME-I-AM-INSECURE
+    ports:
+      - "4455:4455"
+
+  hydra-migrate:
+    image: oryd/hydra:v2.3.0
+    container_name: hydra-migrate
+    depends_on:
+      - postgres
+    environment:
+      - DSN=postgres://kratos:kratos@postgres:5432/hydra?sslmode=disable
+    volumes:
+      - ./hydra-config:/etc/config/hydra
+    command: migrate -c /etc/config/hydra/hydra.yml sql -e --yes
+
+  hydra:
+    image: oryd/hydra:v2.3.0
+    container_name: hydra
+    restart: unless-stopped
+    depends_on:
+      - postgres
+      - hydra-migrate
+    environment:
+      - DSN=postgres://kratos:kratos@postgres:5432/hydra?sslmode=disable
+    ports:
+      - "4444:4444" # public API (token/authorize endpoints)
+      - "4445:4445" # admin API (create OAuth2 clients, etc.)
+    volumes:
+      - ./hydra-config:/etc/config/hydra
+    command: serve all -c /etc/config/hydra/hydra.yml
+
+  login-consent:
+    image: node:20-alpine
+    container_name: login-consent
+    restart: unless-stopped
+    depends_on:
+      - kratos
+      - hydra
+    environment:
+      - HYDRA_ADMIN_URL=http://hydra:4445
+      - KRATOS_PUBLIC_URL=http://kratos:4433
+      - KRATOS_ADMIN_URL=http://kratos:4434
+      - PORT=4456
+    volumes:
+      - ./login-consent:/app
+    working_dir: /app
+    command: node server.js
+
+  caddy:
+    image: caddy:2
+    container_name: caddy
+    restart: unless-stopped
+    depends_on:
+      - hydra
+      - login-consent
+    ports:
+      - "443:443"
+      - "80:80"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile
+      - caddy-data:/data
+      - caddy-config:/config
+
+volumes:
+  kratos-postgres-data:
+  caddy-data:
+  caddy-config:
diff --git a/ory-kratos-setup-poc/docker-compose.yml.bak b/ory-kratos-setup-poc/docker-compose.yml.bak
new file mode 100644
index 0000000000..c59d03a45e
--- /dev/null
+++ b/ory-kratos-setup-poc/docker-compose.yml.bak
@@ -0,0 +1,61 @@
+version: "3.8"
+
+services:
+  postgres:
+    image: postgres:16
+    container_name: kratos-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: kratos
+      POSTGRES_PASSWORD: kratos
+      POSTGRES_DB: kratos
+    volumes:
+      - kratos-postgres-data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+
+  kratos-migrate:
+    image: oryd/kratos:v1.3.1
+    container_name: kratos-migrate
+    depends_on:
+      - postgres
+    environment:
+      - DSN=postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
+    volumes:
+      - ./kratos-config:/etc/config/kratos
+    command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
+
+  kratos:
+    image: oryd/kratos:v1.3.1
+    container_name: kratos
+    restart: unless-stopped
+    depends_on:
+      - postgres
+      - kratos-migrate
+    environment:
+      - DSN=postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
+    ports:
+      - "4433:4433" # public API
+      - "4434:4434" # admin API
+    volumes:
+      - ./kratos-config:/etc/config/kratos
+    command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
+
+  kratos-selfservice-ui:
+    image: oryd/kratos-selfservice-ui-node:v1.3.1
+    container_name: kratos-selfservice-ui
+    restart: unless-stopped
+    depends_on:
+      - kratos
+    environment:
+      - PORT=4455
+      - KRATOS_PUBLIC_URL=http://kratos:4433/
+      - KRATOS_BROWSER_URL=http://127.0.0.1:4433/
+      - COOKIE_SECRET=PLEASE-CHANGE-ME-I-AM-INSECURE
+      - CSRF_COOKIE_NAME=ory_csrf_ui
+      - CSRF_COOKIE_SECRET=PLEASE-CHANGE-ME-I-AM-INSECURE
+    ports:
+      - "4455:4455"
+
+volumes:
+  kratos-postgres-data:
\ No newline at end of file
diff --git a/ory-kratos-setup-poc/hydra-config/hydra.yml b/ory-kratos-setup-poc/hydra-config/hydra.yml
new file mode 100644
index 0000000000..8f062c0e91
--- /dev/null
+++ b/ory-kratos-setup-poc/hydra-config/hydra.yml
@@ -0,0 +1,32 @@
+dsn: postgres://kratos:kratos@postgres:5432/hydra?sslmode=disable
+
+serve:
+  public:
+    cors:
+      enabled: true
+
+urls:
+  self:
+    issuer: https://auth.luminary.local/
+  consent: https://login.luminary.local/consent
+  login: https://login.luminary.local/login
+  logout: https://login.luminary.local/logout
+
+strategies:
+  access_token: jwt
+
+secrets:
+  system:
+    - PLEASE-CHANGE-ME-I-AM-INSECURE
+
+oidc:
+  subject_identifiers:
+    supported_types:
+      - public
+      - pairwise
+    pairwise:
+      salt: PLEASE-CHANGE-ME-I-AM-INSECURE
+
+log:
+  level: debug
+  format: text
diff --git a/ory-kratos-setup-poc/kratos-config/identity.schema.json b/ory-kratos-setup-poc/kratos-config/identity.schema.json
new file mode 100644
index 0000000000..e7024e0e08
--- /dev/null
+++ b/ory-kratos-setup-poc/kratos-config/identity.schema.json
@@ -0,0 +1,38 @@
+{
+  "$id": "https://schemas.ory.sh/presets/kratos/identity.email.schema.json",
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Public User",
+  "type": "object",
+  "properties": {
+    "traits": {
+      "type": "object",
+      "properties": {
+        "email": {
+          "type": "string",
+          "format": "email",
+          "title": "E-Mail",
+          "minLength": 3,
+          "ory.sh/kratos": {
+            "credentials": {
+              "password": {
+                "identifier": true
+              }
+            },
+            "verification": {
+              "via": "email"
+            },
+            "recovery": {
+              "via": "email"
+            }
+          }
+        },
+        "name": {
+          "type": "string",
+          "title": "Name"
+        }
+      },
+      "required": ["email"],
+      "additionalProperties": false
+    }
+  }
+}
diff --git a/ory-kratos-setup-poc/kratos-config/kratos.yml b/ory-kratos-setup-poc/kratos-config/kratos.yml
new file mode 100644
index 0000000000..758d84bc3c
--- /dev/null
+++ b/ory-kratos-setup-poc/kratos-config/kratos.yml
@@ -0,0 +1,76 @@
+version: v1.3.1
+
+dsn: postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
+
+serve:
+  public:
+    base_url: http://127.0.0.1:4433/
+    cors:
+      enabled: true
+  admin:
+    base_url: http://127.0.0.1:4434/
+
+selfservice:
+  default_browser_return_url: http://127.0.0.1:4455/
+  allowed_return_urls:
+    - http://127.0.0.1:4455
+
+  methods:
+    password:
+      enabled: true
+
+  flows:
+    error:
+      ui_url: http://127.0.0.1:4455/error
+
+    settings:
+      ui_url: http://127.0.0.1:4455/settings
+      privileged_session_max_age: 15m
+
+    recovery:
+      enabled: true
+      ui_url: http://127.0.0.1:4455/recovery
+
+    verification:
+      enabled: true
+      ui_url: http://127.0.0.1:4455/verification
+
+    logout:
+      after:
+        default_browser_return_url: http://127.0.0.1:4455/login
+
+    login:
+      ui_url: http://127.0.0.1:4455/login
+      lifespan: 10m
+
+    registration:
+      lifespan: 10m
+      ui_url: http://127.0.0.1:4455/registration
+      after:
+        password:
+          hooks:
+            - hook: session
+
+log:
+  level: debug
+  format: text
+
+secrets:
+  cookie:
+    - PLEASE-CHANGE-ME-I-AM-INSECURE
+  cipher:
+    - 32-LETTER-LONG-SECRET-NOT-SECURE
+
+ciphers:
+  algorithm: xchacha20-poly1305
+
+hashers:
+  algorithm: bcrypt
+  bcrypt:
+    cost: 8
+
+identity:
+  default_schema_id: default
+  schemas:
+    - id: default
+      url: file:///etc/config/kratos/identity.schema.json
diff --git a/ory-kratos-setup-poc/login-consent/server.js b/ory-kratos-setup-poc/login-consent/server.js
new file mode 100644
index 0000000000..bc3d1f4cc8
--- /dev/null
+++ b/ory-kratos-setup-poc/login-consent/server.js
@@ -0,0 +1,219 @@
+import { createServer } from "node:http";
+
+const HYDRA_ADMIN_URL = process.env.HYDRA_ADMIN_URL || "http://hydra:4445";
+const KRATOS_PUBLIC_URL = process.env.KRATOS_PUBLIC_URL || "http://kratos:4433";
+const KRATOS_ADMIN_URL = process.env.KRATOS_ADMIN_URL || "http://kratos:4434";
+const PORT = process.env.PORT || 4456;
+const REMEMBER_FOR_SECONDS = 3600;
+
+function loginFormHtml(challenge, error) {
+  return `<!doctype html>
+<html><body style="font-family: sans-serif; max-width: 360px; margin: 80px auto;">
+<h2>Sign in to Luminary</h2>
+${error ? `<p style="color:red;">${error}</p>` : ""}
+<form method="POST" action="/login?login_challenge=${encodeURIComponent(challenge)}">
+  <div><label>Email<br><input type="email" name="email" required autofocus></label></div>
+  <div style="margin-top:8px;"><label>Password<br><input type="password" name="password" required></label></div>
+  <button type="submit" style="margin-top:12px;">Sign in</button>
+</form>
+<p style="margin-top:16px;">New here? <a href="/register?login_challenge=${encodeURIComponent(challenge)}">Sign up</a></p>
+</body></html>`;
+}
+
+function registerFormHtml(challenge, error) {
+  return `<!doctype html>
+<html><body style="font-family: sans-serif; max-width: 360px; margin: 80px auto;">
+<h2>Sign up for Luminary</h2>
+${error ? `<p style="color:red;">${error}</p>` : ""}
+<form method="POST" action="/register?login_challenge=${encodeURIComponent(challenge)}">
+  <div><label>Email<br><input type="email" name="email" required autofocus></label></div>
+  <div style="margin-top:8px;"><label>Password<br><input type="password" name="password" required minlength="8"></label></div>
+  <button type="submit" style="margin-top:12px;">Sign up</button>
+</form>
+<p style="margin-top:16px;">Already have an account? <a href="/login?login_challenge=${encodeURIComponent(challenge)}">Sign in</a></p>
+</body></html>`;
+}
+
+async function readFormBody(req) {
+  const chunks = [];
+  for await (const chunk of req) chunks.push(chunk);
+  const params = new URLSearchParams(Buffer.concat(chunks).toString("utf8"));
+  return Object.fromEntries(params);
+}
+
+async function hydraFetch(path, options) {
+  const res = await fetch(`${HYDRA_ADMIN_URL}${path}`, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...(options?.headers || {}) },
+  });
+  const body = await res.json();
+  if (!res.ok) throw new Error(`Hydra ${path} -> ${res.status}: ${JSON.stringify(body)}`);
+  return body;
+}
+
+function redirect(res, location) {
+  res.writeHead(302, { Location: location });
+  res.end();
+}
+
+async function handleLoginGet(url, res) {
+  const challenge = url.searchParams.get("login_challenge");
+  if (!challenge) return badRequest(res, "missing login_challenge");
+
+  const loginRequest = await hydraFetch(
+    `/admin/oauth2/auth/requests/login?login_challenge=${encodeURIComponent(challenge)}`,
+  );
+
+  if (loginRequest.skip) {
+    const accept = await hydraFetch(
+      `/admin/oauth2/auth/requests/login/accept?login_challenge=${encodeURIComponent(challenge)}`,
+      { method: "PUT", body: JSON.stringify({ subject: loginRequest.subject }) },
+    );
+    return redirect(res, accept.redirect_to);
+  }
+
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(loginFormHtml(challenge));
+}
+
+async function acceptLoginAndRedirect(res, challenge, identityId) {
+  const accept = await hydraFetch(
+    `/admin/oauth2/auth/requests/login/accept?login_challenge=${encodeURIComponent(challenge)}`,
+    {
+      method: "PUT",
+      body: JSON.stringify({
+        subject: identityId,
+        remember: true,
+        remember_for: REMEMBER_FOR_SECONDS,
+      }),
+    },
+  );
+  redirect(res, accept.redirect_to);
+}
+
+async function handleLoginPost(req, url, res) {
+  const challenge = url.searchParams.get("login_challenge");
+  if (!challenge) return badRequest(res, "missing login_challenge");
+
+  const { email, password } = await readFormBody(req);
+
+  const flow = await (await fetch(`${KRATOS_PUBLIC_URL}/self-service/login/api`)).json();
+  const submit = await fetch(`${KRATOS_PUBLIC_URL}/self-service/login?flow=${flow.id}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Accept: "application/json" },
+    body: JSON.stringify({ method: "password", identifier: email, password }),
+  });
+
+  if (!submit.ok) {
+    res.writeHead(200, { "Content-Type": "text/html" });
+    return res.end(loginFormHtml(challenge, "Invalid email or password."));
+  }
+
+  const { session } = await submit.json();
+  await acceptLoginAndRedirect(res, challenge, session.identity.id);
+}
+
+async function handleRegisterGet(url, res) {
+  const challenge = url.searchParams.get("login_challenge");
+  if (!challenge) return badRequest(res, "missing login_challenge");
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(registerFormHtml(challenge));
+}
+
+async function handleRegisterPost(req, url, res) {
+  const challenge = url.searchParams.get("login_challenge");
+  if (!challenge) return badRequest(res, "missing login_challenge");
+
+  const { email, password } = await readFormBody(req);
+
+  const flow = await (await fetch(`${KRATOS_PUBLIC_URL}/self-service/registration/api`)).json();
+  const submit = await fetch(`${KRATOS_PUBLIC_URL}/self-service/registration?flow=${flow.id}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Accept: "application/json" },
+    body: JSON.stringify({ method: "password", password, traits: { email } }),
+  });
+
+  if (!submit.ok) {
+    const body = await submit.json().catch(() => null);
+    const message = body?.ui?.messages?.[0]?.text || "Could not create account. Try a different email or a stronger password.";
+    res.writeHead(200, { "Content-Type": "text/html" });
+    return res.end(registerFormHtml(challenge, message));
+  }
+
+  const { identity } = await submit.json();
+  await acceptLoginAndRedirect(res, challenge, identity.id);
+}
+
+async function handleConsentGet(url, res) {
+  const challenge = url.searchParams.get("consent_challenge");
+  if (!challenge) return badRequest(res, "missing consent_challenge");
+
+  const consentRequest = await hydraFetch(
+    `/admin/oauth2/auth/requests/consent?consent_challenge=${encodeURIComponent(challenge)}`,
+  );
+
+  const identity = await (
+    await fetch(`${KRATOS_ADMIN_URL}/admin/identities/${consentRequest.subject}`)
+  ).json();
+
+  const claims = {
+    email: identity.traits?.email,
+    name: identity.traits?.name,
+  };
+
+  const accept = await hydraFetch(
+    `/admin/oauth2/auth/requests/consent/accept?consent_challenge=${encodeURIComponent(challenge)}`,
+    {
+      method: "PUT",
+      body: JSON.stringify({
+        grant_scope: consentRequest.requested_scope,
+        grant_access_token_audience: consentRequest.requested_access_token_audience,
+        remember: true,
+        remember_for: REMEMBER_FOR_SECONDS,
+        session: {
+          // Luminary's AuthGuard verifies the bearer ACCESS token, not the ID token,
+          // so identity claims have to land on both or the API never sees them.
+          access_token: claims,
+          id_token: claims,
+        },
+      }),
+    },
+  );
+  redirect(res, accept.redirect_to);
+}
+
+async function handleLogoutGet(url, res) {
+  const challenge = url.searchParams.get("logout_challenge");
+  if (!challenge) return badRequest(res, "missing logout_challenge");
+
+  const accept = await hydraFetch(
+    `/admin/oauth2/auth/requests/logout/accept?logout_challenge=${encodeURIComponent(challenge)}`,
+    { method: "PUT", body: JSON.stringify({}) },
+  );
+  redirect(res, accept.redirect_to);
+}
+
+function badRequest(res, message) {
+  res.writeHead(400, { "Content-Type": "text/plain" });
+  res.end(message);
+}
+
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  try {
+    if (url.pathname === "/login" && req.method === "GET") return await handleLoginGet(url, res);
+    if (url.pathname === "/login" && req.method === "POST") return await handleLoginPost(req, url, res);
+    if (url.pathname === "/register" && req.method === "GET") return await handleRegisterGet(url, res);
+    if (url.pathname === "/register" && req.method === "POST") return await handleRegisterPost(req, url, res);
+    if (url.pathname === "/consent" && req.method === "GET") return await handleConsentGet(url, res);
+    if (url.pathname === "/logout" && req.method === "GET") return await handleLogoutGet(url, res);
+    res.writeHead(404, { "Content-Type": "text/plain" });
+    res.end("not found");
+  } catch (err) {
+    console.error(err);
+    res.writeHead(500, { "Content-Type": "text/plain" });
+    res.end(`internal error: ${err.message}`);
+  }
+});
+
+server.listen(PORT, () => console.log(`login-consent bridge listening on :${PORT}`));
diff --git a/ory-kratos-setup-poc/postgres-init/001-create-hydra-db.sql b/ory-kratos-setup-poc/postgres-init/001-create-hydra-db.sql
new file mode 100644
index 0000000000..1d40bbce52
--- /dev/null
+++ b/ory-kratos-setup-poc/postgres-init/001-create-hydra-db.sql
@@ -0,0 +1,2 @@
+CREATE DATABASE hydra;
+GRANT ALL PRIVILEGES ON DATABASE hydra TO kratos;

From 8630a7f6486a617b1e3c3b783e16066ad6bd494e Mon Sep 17 00:00:00 2001
From: Dirk <dirkdevbusiness@gmail.com>
Date: Thu, 20 Aug 2026 10:54:57 +0200
Subject: [PATCH 11/15] Add web admin UI for managing Kratos identities and
 Hydra OAuth clients

- Provides a browser-based dashboard (admin.luminary.local) to list/search
  identities and OAuth clients, revoke sessions across both Kratos and
  Hydra, and delete identities/clients during local PoC development.
- Wires the new `admin` service into docker-compose and Caddy alongside
  the existing login-consent flow.
---
 ory-kratos-setup-poc/Caddyfile          |   5 +
 ory-kratos-setup-poc/admin/server.js    | 237 ++++++++++++++++++++++++
 ory-kratos-setup-poc/docker-compose.yml |  17 ++
 3 files changed, 259 insertions(+)
 create mode 100644 ory-kratos-setup-poc/admin/server.js

diff --git a/ory-kratos-setup-poc/Caddyfile b/ory-kratos-setup-poc/Caddyfile
index a281f57200..86cc7b860e 100644
--- a/ory-kratos-setup-poc/Caddyfile
+++ b/ory-kratos-setup-poc/Caddyfile
@@ -7,3 +7,8 @@ login.luminary.local {
 	tls internal
 	reverse_proxy login-consent:4456
 }
+
+admin.luminary.local {
+	tls internal
+	reverse_proxy admin:4457
+}
diff --git a/ory-kratos-setup-poc/admin/server.js b/ory-kratos-setup-poc/admin/server.js
new file mode 100644
index 0000000000..6e06597d1d
--- /dev/null
+++ b/ory-kratos-setup-poc/admin/server.js
@@ -0,0 +1,237 @@
+import { createServer } from "node:http";
+
+const KRATOS_ADMIN_URL = process.env.KRATOS_ADMIN_URL || "http://kratos:4434";
+const HYDRA_ADMIN_URL = process.env.HYDRA_ADMIN_URL || "http://hydra:4445";
+const PORT = process.env.PORT || 4457;
+
+function escapeHtml(value) {
+  return String(value ?? "").replace(
+    /[&<>"']/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
+  );
+}
+
+async function adminFetch(base, path, options) {
+  const res = await fetch(`${base}${path}`, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...(options?.headers || {}) },
+  });
+  if (res.status === 204) return null;
+  const body = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(`${base}${path} -> ${res.status}: ${JSON.stringify(body)}`);
+  return body;
+}
+
+const kratos = (path, options) => adminFetch(KRATOS_ADMIN_URL, path, options);
+const hydra = (path, options) => adminFetch(HYDRA_ADMIN_URL, path, options);
+
+function layout(title, active, body, flash) {
+  return `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>${escapeHtml(title)} — Ory admin</title>
+<style>
+  :root { color-scheme: light dark; }
+  * { box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; color: #1a1a1a; background: #fafafa; }
+  @media (prefers-color-scheme: dark) { body { color: #e4e4e4; background: #16171a; } }
+  h1 { font-size: 1.4rem; margin: 0 0 4px; }
+  .sub { color: #777; font-size: 0.9rem; margin: 0 0 24px; }
+  nav { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid #ddd; }
+  @media (prefers-color-scheme: dark) { nav { border-color: #333; } }
+  nav a { padding: 8px 14px; text-decoration: none; color: inherit; border-bottom: 2px solid transparent; font-size: 0.9rem; }
+  nav a.active { border-color: #4f46e5; font-weight: 600; }
+  table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px #e5e5e5; }
+  @media (prefers-color-scheme: dark) { table { background: #1f2023; box-shadow: 0 0 0 1px #333; } }
+  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: top; }
+  @media (prefers-color-scheme: dark) { th, td { border-color: #2a2b2e; } }
+  tr:last-child td { border-bottom: none; }
+  th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888; }
+  .id { font-family: ui-monospace, monospace; font-size: 0.8rem; color: #666; }
+  form.inline { display: inline; }
+  button.action { font-size: 0.78rem; padding: 4px 8px; border: 1px solid #ccc; background: white; border-radius: 5px; cursor: pointer; color: inherit; margin-right: 4px; }
+  @media (prefers-color-scheme: dark) { button.action { background: #2a2b2e; border-color: #444; } }
+  button.action:hover { border-color: #999; }
+  button.danger { color: #b91c1c; border-color: #f3c2c2; }
+  .flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 20px; font-size: 0.88rem; }
+  .flash.ok { background: #e7f7ee; color: #16653d; }
+  .flash.error { background: #fdecec; color: #92140c; }
+  input[type=search] { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.88rem; width: 260px; }
+  .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
+  .empty { padding: 24px; text-align: center; color: #888; font-size: 0.88rem; }
+</style>
+</head>
+<body>
+<h1>Ory admin</h1>
+<p class="sub">Local dev tooling for the Kratos + Hydra guest-auth PoC.</p>
+<nav>
+  <a href="/identities" class="${active === "identities" ? "active" : ""}">Identities</a>
+  <a href="/clients" class="${active === "clients" ? "active" : ""}">OAuth clients</a>
+</nav>
+${flash ? `<div class="flash ${flash.type}">${escapeHtml(flash.text)}</div>` : ""}
+${body}
+</body>
+</html>`;
+}
+
+function flashFromQuery(url) {
+  const msg = url.searchParams.get("msg");
+  if (!msg) return null;
+  return { text: msg, type: url.searchParams.get("err") ? "error" : "ok" };
+}
+
+function redirect(res, location) {
+  res.writeHead(302, { Location: location });
+  res.end();
+}
+
+function matchesQuery(haystackParts, q) {
+  if (!q) return true;
+  return haystackParts.join(" ").toLowerCase().includes(q);
+}
+
+async function handleIdentitiesGet(url, res) {
+  const q = (url.searchParams.get("q") || "").trim().toLowerCase();
+  const identities = await kratos("/admin/identities?page_size=250");
+
+  const rows = identities
+    .filter((identity) => matchesQuery([identity.id, identity.traits?.email, identity.traits?.name], q))
+    .map(
+      (identity) => `
+      <tr>
+        <td class="id">${escapeHtml(identity.id)}</td>
+        <td>${escapeHtml(identity.traits?.email || "—")}</td>
+        <td>${escapeHtml(identity.traits?.name || "—")}</td>
+        <td>${escapeHtml(identity.state)}</td>
+        <td>${escapeHtml(new Date(identity.created_at).toLocaleString())}</td>
+        <td>
+          <form class="inline" method="POST" action="/identities/${encodeURIComponent(identity.id)}/revoke-sessions">
+            <button class="action" type="submit">Revoke sessions</button>
+          </form>
+          <form class="inline" method="POST" action="/identities/${encodeURIComponent(identity.id)}/delete" onsubmit="return confirm('Delete this identity? This cannot be undone.');">
+            <button class="action danger" type="submit">Delete</button>
+          </form>
+        </td>
+      </tr>`,
+    )
+    .join("");
+
+  const body = `
+    <div class="toolbar">
+      <form method="GET" action="/identities">
+        <input type="search" name="q" placeholder="Search id, email, name" value="${escapeHtml(q)}">
+      </form>
+      <span class="sub" style="margin:0;">${identities.length} identit${identities.length === 1 ? "y" : "ies"}</span>
+    </div>
+    ${
+      rows
+        ? `<table>
+          <thead><tr><th>ID</th><th>Email</th><th>Name</th><th>State</th><th>Created</th><th></th></tr></thead>
+          <tbody>${rows}</tbody>
+        </table>`
+        : `<div class="empty">No identities match.</div>`
+    }
+  `;
+
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(layout("Identities", "identities", body, flashFromQuery(url)));
+}
+
+async function handleIdentityDelete(id, res) {
+  await kratos(`/admin/identities/${encodeURIComponent(id)}`, { method: "DELETE" });
+  redirect(res, `/identities?msg=${encodeURIComponent("Identity deleted.")}`);
+}
+
+async function handleIdentityRevokeSessions(id, res) {
+  await kratos(`/admin/identities/${encodeURIComponent(id)}/sessions`, { method: "DELETE" });
+  // Kratos owns the login session; the Hydra grant survives it, so both have to be revoked to force a fresh consent.
+  await Promise.allSettled([
+    hydra(`/admin/oauth2/auth/sessions/consent?subject=${encodeURIComponent(id)}&all=true`, { method: "DELETE" }),
+    hydra(`/admin/oauth2/auth/sessions/login?subject=${encodeURIComponent(id)}`, { method: "DELETE" }),
+  ]);
+  redirect(res, `/identities?msg=${encodeURIComponent("Kratos and Hydra sessions revoked.")}`);
+}
+
+async function handleClientsGet(url, res) {
+  const q = (url.searchParams.get("q") || "").trim().toLowerCase();
+  const clients = await hydra("/admin/clients?page_size=250");
+
+  const rows = clients
+    .filter((client) => matchesQuery([client.client_id, client.client_name], q))
+    .map(
+      (client) => `
+      <tr>
+        <td class="id">${escapeHtml(client.client_id)}</td>
+        <td>${escapeHtml(client.client_name || "—")}</td>
+        <td>${escapeHtml((client.grant_types || []).join(", "))}</td>
+        <td>${escapeHtml(client.scope || "—")}</td>
+        <td>
+          <form class="inline" method="POST" action="/clients/${encodeURIComponent(client.client_id)}/delete" onsubmit="return confirm('Delete this OAuth2 client? This cannot be undone.');">
+            <button class="action danger" type="submit">Delete</button>
+          </form>
+        </td>
+      </tr>`,
+    )
+    .join("");
+
+  const body = `
+    <div class="toolbar">
+      <form method="GET" action="/clients">
+        <input type="search" name="q" placeholder="Search id, name" value="${escapeHtml(q)}">
+      </form>
+      <span class="sub" style="margin:0;">${clients.length} client${clients.length === 1 ? "" : "s"}</span>
+    </div>
+    ${
+      rows
+        ? `<table>
+          <thead><tr><th>Client ID</th><th>Name</th><th>Grant types</th><th>Scope</th><th></th></tr></thead>
+          <tbody>${rows}</tbody>
+        </table>`
+        : `<div class="empty">No clients match.</div>`
+    }
+  `;
+
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(layout("OAuth clients", "clients", body, flashFromQuery(url)));
+}
+
+async function handleClientDelete(id, res) {
+  await hydra(`/admin/clients/${encodeURIComponent(id)}`, { method: "DELETE" });
+  redirect(res, `/clients?msg=${encodeURIComponent("Client deleted.")}`);
+}
+
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  try {
+    if ((url.pathname === "/" || url.pathname === "") && req.method === "GET") return redirect(res, "/identities");
+    if (url.pathname === "/identities" && req.method === "GET") return await handleIdentitiesGet(url, res);
+    if (url.pathname === "/clients" && req.method === "GET") return await handleClientsGet(url, res);
+
+    const deleteIdentityMatch = url.pathname.match(/^\/identities\/([^/]+)\/delete$/);
+    if (deleteIdentityMatch && req.method === "POST")
+      return await handleIdentityDelete(decodeURIComponent(deleteIdentityMatch[1]), res);
+
+    const revokeMatch = url.pathname.match(/^\/identities\/([^/]+)\/revoke-sessions$/);
+    if (revokeMatch && req.method === "POST")
+      return await handleIdentityRevokeSessions(decodeURIComponent(revokeMatch[1]), res);
+
+    const deleteClientMatch = url.pathname.match(/^\/clients\/([^/]+)\/delete$/);
+    if (deleteClientMatch && req.method === "POST")
+      return await handleClientDelete(decodeURIComponent(deleteClientMatch[1]), res);
+
+    res.writeHead(404, { "Content-Type": "text/plain" });
+    res.end("not found");
+  } catch (err) {
+    console.error(err);
+    // GET failures render inline; redirecting a failed GET back to itself would loop.
+    if (req.method !== "GET") {
+      const backTo = url.pathname.startsWith("/clients") ? "/clients" : "/identities";
+      return redirect(res, `${backTo}?err=1&msg=${encodeURIComponent(err.message)}`);
+    }
+    res.writeHead(502, { "Content-Type": "text/html" });
+    res.end(layout("Error", null, `<div class="flash error">${escapeHtml(err.message)}</div>`, null));
+  }
+});
+
+server.listen(PORT, () => console.log(`ory admin listening on :${PORT}`));
diff --git a/ory-kratos-setup-poc/docker-compose.yml b/ory-kratos-setup-poc/docker-compose.yml
index 08f359aec3..9d0ef2464e 100644
--- a/ory-kratos-setup-poc/docker-compose.yml
+++ b/ory-kratos-setup-poc/docker-compose.yml
@@ -102,6 +102,22 @@ services:
     working_dir: /app
     command: node server.js
 
+  admin:
+    image: node:20-alpine
+    container_name: ory-admin
+    restart: unless-stopped
+    depends_on:
+      - kratos
+      - hydra
+    environment:
+      - HYDRA_ADMIN_URL=http://hydra:4445
+      - KRATOS_ADMIN_URL=http://kratos:4434
+      - PORT=4457
+    volumes:
+      - ./admin:/app
+    working_dir: /app
+    command: node server.js
+
   caddy:
     image: caddy:2
     container_name: caddy
@@ -109,6 +125,7 @@ services:
     depends_on:
       - hydra
       - login-consent
+      - admin
     ports:
       - "443:443"
       - "80:80"

From 9071a5fdaf79906ec8251f6868888454717c3605 Mon Sep 17 00:00:00 2001
From: Johan Bell <belljohan3@gmail.com>
Date: Thu, 20 Aug 2026 11:47:37 +0200
Subject: [PATCH 12/15] Give the login and consent pages a Luminary look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The markup moves to login-consent/views.js as plain functions, so the
pages can be rendered — and looked at — without Kratos, Hydra or a
browser session.

Visually they follow the app: the wordmark from logo.svg with the text on
currentColor so it survives dark mode, the card treatment and type scale
from the app's own components, and the amber primary button. Light and
dark both, from prefers-color-scheme.

Three things were not cosmetic. Error text was interpolated into the page
unescaped, and it comes from Kratos' flow messages, which can carry what
a user typed. There was no viewport meta, so the pages rendered
desktop-width on a phone. And the 500 handler echoed err.message to the
browser — an exception from Kratos or Hydra says more about the
deployment than a user needs, so it goes to the log and the browser gets
a page instead.

Also: labels tied to their inputs, autocomplete hints, autofocus, and
aria-invalid with role="alert" when a submission is refused.
---
 ory-kratos-setup-poc/login-consent/server.js |  59 ++--
 ory-kratos-setup-poc/login-consent/views.js  | 277 +++++++++++++++++++
 2 files changed, 294 insertions(+), 42 deletions(-)
 create mode 100644 ory-kratos-setup-poc/login-consent/views.js

diff --git a/ory-kratos-setup-poc/login-consent/server.js b/ory-kratos-setup-poc/login-consent/server.js
index bc3d1f4cc8..0322f2cd2c 100644
--- a/ory-kratos-setup-poc/login-consent/server.js
+++ b/ory-kratos-setup-poc/login-consent/server.js
@@ -1,4 +1,5 @@
 import { createServer } from "node:http";
+import { errorPage, loginPage, registerPage } from "./views.js";
 
 const HYDRA_ADMIN_URL = process.env.HYDRA_ADMIN_URL || "http://hydra:4445";
 const KRATOS_PUBLIC_URL = process.env.KRATOS_PUBLIC_URL || "http://kratos:4433";
@@ -6,34 +7,6 @@ const KRATOS_ADMIN_URL = process.env.KRATOS_ADMIN_URL || "http://kratos:4434";
 const PORT = process.env.PORT || 4456;
 const REMEMBER_FOR_SECONDS = 3600;
 
-function loginFormHtml(challenge, error) {
-  return `<!doctype html>
-<html><body style="font-family: sans-serif; max-width: 360px; margin: 80px auto;">
-<h2>Sign in to Luminary</h2>
-${error ? `<p style="color:red;">${error}</p>` : ""}
-<form method="POST" action="/login?login_challenge=${encodeURIComponent(challenge)}">
-  <div><label>Email<br><input type="email" name="email" required autofocus></label></div>
-  <div style="margin-top:8px;"><label>Password<br><input type="password" name="password" required></label></div>
-  <button type="submit" style="margin-top:12px;">Sign in</button>
-</form>
-<p style="margin-top:16px;">New here? <a href="/register?login_challenge=${encodeURIComponent(challenge)}">Sign up</a></p>
-</body></html>`;
-}
-
-function registerFormHtml(challenge, error) {
-  return `<!doctype html>
-<html><body style="font-family: sans-serif; max-width: 360px; margin: 80px auto;">
-<h2>Sign up for Luminary</h2>
-${error ? `<p style="color:red;">${error}</p>` : ""}
-<form method="POST" action="/register?login_challenge=${encodeURIComponent(challenge)}">
-  <div><label>Email<br><input type="email" name="email" required autofocus></label></div>
-  <div style="margin-top:8px;"><label>Password<br><input type="password" name="password" required minlength="8"></label></div>
-  <button type="submit" style="margin-top:12px;">Sign up</button>
-</form>
-<p style="margin-top:16px;">Already have an account? <a href="/login?login_challenge=${encodeURIComponent(challenge)}">Sign in</a></p>
-</body></html>`;
-}
-
 async function readFormBody(req) {
   const chunks = [];
   for await (const chunk of req) chunks.push(chunk);
@@ -72,8 +45,8 @@ async function handleLoginGet(url, res) {
     return redirect(res, accept.redirect_to);
   }
 
-  res.writeHead(200, { "Content-Type": "text/html" });
-  res.end(loginFormHtml(challenge));
+  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+  res.end(loginPage(challenge));
 }
 
 async function acceptLoginAndRedirect(res, challenge, identityId) {
@@ -105,8 +78,8 @@ async function handleLoginPost(req, url, res) {
   });
 
   if (!submit.ok) {
-    res.writeHead(200, { "Content-Type": "text/html" });
-    return res.end(loginFormHtml(challenge, "Invalid email or password."));
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    return res.end(loginPage(challenge, "Invalid email or password."));
   }
 
   const { session } = await submit.json();
@@ -116,8 +89,8 @@ async function handleLoginPost(req, url, res) {
 async function handleRegisterGet(url, res) {
   const challenge = url.searchParams.get("login_challenge");
   if (!challenge) return badRequest(res, "missing login_challenge");
-  res.writeHead(200, { "Content-Type": "text/html" });
-  res.end(registerFormHtml(challenge));
+  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+  res.end(registerPage(challenge));
 }
 
 async function handleRegisterPost(req, url, res) {
@@ -136,8 +109,8 @@ async function handleRegisterPost(req, url, res) {
   if (!submit.ok) {
     const body = await submit.json().catch(() => null);
     const message = body?.ui?.messages?.[0]?.text || "Could not create account. Try a different email or a stronger password.";
-    res.writeHead(200, { "Content-Type": "text/html" });
-    return res.end(registerFormHtml(challenge, message));
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    return res.end(registerPage(challenge, message));
   }
 
   const { identity } = await submit.json();
@@ -194,8 +167,8 @@ async function handleLogoutGet(url, res) {
 }
 
 function badRequest(res, message) {
-  res.writeHead(400, { "Content-Type": "text/plain" });
-  res.end(message);
+  res.writeHead(400, { "Content-Type": "text/html; charset=utf-8" });
+  res.end(errorPage(message));
 }
 
 const server = createServer(async (req, res) => {
@@ -207,12 +180,14 @@ const server = createServer(async (req, res) => {
     if (url.pathname === "/register" && req.method === "POST") return await handleRegisterPost(req, url, res);
     if (url.pathname === "/consent" && req.method === "GET") return await handleConsentGet(url, res);
     if (url.pathname === "/logout" && req.method === "GET") return await handleLogoutGet(url, res);
-    res.writeHead(404, { "Content-Type": "text/plain" });
-    res.end("not found");
+    res.writeHead(404, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(errorPage("That page does not exist."));
   } catch (err) {
+    // The reason goes to the log, not to the browser: an exception message from
+    // Kratos or Hydra says more about the deployment than the user needs.
     console.error(err);
-    res.writeHead(500, { "Content-Type": "text/plain" });
-    res.end(`internal error: ${err.message}`);
+    res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(errorPage("The sign-in service could not complete your request."));
   }
 });
 
diff --git a/ory-kratos-setup-poc/login-consent/views.js b/ory-kratos-setup-poc/login-consent/views.js
new file mode 100644
index 0000000000..014e7358a9
--- /dev/null
+++ b/ory-kratos-setup-poc/login-consent/views.js
@@ -0,0 +1,277 @@
+// Pages the user actually sees. Kept apart from server.js so they can be
+// rendered — and looked at — without Kratos, Hydra or a browser session.
+
+/**
+ * Everything interpolated into these pages is escaped. Error text reaches here
+ * from Kratos' flow messages, which can carry values a user typed.
+ */
+export function escapeHtml(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+// The wordmark from the app, with the text set to currentColor so it survives
+// dark mode. The amber mark is the brand colour and stays as it is.
+const LOGO = `<svg class="logo" width="118" height="29" viewBox="0 0 157 39" fill="none"
+     xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Luminary">
+  <path d="M32.704 28.928H39.536V31H30.156V11.484H32.704V28.928ZM55.8499 15.656V31H53.3019V28.732C52.8166 29.516 52.1353 30.132 51.2579 30.58C50.3993 31.0093 49.4473 31.224 48.4019 31.224C47.2073 31.224 46.1339 30.9813 45.1819 30.496C44.2299 29.992 43.4739 29.2453 42.9139 28.256C42.3726 27.2667 42.1019 26.0627 42.1019 24.644V15.656H44.6219V24.308C44.6219 25.82 45.0046 26.9867 45.7699 27.808C46.5353 28.6107 47.5806 29.012 48.9059 29.012C50.2686 29.012 51.3419 28.592 52.1259 27.752C52.9099 26.912 53.3019 25.6893 53.3019 24.084V15.656H55.8499ZM78.6041 15.376C79.7988 15.376 80.8628 15.628 81.7961 16.132C82.7294 16.6173 83.4668 17.3547 84.0081 18.344C84.5494 19.3333 84.8201 20.5373 84.8201 21.956V31H82.3001V22.32C82.3001 20.7893 81.9174 19.6227 81.1521 18.82C80.4054 17.9987 79.3881 17.588 78.1001 17.588C76.7748 17.588 75.7201 18.0173 74.9361 18.876C74.1521 19.716 73.7601 20.9387 73.7601 22.544V31H71.2401V22.32C71.2401 20.7893 70.8574 19.6227 70.0921 18.82C69.3454 17.9987 68.3281 17.588 67.0401 17.588C65.7148 17.588 64.6601 18.0173 63.8761 18.876C63.0921 19.716 62.7001 20.9387 62.7001 22.544V31H60.1521V15.656H62.7001V17.868C63.2041 17.0653 63.8761 16.4493 64.7161 16.02C65.5748 15.5907 66.5174 15.376 67.5441 15.376C68.8321 15.376 69.9708 15.6653 70.9601 16.244C71.9494 16.8227 72.6868 17.672 73.1721 18.792C73.6014 17.7093 74.3108 16.8693 75.3001 16.272C76.2894 15.6747 77.3908 15.376 78.6041 15.376ZM90.3158 13.164C89.8304 13.164 89.4198 12.996 89.0838 12.66C88.7478 12.324 88.5798 11.9133 88.5798 11.428C88.5798 10.9427 88.7478 10.532 89.0838 10.196C89.4198 9.86 89.8304 9.692 90.3158 9.692C90.7824 9.692 91.1744 9.86 91.4918 10.196C91.8278 10.532 91.9958 10.9427 91.9958 11.428C91.9958 11.9133 91.8278 12.324 91.4918 12.66C91.1744 12.996 90.7824 13.164 90.3158 13.164ZM91.5478 15.656V31H88.9998V15.656H91.5478ZM103.366 15.376C105.233 15.376 106.745 15.9453 107.902 17.084C109.06 18.204 109.638 19.828 109.638 21.956V31H107.118V22.32C107.118 20.7893 106.736 19.6227 105.97 18.82C105.205 17.9987 104.16 17.588 102.834 17.588C101.49 17.588 100.417 18.008 99.6144 18.848C98.8304 19.688 98.4384 20.9107 98.4384 22.516V31H95.8904V15.656H98.4384V17.84C98.9424 17.056 99.6237 16.4493 100.482 16.02C101.36 15.5907 102.321 15.376 103.366 15.376ZM112.849 23.272C112.849 21.704 113.166 20.332 113.801 19.156C114.435 17.9613 115.303 17.0373 116.405 16.384C117.525 15.7307 118.766 15.404 120.129 15.404C121.473 15.404 122.639 15.6933 123.629 16.272C124.618 16.8507 125.355 17.5787 125.841 18.456V15.656H128.417V31H125.841V28.144C125.337 29.04 124.581 29.7867 123.573 30.384C122.583 30.9627 121.426 31.252 120.101 31.252C118.738 31.252 117.506 30.916 116.405 30.244C115.303 29.572 114.435 28.6293 113.801 27.416C113.166 26.2027 112.849 24.8213 112.849 23.272ZM125.841 23.3C125.841 22.1427 125.607 21.1347 125.141 20.276C124.674 19.4173 124.039 18.764 123.237 18.316C122.453 17.8493 121.585 17.616 120.633 17.616C119.681 17.616 118.813 17.84 118.029 18.288C117.245 18.736 116.619 19.3893 116.153 20.248C115.686 21.1067 115.453 22.1147 115.453 23.272C115.453 24.448 115.686 25.4747 116.153 26.352C116.619 27.2107 117.245 27.8733 118.029 28.34C118.813 28.788 119.681 29.012 120.633 29.012C121.585 29.012 122.453 28.788 123.237 28.34C124.039 27.8733 124.674 27.2107 125.141 26.352C125.607 25.4747 125.841 24.4573 125.841 23.3ZM135.27 18.148C135.718 17.2707 136.353 16.5893 137.174 16.104C138.014 15.6187 139.032 15.376 140.226 15.376V18.008H139.554C136.698 18.008 135.27 19.5573 135.27 22.656V31H132.722V15.656H135.27V18.148ZM156.384 15.656L147.144 38.224H144.512L147.536 30.832L141.348 15.656H144.176L148.992 28.088L153.752 15.656H156.384Z" fill="currentColor"/>
+  <path d="M11.25 15.533C9.6831 14.5294 7.86076 13.9972 6 14C4.89299 13.9989 3.7939 14.1866 2.75 14.555C2.60379 14.6067 2.4772 14.7024 2.38766 14.829C2.29812 14.9557 2.25002 15.1069 2.25 15.262V29.512C2.25002 29.632 2.27882 29.7502 2.33398 29.8567C2.38915 29.9633 2.46907 30.055 2.56703 30.1243C2.665 30.1936 2.77815 30.2383 2.89699 30.2548C3.01583 30.2713 3.13689 30.259 3.25 30.219C4.13333 29.9074 5.06333 29.7488 6 29.75C7.995 29.75 9.823 30.457 11.25 31.636V15.533ZM12.75 31.636C14.2264 30.4141 16.0836 29.747 18 29.75C18.966 29.75 19.89 29.916 20.75 30.22C20.8632 30.26 20.9843 30.2723 21.1033 30.2557C21.2222 30.2392 21.3354 30.1944 21.4334 30.125C21.5314 30.0556 21.6113 29.9637 21.6664 29.8571C21.7215 29.7504 21.7501 29.6321 21.75 29.512V15.262C21.75 15.1069 21.7019 14.9557 21.6123 14.829C21.5228 14.7024 21.3962 14.6067 21.25 14.555C20.2061 14.1866 19.107 13.9989 18 14C16.1392 13.9972 14.3169 14.5294 12.75 15.533V31.636Z" fill="#FBBF24"/>
+</svg>`;
+
+const CSS = `
+:root {
+    color-scheme: light dark;
+    --page: #fafafa;
+    --card: #ffffff;
+    --card-border: #f4f4f5;
+    --text: #18181b;
+    --muted: #71717a;
+    --field-border: #d4d4d8;
+    --field-bg: #ffffff;
+    --accent: #eab308;
+    --accent-hover: #facc15;
+    --accent-text: #422006;
+    --ring: rgba(234, 179, 8, 0.4);
+    --danger: #b91c1c;
+    --danger-bg: #fef2f2;
+    --danger-border: #fecaca;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --page: #0f172a;
+        --card: #1e293b;
+        --card-border: #1e293b;
+        --text: #f1f5f9;
+        --muted: #94a3b8;
+        --field-border: #475569;
+        --field-bg: #334155;
+        --danger: #fca5a5;
+        --danger-bg: rgba(220, 38, 38, 0.12);
+        --danger-border: rgba(220, 38, 38, 0.35);
+        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    }
+}
+
+* { box-sizing: border-box; }
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px 16px;
+    background: var(--page);
+    color: var(--text);
+    font-family: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 15px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+main {
+    width: 100%;
+    max-width: 400px;
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    padding: 28px 26px;
+}
+
+.logo { display: block; margin-bottom: 22px; color: var(--text); }
+h1 { font-size: 1.3rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
+.sub { color: var(--muted); font-size: 0.9rem; margin: 6px 0 0; }
+
+form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
+.field { display: flex; flex-direction: column; gap: 6px; }
+label { font-size: 0.85rem; font-weight: 500; }
+
+input {
+    width: 100%;
+    padding: 11px 12px;
+    font: inherit;
+    color: var(--text);
+    background: var(--field-bg);
+    border: 1px solid var(--field-border);
+    border-radius: 8px;
+    transition: border-color 0.12s, box-shadow 0.12s;
+}
+input::placeholder { color: var(--muted); opacity: 0.75; }
+input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--ring);
+}
+input[aria-invalid="true"] { border-color: var(--danger); }
+
+button {
+    width: 100%;
+    padding: 12px 16px;
+    font: inherit;
+    font-weight: 600;
+    color: var(--accent-text);
+    background: var(--accent);
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.12s;
+}
+button:hover { background: var(--accent-hover); }
+button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
+
+.alert {
+    display: flex;
+    gap: 9px;
+    align-items: flex-start;
+    margin-top: 18px;
+    padding: 10px 12px;
+    font-size: 0.87rem;
+    color: var(--danger);
+    background: var(--danger-bg);
+    border: 1px solid var(--danger-border);
+    border-radius: 8px;
+}
+.alert svg { flex: none; margin-top: 2px; }
+
+.foot {
+    margin-top: 22px;
+    padding-top: 18px;
+    border-top: 1px solid var(--card-border);
+    font-size: 0.87rem;
+    color: var(--muted);
+    text-align: center;
+}
+@media (prefers-color-scheme: dark) { .foot { border-top-color: rgba(255, 255, 255, 0.08); } }
+.foot a { color: var(--text); font-weight: 500; }
+.foot a:hover { text-decoration: none; }
+.badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 46px;
+    margin-bottom: 18px;
+    border-radius: 50%;
+    color: var(--muted);
+    background: var(--field-bg);
+    border: 1px solid var(--card-border);
+}
+@media (prefers-color-scheme: dark) { .badge { border-color: rgba(255, 255, 255, 0.08); } }
+
+.note-box {
+    margin-top: 20px;
+    padding: 12px 14px;
+    font-size: 0.87rem;
+    color: var(--muted);
+    background: var(--field-bg);
+    border-radius: 8px;
+}
+@media (prefers-color-scheme: dark) { .note-box { background: rgba(255, 255, 255, 0.04); } }
+.note-box strong { color: var(--text); font-weight: 500; }
+`;
+
+const WARNING_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>`;
+
+function alert(message) {
+    return message ? `<div class="alert" role="alert">${WARNING_ICON}<span>${escapeHtml(message)}</span></div>` : "";
+}
+
+function page({ title, heading, subtitle, error, body, foot, badge }) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>${escapeHtml(title)}</title>
+<style>${CSS}</style>
+</head>
+<body>
+<main>
+  ${LOGO}
+  ${badge ? `<div class="badge" aria-hidden="true">${badge}</div>` : ""}
+  <h1>${escapeHtml(heading)}</h1>
+  ${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ""}
+  ${alert(error)}
+  ${body ?? ""}
+  ${foot ? `<p class="foot">${foot}</p>` : ""}
+</main>
+</body>
+</html>`;
+}
+
+const action = (path, challenge) => `${path}?login_challenge=${encodeURIComponent(challenge)}`;
+
+export function loginPage(challenge, error) {
+    return page({
+        title: "Sign in — Luminary",
+        heading: "Sign in",
+        subtitle: "Use the email address and password for your account.",
+        error,
+        body: `<form method="POST" action="${escapeHtml(action("/login", challenge))}">
+    <div class="field">
+      <label for="email">Email address</label>
+      <input id="email" name="email" type="email" inputmode="email" autocomplete="email"
+             placeholder="you@example.com" required autofocus
+             ${error ? 'aria-invalid="true"' : ""}>
+    </div>
+    <div class="field">
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" autocomplete="current-password" required
+             ${error ? 'aria-invalid="true"' : ""}>
+    </div>
+    <button type="submit">Sign in</button>
+  </form>`,
+        foot: `New here? <a href="${escapeHtml(action("/register", challenge))}">Create an account</a>`,
+    });
+}
+
+export function registerPage(challenge, error) {
+    return page({
+        title: "Create an account — Luminary",
+        heading: "Create your account",
+        subtitle: "Your saved items and progress move with you, on every device.",
+        error,
+        body: `<form method="POST" action="${escapeHtml(action("/register", challenge))}">
+    <div class="field">
+      <label for="email">Email address</label>
+      <input id="email" name="email" type="email" inputmode="email" autocomplete="email"
+             placeholder="you@example.com" required autofocus
+             ${error ? 'aria-invalid="true"' : ""}>
+    </div>
+    <div class="field">
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" autocomplete="new-password"
+             minlength="8" required>
+    </div>
+    <button type="submit">Create account</button>
+  </form>`,
+        foot: `Already have an account? <a href="${escapeHtml(action("/login", challenge))}">Sign in</a>`,
+    });
+}
+
+const ERROR_ICON = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+
+/**
+ * Anything that stops the flow before a form can be shown — an expired request,
+ * a missing challenge, a route that does not exist, a failure upstream. There is
+ * nothing to retry from here: the flow starts at the application, not at this
+ * service, so the page says where to go rather than offering a dead button.
+ */
+export function errorPage(message) {
+    return page({
+        title: "Something went wrong — Luminary",
+        heading: "Something went wrong",
+        subtitle: message,
+        badge: ERROR_ICON,
+        body: `<div class="note-box">
+    Sign-in requests expire for your safety. <strong>Go back to Luminary and sign in again</strong> — it only takes a moment.
+  </div>`,
+    });
+}

From 1e988a8bcbbbc281c082a7e2095e1c9eb1e782e4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 25 Aug 2026 14:17:53 +0000
Subject: [PATCH 13/15] Reduce the branch to the standalone Ory PoC

Drop the in-repo Kratos/Hydra integration (api OAuth controller, app auth
screens and routes, the ory/ compose stack, and the design notes) and keep
only ory-kratos-setup-poc, which stands on its own and does not touch the
application.

Also drop the superseded docker-compose.yml.bak left in the PoC directory.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GkEPfBPbGbJUmYDLkunTWD
---
 api/.env.example                              |   5 -
 api/src/app.module.ts                         |   2 -
 api/src/auth/authIdentity.service.spec.ts     |  16 +-
 api/src/auth/authIdentity.service.ts          |  15 +-
 api/src/oauth/hydra.config.ts                 |  23 -
 api/src/oauth/oauth.controller.spec.ts        |  77 ----
 api/src/oauth/oauth.controller.ts             | 115 -----
 app/.env.example                              |   7 -
 app/src/auth/kratos/client.spec.ts            |  71 ---
 app/src/auth/kratos/client.ts                 | 202 ---------
 app/src/auth/kratos/fixtures.spec-data.json   | 299 -------------
 app/src/auth/kratos/nodes.spec.ts             |  60 ---
 app/src/auth/kratos/nodes.ts                  |  56 ---
 app/src/auth/kratos/types.ts                  |  71 ---
 app/src/auth/kratos/useKratosAuth.spec.ts     | 156 -------
 app/src/auth/kratos/useKratosAuth.ts          | 195 ---------
 .../auth/kratos/AccountSettingsScreen.vue     | 167 -------
 .../components/auth/kratos/AuthCodeInput.vue  |  85 ----
 .../components/auth/kratos/AuthDoneScreen.vue |  33 --
 .../auth/kratos/AuthErrorScreen.vue           |  76 ----
 .../components/auth/kratos/AuthMessage.vue    |  37 --
 app/src/components/auth/kratos/AuthShell.vue  |  57 ---
 .../components/auth/kratos/AuthTextField.vue  |  63 ---
 .../auth/kratos/EmailIdentifierScreen.vue     |  72 ---
 .../components/auth/kratos/GuestGateCard.vue  |  45 --
 .../auth/kratos/GuestUpgradeScreen.vue        |  61 ---
 .../auth/kratos/GuestWelcomeScreen.vue        |  49 ---
 .../auth/kratos/OneTimeCodeScreen.vue         |  99 -----
 .../auth/kratos/RegistrationScreen.vue        |  88 ----
 .../auth/kratos/SignInMethodsScreen.vue       | 120 -----
 app/src/components/auth/kratos/authCopy.ts    | 103 -----
 .../components/auth/kratos/screens.spec.ts    |  89 ----
 app/src/components/auth/kratos/types.ts       |  11 -
 app/src/components/auth/kratos/useAuthCopy.ts |  23 -
 .../AuthProviderSelectionModal.spec.ts        |  12 +-
 .../AuthProviderSelectionModal.vue            |   5 +-
 .../components/navigation/DesktopSidebar.vue  |  47 +-
 app/src/components/navigation/ProfileMenu.vue |  36 +-
 app/src/pages/auth/KratosAccountPage.vue      | 104 -----
 app/src/pages/auth/KratosAuthPage.vue         | 172 --------
 app/src/pages/design/AuthArtboard.vue         |  32 --
 app/src/pages/design/AuthDesignPage.spec.ts   |  21 -
 app/src/pages/design/AuthDesignPage.vue       | 412 ------------------
 app/src/router/router.spec.ts                 |  20 +-
 app/src/router/routes.ts                      |  61 ---
 app/vite.config.ts                            |  11 -
 docs/temp_kratos-guest-auth-ui.md             | 356 ---------------
 ory-kratos-setup-poc/docker-compose.yml.bak   |  61 ---
 ory/README.md                                 |  70 ---
 ory/config/hydra.yml                          |  66 ---
 ory/config/identity.schema.json               |  39 --
 ory/config/kratos.yml                         | 121 -----
 ory/docker-compose.yml                        |  98 -----
 ory/seed-auth-provider.mjs                    |  78 ----
 54 files changed, 39 insertions(+), 4431 deletions(-)
 delete mode 100644 api/src/oauth/hydra.config.ts
 delete mode 100644 api/src/oauth/oauth.controller.spec.ts
 delete mode 100644 api/src/oauth/oauth.controller.ts
 delete mode 100644 app/src/auth/kratos/client.spec.ts
 delete mode 100644 app/src/auth/kratos/client.ts
 delete mode 100644 app/src/auth/kratos/fixtures.spec-data.json
 delete mode 100644 app/src/auth/kratos/nodes.spec.ts
 delete mode 100644 app/src/auth/kratos/nodes.ts
 delete mode 100644 app/src/auth/kratos/types.ts
 delete mode 100644 app/src/auth/kratos/useKratosAuth.spec.ts
 delete mode 100644 app/src/auth/kratos/useKratosAuth.ts
 delete mode 100644 app/src/components/auth/kratos/AccountSettingsScreen.vue
 delete mode 100644 app/src/components/auth/kratos/AuthCodeInput.vue
 delete mode 100644 app/src/components/auth/kratos/AuthDoneScreen.vue
 delete mode 100644 app/src/components/auth/kratos/AuthErrorScreen.vue
 delete mode 100644 app/src/components/auth/kratos/AuthMessage.vue
 delete mode 100644 app/src/components/auth/kratos/AuthShell.vue
 delete mode 100644 app/src/components/auth/kratos/AuthTextField.vue
 delete mode 100644 app/src/components/auth/kratos/EmailIdentifierScreen.vue
 delete mode 100644 app/src/components/auth/kratos/GuestGateCard.vue
 delete mode 100644 app/src/components/auth/kratos/GuestUpgradeScreen.vue
 delete mode 100644 app/src/components/auth/kratos/GuestWelcomeScreen.vue
 delete mode 100644 app/src/components/auth/kratos/OneTimeCodeScreen.vue
 delete mode 100644 app/src/components/auth/kratos/RegistrationScreen.vue
 delete mode 100644 app/src/components/auth/kratos/SignInMethodsScreen.vue
 delete mode 100644 app/src/components/auth/kratos/authCopy.ts
 delete mode 100644 app/src/components/auth/kratos/screens.spec.ts
 delete mode 100644 app/src/components/auth/kratos/types.ts
 delete mode 100644 app/src/components/auth/kratos/useAuthCopy.ts
 delete mode 100644 app/src/pages/auth/KratosAccountPage.vue
 delete mode 100644 app/src/pages/auth/KratosAuthPage.vue
 delete mode 100644 app/src/pages/design/AuthArtboard.vue
 delete mode 100644 app/src/pages/design/AuthDesignPage.spec.ts
 delete mode 100644 app/src/pages/design/AuthDesignPage.vue
 delete mode 100644 docs/temp_kratos-guest-auth-ui.md
 delete mode 100644 ory-kratos-setup-poc/docker-compose.yml.bak
 delete mode 100644 ory/README.md
 delete mode 100644 ory/config/hydra.yml
 delete mode 100644 ory/config/identity.schema.json
 delete mode 100644 ory/config/kratos.yml
 delete mode 100644 ory/docker-compose.yml
 delete mode 100644 ory/seed-auth-provider.mjs

diff --git a/api/.env.example b/api/.env.example
index ef9d5e465c..09b880e64f 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -63,8 +63,3 @@ BYPASS_TEMPLATE_VALIDATION=false
 
 # Maximum file size for media uploads in bytes
 MAX_MEDIA_UPLOAD_FILE_SIZE=15000000 # 15MB
-
-# Ory Hydra (guest auth). Unset, the /oauth/* endpoints refuse every request.
-# HYDRA_ADMIN_URL="http://localhost:4445"
-# The single first-party client whose consent is granted without a screen.
-# HYDRA_TRUSTED_CLIENT_ID="luminary-app"
diff --git a/api/src/app.module.ts b/api/src/app.module.ts
index 57ccbeb7a7..ff1ea16511 100644
--- a/api/src/app.module.ts
+++ b/api/src/app.module.ts
@@ -2,7 +2,6 @@ import { Module } from "@nestjs/common";
 import { ConfigModule } from "@nestjs/config";
 import { JwtModule } from "@nestjs/jwt";
 import { AppController } from "./app.controller";
-import { OauthController } from "./oauth/oauth.controller";
 import { DbService } from "./db/db.service";
 import { Socketio } from "./socketio";
 import { S3Service } from "./s3/s3.service";
@@ -58,7 +57,6 @@ if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
         QueryController,
         FtsSearchController,
         StorageStatusController,
-        OauthController,
     ],
     providers: [
         DbService,
diff --git a/api/src/auth/authIdentity.service.spec.ts b/api/src/auth/authIdentity.service.spec.ts
index 5836e6d702..d2b14688ea 100644
--- a/api/src/auth/authIdentity.service.spec.ts
+++ b/api/src/auth/authIdentity.service.spec.ts
@@ -1,4 +1,4 @@
-import { AuthIdentityService, providerBaseUrl } from "./authIdentity.service";
+import { AuthIdentityService } from "./authIdentity.service";
 import { Test, TestingModule } from "@nestjs/testing";
 import { JwtService } from "@nestjs/jwt";
 import { DbService } from "../db/db.service";
@@ -1196,17 +1196,3 @@ describe("AuthGuard (Integrated)", () => {
         });
     });
 });
-
-describe("providerBaseUrl", () => {
-    it("assumes https for a bare hostname, as every configured provider uses", () => {
-        expect(providerBaseUrl("auth.example.com")).toBe("https://auth.example.com");
-    });
-
-    it("honours an explicit scheme, so a provider can be reached over http in development", () => {
-        expect(providerBaseUrl("http://localhost:4444")).toBe("http://localhost:4444");
-    });
-
-    it("drops a trailing slash, which the issuer and JWKS URLs add back themselves", () => {
-        expect(providerBaseUrl("https://auth.example.com/")).toBe("https://auth.example.com");
-    });
-});
diff --git a/api/src/auth/authIdentity.service.ts b/api/src/auth/authIdentity.service.ts
index 7a25ea73c3..f75d02b093 100644
--- a/api/src/auth/authIdentity.service.ts
+++ b/api/src/auth/authIdentity.service.ts
@@ -35,17 +35,6 @@ export type AuthFailureReason = "provider_not_found" | "token_invalid";
 
 export const AUTH_FAILURE_MESSAGE = "Invalid authentication token";
 
-/**
- * The provider's base URL. `domain` is normally a bare hostname and https is
- * assumed, but an explicit scheme is honoured so a provider can be reached over
- * http in development — the same rule `app/src/auth.ts` already applies when it
- * builds the OIDC authority, so both ends agree on what a domain means.
- */
-export function providerBaseUrl(domain: string): string {
-    const withScheme = /^https?:\/\//.test(domain) ? domain : `https://${domain}`;
-    return withScheme.replace(/\/+$/, "");
-}
-
 @Injectable()
 export class AuthIdentityService implements OnModuleInit {
     private readonly logger = new Logger(AuthIdentityService.name);
@@ -336,7 +325,7 @@ export class AuthIdentityService implements OnModuleInit {
                     cache: true,
                     rateLimit: true,
                     jwksRequestsPerMinute: 5,
-                    jwksUri: `${providerBaseUrl(provider.domain)}/.well-known/jwks.json`,
+                    jwksUri: `https://${provider.domain}/.well-known/jwks.json`,
                 });
                 this.jwksClients.set(provider.domain, jwksClient);
             }
@@ -355,7 +344,7 @@ export class AuthIdentityService implements OnModuleInit {
             const payload = await this.jwtService.verifyAsync(token, {
                 secret: publicKey,
                 audience: provider.audience,
-                issuer: `${providerBaseUrl(provider.domain)}/`,
+                issuer: `https://${provider.domain}/`,
                 algorithms: ["RS256"],
             });
 
diff --git a/api/src/oauth/hydra.config.ts b/api/src/oauth/hydra.config.ts
deleted file mode 100644
index d83b909807..0000000000
--- a/api/src/oauth/hydra.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Hydra's admin API is never reachable from a browser, so accepting a login,
- * consent or logout request is server work. These values switch that endpoint
- * on; with `adminUrl` unset the controller refuses every request, so an
- * environment that does not run Hydra cannot be talked into acting as its
- * consent authority.
- */
-export type HydraConfig = {
-    adminUrl?: string;
-    /**
-     * The one client whose consent is granted without asking. OAuth2 is a
-     * delegation protocol: skipping the screen is only defensible when the
-     * client and the identity provider are the same product.
-     */
-    trustedClientId?: string;
-};
-
-export function hydraConfig(): HydraConfig {
-    return {
-        adminUrl: process.env.HYDRA_ADMIN_URL?.replace(/\/+$/, ""),
-        trustedClientId: process.env.HYDRA_TRUSTED_CLIENT_ID,
-    };
-}
diff --git a/api/src/oauth/oauth.controller.spec.ts b/api/src/oauth/oauth.controller.spec.ts
deleted file mode 100644
index 200cc7dcca..0000000000
--- a/api/src/oauth/oauth.controller.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-    BadRequestException,
-    ForbiddenException,
-    ServiceUnavailableException,
-} from "@nestjs/common";
-import { OauthController } from "./oauth.controller";
-
-const reply = () => ({ redirect: jest.fn() }) as any;
-const ok = (body: unknown) => ({ ok: true, status: 200, json: async () => body }) as Response;
-
-describe("OauthController", () => {
-    let controller: OauthController;
-    let fetchMock: jest.Mock;
-
-    beforeEach(() => {
-        controller = new OauthController();
-        process.env.HYDRA_ADMIN_URL = "http://hydra:4445";
-        process.env.HYDRA_TRUSTED_CLIENT_ID = "luminary-app";
-        fetchMock = jest.fn();
-        global.fetch = fetchMock as unknown as typeof fetch;
-    });
-
-    afterEach(() => {
-        delete process.env.HYDRA_ADMIN_URL;
-        delete process.env.HYDRA_TRUSTED_CLIENT_ID;
-        jest.restoreAllMocks();
-    });
-
-    it("refuses to act as a consent authority when no provider is configured", async () => {
-        delete process.env.HYDRA_ADMIN_URL;
-        await expect(controller.consent("challenge", reply())).rejects.toThrow(
-            ServiceUnavailableException,
-        );
-    });
-
-    it("rejects a request with no challenge", async () => {
-        await expect(controller.consent("", reply())).rejects.toThrow(BadRequestException);
-    });
-
-    it("grants the trusted client exactly what it asked for", async () => {
-        fetchMock
-            .mockResolvedValueOnce(
-                ok({
-                    client: { client_id: "luminary-app" },
-                    requested_scope: ["openid", "email"],
-                    requested_access_token_audience: ["luminary-api"],
-                }),
-            )
-            .mockResolvedValueOnce(ok({ redirect_to: "http://hydra/continue" }));
-
-        const res = reply();
-        await controller.consent("chal", res);
-
-        const accept = JSON.parse(fetchMock.mock.calls[1][1].body);
-        expect(accept.grant_scope).toEqual(["openid", "email"]);
-        expect(accept.grant_access_token_audience).toEqual(["luminary-api"]);
-        // The claims AutoGroupMappings conditions are written against.
-        expect(accept.session.access_token).toEqual({ tier: "guest" });
-        expect(res.redirect).toHaveBeenCalledWith("http://hydra/continue", 302);
-    });
-
-    it("will not skip the consent screen for any other client", async () => {
-        fetchMock.mockResolvedValueOnce(ok({ client: { client_id: "someone-else" } }));
-
-        await expect(controller.consent("chal", reply())).rejects.toThrow(ForbiddenException);
-        // Nothing was granted.
-        expect(fetchMock).toHaveBeenCalledTimes(1);
-    });
-
-    it("accepts a logout challenge and sends the browser on", async () => {
-        fetchMock.mockResolvedValueOnce(ok({ redirect_to: "http://app/bye" }));
-
-        const res = reply();
-        await controller.logout("chal", res);
-        expect(res.redirect).toHaveBeenCalledWith("http://app/bye", 302);
-    });
-});
diff --git a/api/src/oauth/oauth.controller.ts b/api/src/oauth/oauth.controller.ts
deleted file mode 100644
index 0400618249..0000000000
--- a/api/src/oauth/oauth.controller.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-    BadRequestException,
-    Controller,
-    ForbiddenException,
-    Get,
-    Query,
-    Res,
-    ServiceUnavailableException,
-} from "@nestjs/common";
-import type { FastifyReply } from "fastify";
-import { hydraConfig } from "./hydra.config";
-
-type ConsentRequest = {
-    client?: { client_id?: string };
-    requested_scope?: string[];
-    requested_access_token_audience?: string[];
-    subject?: string;
-    context?: Record<string, unknown>;
-};
-
-/**
- * Hydra's consent and logout hand-offs. The browser is redirected here, this
- * accepts the request through Hydra's admin API, and sends the browser back.
- * Nothing about Hydra's admin API is ever exposed to the client.
- */
-@Controller("oauth")
-export class OauthController {
-    private admin(): { adminUrl: string; trustedClientId?: string } {
-        const { adminUrl, trustedClientId } = hydraConfig();
-        if (!adminUrl) {
-            throw new ServiceUnavailableException("No OAuth2 provider is configured");
-        }
-        return { adminUrl, trustedClientId };
-    }
-
-    private async hydra<T>(url: string, init?: RequestInit): Promise<T> {
-        const response = await fetch(url, {
-            ...init,
-            headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
-        });
-        if (!response.ok) {
-            throw new BadRequestException(`Hydra rejected the request (${response.status})`);
-        }
-        return (await response.json()) as T;
-    }
-
-    /**
-     * Grants exactly what the trusted client asked for. A first-party client has
-     * nothing to delegate — the user is consenting to the application they are
-     * already using — so there is no screen, but the grant is still explicit and
-     * still refused for any other client.
-     */
-    @Get("consent")
-    async consent(
-        @Query("consent_challenge") challenge: string,
-        @Res() reply: FastifyReply,
-    ): Promise<void> {
-        if (!challenge) throw new BadRequestException("Missing consent_challenge");
-        const { adminUrl, trustedClientId } = this.admin();
-
-        const request = await this.hydra<ConsentRequest>(
-            `${adminUrl}/admin/oauth2/auth/requests/consent?consent_challenge=${encodeURIComponent(
-                challenge,
-            )}`,
-        );
-
-        const clientId = request.client?.client_id;
-        if (!trustedClientId || clientId !== trustedClientId) {
-            throw new ForbiddenException("This client requires a consent screen");
-        }
-
-        const { redirect_to } = await this.hydra<{ redirect_to: string }>(
-            `${adminUrl}/admin/oauth2/auth/requests/consent/accept?consent_challenge=${encodeURIComponent(
-                challenge,
-            )}`,
-            {
-                method: "PUT",
-                body: JSON.stringify({
-                    grant_scope: request.requested_scope ?? [],
-                    grant_access_token_audience: request.requested_access_token_audience ?? [],
-                    remember: true,
-                    remember_for: 0,
-                    // Claims the AutoGroupMappings conditions are written against.
-                    // Promoted to the top level by Hydra's allowed_top_level_claims,
-                    // so a mapping reads `tier`, not `ext.tier`.
-                    session: {
-                        access_token: { tier: "guest" },
-                        id_token: { tier: "guest" },
-                    },
-                }),
-            },
-        );
-
-        reply.redirect(redirect_to, 302);
-    }
-
-    /** The same hand-off for logout, which Hydra also routes through a challenge. */
-    @Get("logout")
-    async logout(
-        @Query("logout_challenge") challenge: string,
-        @Res() reply: FastifyReply,
-    ): Promise<void> {
-        if (!challenge) throw new BadRequestException("Missing logout_challenge");
-        const { adminUrl } = this.admin();
-
-        const { redirect_to } = await this.hydra<{ redirect_to: string }>(
-            `${adminUrl}/admin/oauth2/auth/requests/logout/accept?logout_challenge=${encodeURIComponent(
-                challenge,
-            )}`,
-            { method: "PUT" },
-        );
-
-        reply.redirect(redirect_to, 302);
-    }
-}
diff --git a/app/.env.example b/app/.env.example
index 4af967dc43..2c72675bff 100644
--- a/app/.env.example
+++ b/app/.env.example
@@ -38,10 +38,3 @@ VITE_SENTRY_DSN=
 # Optional — debugging aid only. Set to "true" to disable minification (readable
 # build output); any other value (or unset) minifies normally.
 VITE_BYPASS_MINIFY=false
-
-# Ory Kratos guest-auth proof of concept. Unset, the /auth/* routes are not
-# registered and nothing changes. Set it to the same-origin proxy prefix that
-# `kratos/config/kratos.yml` names in serve.public.base_url.
-# VITE_KRATOS_URL="/.ory"
-# Where the dev proxy forwards /.ory (defaults to the compose file's Kratos).
-# KRATOS_PUBLIC_URL="http://127.0.0.1:4433"
diff --git a/app/src/auth/kratos/client.spec.ts b/app/src/auth/kratos/client.spec.ts
deleted file mode 100644
index 3a0b84f241..0000000000
--- a/app/src/auth/kratos/client.spec.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import fixtures from "./fixtures.spec-data.json";
-import { submitFlow } from "./client";
-import type { KratosFlow } from "./types";
-
-const flow = fixtures.registrationStart as KratosFlow;
-
-function respond(status: number, body: unknown, ok = status < 400) {
-    return { ok, status, json: async () => body } as Response;
-}
-
-describe("submitFlow", () => {
-    beforeEach(() => vi.stubGlobal("fetch", vi.fn()));
-    afterEach(() => vi.unstubAllGlobals());
-
-    it("merges the caller's values over the ones Kratos sent", async () => {
-        vi.mocked(fetch).mockResolvedValue(respond(200, { session: { id: "s1" } }));
-        await submitFlow(flow, { method: "code", "traits.email": "a@b.com" });
-
-        const body = JSON.parse(vi.mocked(fetch).mock.calls[0][1]!.body as string);
-        expect(body.csrf_token).toBeTruthy();
-        expect(body.method).toBe("code");
-        expect(body["traits.email"]).toBe("a@b.com");
-    });
-
-    it("treats a 400 as the next step, not a failure", async () => {
-        const next = fixtures.registrationAwaitingCode;
-        vi.mocked(fetch).mockResolvedValue(respond(400, next));
-
-        const result = await submitFlow(flow, {});
-        expect(result.kind).toBe("flow");
-    });
-
-    it("reports an expired flow rather than a generic error", async () => {
-        vi.mocked(fetch).mockResolvedValue(respond(410, {}));
-        expect((await submitFlow(flow, {})).kind).toBe("expired");
-    });
-
-    it("follows a browser redirect Kratos asks for", async () => {
-        vi.mocked(fetch).mockResolvedValue(
-            respond(422, { redirect_browser_to: "https://idp.example/authorize" }),
-        );
-        expect(await submitFlow(flow, {})).toEqual({
-            kind: "redirect",
-            to: "https://idp.example/authorize",
-        });
-    });
-
-    it("returns the session on success", async () => {
-        vi.mocked(fetch).mockResolvedValue(respond(200, { session: { id: "s1", active: true } }));
-        const result = await submitFlow(flow, {});
-        expect(result).toMatchObject({ kind: "session", session: { id: "s1" } });
-    });
-
-    it("sends the browser to verification when registration still owes one", async () => {
-        vi.mocked(fetch).mockResolvedValue(
-            respond(200, {
-                continue_with: [{ action: "show_verification_ui", flow: { id: "v1" } }],
-            }),
-        );
-        expect(await submitFlow(flow, {})).toEqual({
-            kind: "redirect",
-            to: "/auth/verify?flow=v1",
-        });
-    });
-
-    it("calls a dropped connection offline instead of throwing", async () => {
-        vi.mocked(fetch).mockRejectedValue(new TypeError("Failed to fetch"));
-        expect((await submitFlow(flow, {})).kind).toBe("offline");
-    });
-});
diff --git a/app/src/auth/kratos/client.ts b/app/src/auth/kratos/client.ts
deleted file mode 100644
index 05a149d9d9..0000000000
--- a/app/src/auth/kratos/client.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import type {
-    FlowStart,
-    FlowType,
-    KratosFlow,
-    KratosSession,
-    KratosSessionListEntry,
-    SubmitResult,
-} from "./types";
-import { collectDefaults } from "./nodes";
-
-/**
- * Same-origin by default: Vite proxies /.ory to the Kratos container in dev, and
- * production is expected to reverse-proxy the same path. Kratos' own
- * `serve.public.base_url` must agree, or the action URLs it hands back are
- * cross-site and the browser drops the session cookie.
- */
-export const KRATOS_BASE = import.meta.env.VITE_KRATOS_URL || "/.ory";
-
-/** Whether the Kratos PoC is wired up at all. No env var, no routes. */
-export const isKratosEnabled = (): boolean => !!import.meta.env.VITE_KRATOS_URL;
-
-const jsonHeaders = { Accept: "application/json", "Content-Type": "application/json" };
-
-/** Kratos answers 410/404 for a flow that has expired or was never issued. */
-const isGoneStatus = (status: number) => status === 410 || status === 404 || status === 403;
-
-async function readJson<T>(response: Response): Promise<T> {
-    return (await response.json()) as T;
-}
-
-/**
- * The URL a browser flow must be **navigated** to, not fetched. Kratos answers a
- * JSON fetch of this endpoint with `200 null` when it can complete the flow on
- * its own — the OAuth2 skip case, where a live session lets it accept Hydra's
- * login request immediately. Only a real navigation follows the 303 it issues.
- */
-export function browserInitUrl(
-    type: FlowType,
-    opts: { returnTo?: string; loginChallenge?: string } = {},
-): string {
-    const url = new URL(`${KRATOS_BASE}/self-service/${type}/browser`, window.location.origin);
-    if (opts.returnTo) url.searchParams.set("return_to", opts.returnTo);
-    if (opts.loginChallenge) url.searchParams.set("login_challenge", opts.loginChallenge);
-    return url.toString();
-}
-
-/**
- * Start a browser flow. `returnTo` survives the round trip and decides where
- * success lands. Being signed in already is a normal answer here, not a failure:
- * Kratos refuses to open a login or registration flow for a live session.
- */
-export async function createFlow(type: FlowType, returnTo?: string): Promise<FlowStart> {
-    const url = new URL(`${KRATOS_BASE}/self-service/${type}/browser`, window.location.origin);
-    if (returnTo) url.searchParams.set("return_to", returnTo);
-
-    let response: Response;
-    try {
-        response = await fetch(url, {
-            headers: { Accept: "application/json" },
-            credentials: "include",
-        });
-    } catch {
-        return { kind: "unavailable" };
-    }
-
-    if (response.ok) return { kind: "flow", flow: await readJson<KratosFlow>(response) };
-
-    if (response.status === 400) {
-        const body = await readJson<{ error?: { id?: string } }>(response);
-        if (body.error?.id === "session_already_available") return { kind: "session_exists" };
-    }
-    return { kind: "unavailable" };
-}
-
-/** Fetch the flow named in the URL Kratos redirected the browser to. */
-export async function fetchFlow(type: FlowType, id: string): Promise<KratosFlow | null> {
-    const url = new URL(`${KRATOS_BASE}/self-service/${type}/flows`, window.location.origin);
-    url.searchParams.set("id", id);
-
-    const response = await fetch(url, {
-        headers: { Accept: "application/json" },
-        credentials: "include",
-    });
-    if (isGoneStatus(response.status)) return null;
-    if (!response.ok) throw new Error(`Could not read the ${type} flow (${response.status})`);
-    return readJson<KratosFlow>(response);
-}
-
-/**
- * Submit a flow, merging the caller's values over the ones Kratos sent. Every
- * outcome is a value, not a throw: a 400 carrying validation errors is an
- * ordinary step in these flows, not an exception.
- */
-export async function submitFlow(
-    flow: KratosFlow,
-    values: Record<string, unknown>,
-): Promise<SubmitResult> {
-    let response: Response;
-    try {
-        response = await fetch(flow.ui.action, {
-            method: flow.ui.method || "POST",
-            headers: jsonHeaders,
-            credentials: "include",
-            body: JSON.stringify({ ...collectDefaults(flow), ...values }),
-        });
-    } catch {
-        return { kind: "offline" };
-    }
-
-    if (isGoneStatus(response.status)) return { kind: "expired" };
-
-    // 422 is Kratos asking the browser to go somewhere else — an OIDC hand-off,
-    // or a flow that must continue at a different URL.
-    if (response.status === 422) {
-        const body = await readJson<{ redirect_browser_to?: string }>(response);
-        return body.redirect_browser_to
-            ? { kind: "redirect", to: body.redirect_browser_to }
-            : { kind: "error", message: "The sign-in could not continue." };
-    }
-
-    if (response.status === 400) {
-        return { kind: "flow", flow: await readJson<KratosFlow>(response) };
-    }
-
-    if (!response.ok) {
-        return {
-            kind: "error",
-            message: `Unexpected response from the sign-in service (${response.status})`,
-        };
-    }
-
-    const body = await readJson<{
-        session?: KratosSession;
-        continue_with?: { action: string; flow?: { id: string } }[];
-        redirect_browser_to?: string;
-    }>(response);
-
-    if (body.session) return { kind: "session", session: body.session };
-    if (body.redirect_browser_to) return { kind: "redirect", to: body.redirect_browser_to };
-    // Registration that still owes a verification step reports it here.
-    const verification = body.continue_with?.find((step) => step.action === "show_verification_ui");
-    if (verification?.flow?.id) {
-        return { kind: "redirect", to: `/auth/verify?flow=${verification.flow.id}` };
-    }
-    return { kind: "error", message: "The sign-in could not be completed." };
-}
-
-/** The current session, or null when there isn't one. Never throws for "not signed in". */
-export async function whoami(): Promise<KratosSessionListEntry | null> {
-    try {
-        const response = await fetch(
-            new URL(`${KRATOS_BASE}/sessions/whoami`, window.location.origin),
-            {
-                headers: { Accept: "application/json" },
-                credentials: "include",
-            },
-        );
-        if (!response.ok) return null;
-        return await readJson<KratosSessionListEntry>(response);
-    } catch {
-        return null;
-    }
-}
-
-/**
- * The identity's *other* sessions. Kratos deliberately leaves the current one
- * out — that comes from `whoami` — so the account screen joins the two.
- */
-export async function listOtherSessions(): Promise<KratosSessionListEntry[]> {
-    const response = await fetch(new URL(`${KRATOS_BASE}/sessions`, window.location.origin), {
-        headers: { Accept: "application/json" },
-        credentials: "include",
-    });
-    if (!response.ok) return [];
-    return readJson<KratosSessionListEntry[]>(response);
-}
-
-/** Ends every session except this one. Kratos models it as deleting the others. */
-export async function signOutOtherSessions(): Promise<boolean> {
-    const response = await fetch(new URL(`${KRATOS_BASE}/sessions`, window.location.origin), {
-        method: "DELETE",
-        headers: { Accept: "application/json" },
-        credentials: "include",
-    });
-    return response.ok;
-}
-
-/** Kratos hands out a single-use logout URL rather than accepting a bare POST. */
-export async function logout(): Promise<boolean> {
-    const response = await fetch(
-        new URL(`${KRATOS_BASE}/self-service/logout/browser`, window.location.origin),
-        { headers: { Accept: "application/json" }, credentials: "include" },
-    );
-    if (!response.ok) return false;
-
-    const { logout_url } = await readJson<{ logout_url: string }>(response);
-    const done = await fetch(logout_url, {
-        headers: { Accept: "application/json" },
-        credentials: "include",
-    });
-    return done.ok;
-}
diff --git a/app/src/auth/kratos/fixtures.spec-data.json b/app/src/auth/kratos/fixtures.spec-data.json
deleted file mode 100644
index 504abfad8a..0000000000
--- a/app/src/auth/kratos/fixtures.spec-data.json
+++ /dev/null
@@ -1,299 +0,0 @@
-{
-    "registrationStart": {
-        "id": "01277cde-55a7-4ccc-ab09-b2bc935e7805",
-        "ui": {
-            "action": "http://localhost:4174/.ory/self-service/registration?flow=01277cde-55a7-4ccc-ab09-b2bc935e7805",
-            "method": "POST",
-            "nodes": [
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "traits.email",
-                        "type": "email",
-                        "required": true,
-                        "autocomplete": "email",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070002,
-                            "text": "Email address",
-                            "type": "info",
-                            "context": {
-                                "title": "Email address"
-                            }
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "traits.name",
-                        "type": "text",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070002,
-                            "text": "Name",
-                            "type": "info",
-                            "context": {
-                                "title": "Name"
-                            }
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "csrf_token",
-                        "type": "hidden",
-                        "value": "0xmd4u96tIMfuvA3i9rHZxKvB7h103EJ7wE+rBsDQKm9QHjcuVQbusQQ7aOS6mG1fXwp85Ad1n8eQPSty5Jhng==",
-                        "required": true,
-                        "disabled": false,
-                        "node_type": "input"
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "profile",
-                    "attributes": {
-                        "name": "method",
-                        "type": "submit",
-                        "value": "profile",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1040001,
-                            "text": "Sign up",
-                            "type": "info"
-                        }
-                    }
-                }
-            ]
-        }
-    },
-    "registrationAwaitingCode": {
-        "id": "01277cde-55a7-4ccc-ab09-b2bc935e7805",
-        "ui": {
-            "action": "http://localhost:4174/.ory/self-service/registration?flow=01277cde-55a7-4ccc-ab09-b2bc935e7805",
-            "method": "POST",
-            "nodes": [
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "traits.email",
-                        "type": "hidden",
-                        "value": "johan@example.com",
-                        "required": true,
-                        "autocomplete": "email",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070002,
-                            "text": "Email address",
-                            "type": "info",
-                            "context": {
-                                "title": "Email address"
-                            }
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "traits.name",
-                        "type": "hidden",
-                        "value": "Johan",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070002,
-                            "text": "Name",
-                            "type": "info",
-                            "context": {
-                                "title": "Name"
-                            }
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "csrf_token",
-                        "type": "hidden",
-                        "value": "5zL2dfPlmNhZ078CAd9k1hnD9f9ocjU9bdPrYoFyfgKJaxNLpcs34YJ5opYY78IEdhDbtI28kkuckiFjUeNfNQ==",
-                        "required": true,
-                        "disabled": false,
-                        "node_type": "input"
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "code",
-                    "attributes": {
-                        "name": "method",
-                        "type": "hidden",
-                        "value": "code",
-                        "disabled": false,
-                        "node_type": "input"
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "code",
-                    "attributes": {
-                        "name": "code",
-                        "type": "text",
-                        "required": true,
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070012,
-                            "text": "Registration code",
-                            "type": "info"
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "code",
-                    "attributes": {
-                        "name": "method",
-                        "type": "submit",
-                        "value": "code",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070009,
-                            "text": "Continue",
-                            "type": "info"
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "code",
-                    "attributes": {
-                        "name": "resend",
-                        "type": "submit",
-                        "value": "code",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070008,
-                            "text": "Resend code",
-                            "type": "info"
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "profile",
-                    "attributes": {
-                        "name": "screen",
-                        "type": "submit",
-                        "value": "credential-selection",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1040008,
-                            "text": "Back",
-                            "type": "info"
-                        }
-                    }
-                }
-            ],
-            "messages": [
-                {
-                    "id": 1040005,
-                    "text": "An email containing a code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and retry the registration.",
-                    "type": "info"
-                }
-            ]
-        }
-    },
-    "loginStart": {
-        "id": "4fedecbb-0ac2-4787-bee9-44a0c3df7363",
-        "ui": {
-            "action": "http://localhost:4174/.ory/self-service/login?flow=4fedecbb-0ac2-4787-bee9-44a0c3df7363",
-            "method": "POST",
-            "nodes": [
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "csrf_token",
-                        "type": "hidden",
-                        "value": "GqbsuGziQrppSRfTkDI9uuan/kn/ms6n1nm2qFlV4+Ab9R+mL/FQ+LQIK2HQprRBlHzM4XnEMgwikcYZZn/Orw==",
-                        "required": true,
-                        "disabled": false,
-                        "node_type": "input"
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "default",
-                    "attributes": {
-                        "name": "identifier",
-                        "type": "text",
-                        "value": "",
-                        "required": true,
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1070002,
-                            "text": "Email address",
-                            "type": "info",
-                            "context": {
-                                "title": "Email address"
-                            }
-                        }
-                    }
-                },
-                {
-                    "type": "input",
-                    "group": "code",
-                    "attributes": {
-                        "name": "method",
-                        "type": "submit",
-                        "value": "code",
-                        "disabled": false,
-                        "node_type": "input"
-                    },
-                    "meta": {
-                        "label": {
-                            "id": 1010015,
-                            "text": "Send sign in code",
-                            "type": "info"
-                        }
-                    }
-                }
-            ]
-        }
-    }
-}
diff --git a/app/src/auth/kratos/nodes.spec.ts b/app/src/auth/kratos/nodes.spec.ts
deleted file mode 100644
index 7aca7ca07c..0000000000
--- a/app/src/auth/kratos/nodes.spec.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { describe, it, expect } from "vitest";
-import fixtures from "./fixtures.spec-data.json";
-import { collectDefaults, firstMessage, isAwaitingCode, oidcProviders, traitValue } from "./nodes";
-import type { KratosFlow } from "./types";
-
-// Recorded from Kratos v1.3.1 driving the real flows, so these assert against
-// what Kratos actually sends rather than what it is documented to send.
-const registrationStart = fixtures.registrationStart as KratosFlow;
-const awaitingCode = fixtures.registrationAwaitingCode as KratosFlow;
-const loginStart = fixtures.loginStart as KratosFlow;
-
-describe("kratos nodes", () => {
-    it("carries the csrf token into the submitted values", () => {
-        const values = collectDefaults(registrationStart);
-        expect(values.csrf_token).toBeTruthy();
-    });
-
-    it("leaves submit buttons out of the payload", () => {
-        // `method` is a submit node on the start flow; sending it would pick a
-        // method the user never pressed.
-        expect(collectDefaults(registrationStart)).not.toHaveProperty("method");
-    });
-
-    it("keeps the traits Kratos echoes back as hidden fields", () => {
-        const values = collectDefaults(awaitingCode);
-        expect(values["traits.email"]).toBe("johan@example.com");
-        expect(values["traits.name"]).toBe("Johan");
-    });
-
-    it("knows the code step from the flow itself", () => {
-        expect(isAwaitingCode(registrationStart)).toBe(false);
-        expect(isAwaitingCode(loginStart)).toBe(false);
-        expect(isAwaitingCode(awaitingCode)).toBe(true);
-    });
-
-    it("reads a trait value back for re-rendering the form", () => {
-        expect(traitValue(awaitingCode, "email")).toBe("johan@example.com");
-        expect(traitValue(registrationStart, "email")).toBe("");
-    });
-
-    it("surfaces the error even when an info message came first", () => {
-        const flow = {
-            ui: {
-                action: "",
-                method: "POST",
-                nodes: [],
-                messages: [
-                    { id: 1040005, text: "A code has been sent.", type: "info" as const },
-                    { id: 4010008, text: "The code is invalid.", type: "error" as const },
-                ],
-            },
-            id: "x",
-        };
-        expect(firstMessage(flow)?.text).toBe("The code is invalid.");
-    });
-
-    it("finds no oidc providers when none are configured", () => {
-        expect(oidcProviders(loginStart)).toEqual([]);
-    });
-});
diff --git a/app/src/auth/kratos/nodes.ts b/app/src/auth/kratos/nodes.ts
deleted file mode 100644
index 86bd0ef422..0000000000
--- a/app/src/auth/kratos/nodes.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { KratosFlow, KratosMessage, KratosNode } from "./types";
-
-/**
- * The values Kratos expects back, taken from the flow it just sent. Submitting
- * from the nodes rather than a hand-written body is what keeps `csrf_token` — and
- * any field a Kratos upgrade adds — in the payload without a code change here.
- */
-export function collectDefaults(flow: KratosFlow): Record<string, unknown> {
-    const values: Record<string, unknown> = {};
-    for (const node of flow.ui.nodes) {
-        const { name, value, type, disabled } = node.attributes;
-        if (!name || disabled) continue;
-        // Buttons carry the value that *would* be sent had the user pressed them.
-        if (type === "submit" || type === "button") continue;
-        if (value !== undefined && value !== null && value !== "") values[name] = value;
-    }
-    return values;
-}
-
-export function findNode(flow: KratosFlow, name: string): KratosNode | undefined {
-    return flow.ui.nodes.find((node) => node.attributes.name === name);
-}
-
-/** True once Kratos has sent the code and is waiting for it — the second step of the flow. */
-export function isAwaitingCode(flow: KratosFlow): boolean {
-    const code = findNode(flow, "code");
-    return !!code && code.attributes.type !== "hidden";
-}
-
-/** Messages from the flow and from every node, newest-first is not a thing here — order is Kratos'. */
-export function allMessages(flow: KratosFlow): KratosMessage[] {
-    return [...(flow.ui.messages ?? []), ...flow.ui.nodes.flatMap((node) => node.messages ?? [])];
-}
-
-export function firstMessage(flow: KratosFlow): KratosMessage | undefined {
-    const messages = allMessages(flow);
-    // An error is what the user needs to see, even when an info message precedes it.
-    return messages.find((message) => message.type === "error") ?? messages[0];
-}
-
-/** OIDC providers Kratos offers on this flow, so social sign-in sits beside the email option. */
-export function oidcProviders(flow: KratosFlow): { id: string; label: string }[] {
-    return flow.ui.nodes
-        .filter((node) => node.group === "oidc" && node.attributes.name === "provider")
-        .map((node) => ({
-            id: String(node.attributes.value ?? ""),
-            label: node.meta?.label?.text ?? String(node.attributes.value ?? ""),
-        }))
-        .filter((provider) => provider.id);
-}
-
-/** The traits already entered, so a re-render after an error doesn't blank the form. */
-export function traitValue(flow: KratosFlow, trait: string): string {
-    const node = findNode(flow, `traits.${trait}`);
-    return node?.attributes.value ? String(node.attributes.value) : "";
-}
diff --git a/app/src/auth/kratos/types.ts b/app/src/auth/kratos/types.ts
deleted file mode 100644
index 2817c97929..0000000000
--- a/app/src/auth/kratos/types.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/** The slice of Kratos' flow model these screens read. Kratos sends more; nothing here needs it. */
-export type KratosMessage = {
-    id: number;
-    text: string;
-    type: "info" | "error" | "success";
-};
-
-export type KratosNode = {
-    type: string;
-    group: string;
-    attributes: {
-        name?: string;
-        type?: string;
-        value?: unknown;
-        disabled?: boolean;
-        node_type?: string;
-    };
-    messages?: KratosMessage[];
-    meta?: { label?: { id: number; text: string } };
-};
-
-export type KratosFlow = {
-    id: string;
-    expires_at?: string;
-    request_url?: string;
-    ui: {
-        action: string;
-        method: string;
-        nodes: KratosNode[];
-        messages?: KratosMessage[];
-    };
-};
-
-export type KratosSession = {
-    id: string;
-    active?: boolean;
-    identity?: {
-        id: string;
-        traits: { email?: string; name?: string };
-        verifiable_addresses?: { value: string; verified: boolean }[];
-    };
-};
-
-/** A row of `GET /sessions` — the same session, plus the device that opened it. */
-export type KratosSessionListEntry = KratosSession & {
-    authenticated_at?: string;
-    devices?: { id: string; ip_address?: string; user_agent?: string; location?: string }[];
-};
-
-export type FlowType = "login" | "registration" | "verification" | "recovery" | "settings";
-
-/**
- * Starting a flow can find you already signed in — Kratos answers 400
- * `session_already_available` rather than handing back a flow.
- */
-export type FlowStart =
-    | { kind: "flow"; flow: KratosFlow }
-    | { kind: "session_exists" }
-    | { kind: "unavailable" };
-
-/**
- * Every way a submit can land. `flow` is the ordinary "here are your validation
- * errors" case — Kratos answers 400 with the same flow, re-rendered.
- */
-export type SubmitResult =
-    | { kind: "session"; session: KratosSession }
-    | { kind: "flow"; flow: KratosFlow }
-    | { kind: "redirect"; to: string }
-    | { kind: "expired" }
-    | { kind: "offline" }
-    | { kind: "error"; message: string };
diff --git a/app/src/auth/kratos/useKratosAuth.spec.ts b/app/src/auth/kratos/useKratosAuth.spec.ts
deleted file mode 100644
index 432a001aa5..0000000000
--- a/app/src/auth/kratos/useKratosAuth.spec.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import { defineComponent } from "vue";
-import fixtures from "./fixtures.spec-data.json";
-import { useKratosAuth } from "./useKratosAuth";
-import { createFlow, submitFlow } from "./client";
-import type { FlowType, KratosFlow, SubmitResult } from "./types";
-
-vi.mock("./client", () => ({
-    createFlow: vi.fn(),
-    fetchFlow: vi.fn(),
-    submitFlow: vi.fn(),
-}));
-
-const registrationStart = fixtures.registrationStart as KratosFlow;
-const awaitingCode = fixtures.registrationAwaitingCode as KratosFlow;
-const loginStart = fixtures.loginStart as KratosFlow;
-
-/** onUnmounted needs a component instance, so the composable is hosted in one. */
-function host(type: FlowType) {
-    let auth!: ReturnType<typeof useKratosAuth>;
-    const wrapper = mount(
-        defineComponent({
-            setup() {
-                auth = useKratosAuth(type);
-                return () => null;
-            },
-        }),
-    );
-    return { auth, wrapper };
-}
-
-const submitted = () => vi.mocked(submitFlow).mock.calls.at(-1)![1];
-
-describe("useKratosAuth", () => {
-    beforeEach(() => {
-        vi.useFakeTimers();
-        vi.mocked(createFlow).mockResolvedValue({ kind: "flow", flow: registrationStart });
-        vi.mocked(submitFlow).mockResolvedValue({ kind: "flow", flow: awaitingCode });
-    });
-    afterEach(() => {
-        vi.useRealTimers();
-        vi.clearAllMocks();
-    });
-
-    it("reports an existing session instead of failing the flow", async () => {
-        // Kratos answers 400 session_already_available rather than opening a
-        // login flow for a live session; that is not an error to show the user.
-        vi.mocked(createFlow).mockResolvedValue({ kind: "session_exists" });
-        const { auth } = host("login");
-        await auth.start();
-
-        expect(auth.step.value).toBe("signed-in");
-        expect(auth.failure.value).toBe("");
-    });
-
-    it("shows the failure screen when Kratos cannot be reached", async () => {
-        vi.mocked(createFlow).mockResolvedValue({ kind: "unavailable" });
-        const { auth } = host("login");
-        await auth.start();
-
-        expect(auth.step.value).toBe("failed");
-    });
-
-    it("opens on the address step", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        expect(auth.step.value).toBe("identifier");
-    });
-
-    it("submits registration as traits, because that is what the flow asks for", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        auth.email.value = "johan@example.com";
-        auth.name.value = "Johan";
-        await auth.submitIdentifier();
-
-        expect(submitted()).toMatchObject({
-            method: "code",
-            "traits.email": "johan@example.com",
-            "traits.name": "Johan",
-        });
-    });
-
-    it("submits login as an identifier, because that is what that flow asks for", async () => {
-        vi.mocked(createFlow).mockResolvedValue({ kind: "flow", flow: loginStart });
-        const { auth } = host("login");
-        await auth.start();
-        auth.email.value = "johan@example.com";
-        await auth.submitIdentifier();
-
-        expect(submitted()).toMatchObject({ method: "code", identifier: "johan@example.com" });
-        expect(submitted()).not.toHaveProperty("traits.email");
-    });
-
-    it("moves to the code step and holds the resend behind a countdown", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        await auth.submitIdentifier();
-
-        expect(auth.step.value).toBe("code");
-        expect(auth.resendIn.value).toBe(30);
-
-        await auth.resend();
-        expect(vi.mocked(submitFlow)).toHaveBeenCalledTimes(1);
-
-        vi.advanceTimersByTime(30_000);
-        expect(auth.resendIn.value).toBe(0);
-        await auth.resend();
-        expect(submitted()).toMatchObject({ resend: "code" });
-    });
-
-    it("keeps the address on screen when Kratos re-renders the flow", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        auth.email.value = "johan@example.com";
-        await auth.submitIdentifier();
-
-        // The awaiting-code flow echoes the traits back as hidden nodes.
-        expect(auth.email.value).toBe("johan@example.com");
-    });
-
-    it("ends on the done step once a session comes back", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        vi.mocked(submitFlow).mockResolvedValue({
-            kind: "session",
-            session: { id: "s1", active: true },
-        } as SubmitResult);
-        await auth.submitIdentifier();
-
-        expect(auth.step.value).toBe("done");
-        expect(auth.session.value?.id).toBe("s1");
-    });
-
-    it("shows the expired screen rather than a generic failure", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        vi.mocked(submitFlow).mockResolvedValue({ kind: "expired" });
-        await auth.submitCode();
-
-        expect(auth.step.value).toBe("expired");
-    });
-
-    it("goes back to the address step without abandoning the flow", async () => {
-        const { auth } = host("registration");
-        await auth.start();
-        await auth.submitIdentifier();
-        auth.code.value = "123456";
-
-        auth.changeIdentifier();
-        expect(auth.step.value).toBe("identifier");
-        expect(auth.code.value).toBe("");
-        expect(auth.resendIn.value).toBe(0);
-    });
-});
diff --git a/app/src/auth/kratos/useKratosAuth.ts b/app/src/auth/kratos/useKratosAuth.ts
deleted file mode 100644
index 3c1c6a872d..0000000000
--- a/app/src/auth/kratos/useKratosAuth.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { computed, onUnmounted, ref, shallowRef } from "vue";
-import { createFlow, fetchFlow, submitFlow } from "./client";
-import { findNode, firstMessage, isAwaitingCode, oidcProviders, traitValue } from "./nodes";
-import type { FlowType, KratosFlow, KratosMessage, KratosSession, SubmitResult } from "./types";
-
-export type AuthStep =
-    | "loading"
-    | "identifier"
-    | "code"
-    | "done"
-    /** Kratos refused to open the flow because a session is already live. */
-    | "signed-in"
-    | "expired"
-    | "offline"
-    | "failed";
-
-const RESEND_COOLDOWN_SECONDS = 30;
-
-/** Kratos names the address field differently per flow; the flow itself says which. */
-function identifierField(flow: KratosFlow): string {
-    for (const candidate of ["identifier", "email", "traits.email"]) {
-        if (findNode(flow, candidate)) return candidate;
-    }
-    return "identifier";
-}
-
-/**
- * Drives one Kratos self-service flow through the designed screens. Holds no
- * opinion about which screen renders — the caller reads `step` and picks.
- */
-export function useKratosAuth(type: FlowType) {
-    const flow = shallowRef<KratosFlow | null>(null);
-    const step = ref<AuthStep>("loading");
-    const busy = ref(false);
-    const email = ref("");
-    const name = ref("");
-    const code = ref("");
-    const message = ref<KratosMessage | null>(null);
-    const failure = ref("");
-    const session = ref<KratosSession | null>(null);
-    const resendIn = ref(0);
-
-    let countdown: ReturnType<typeof setInterval> | undefined;
-    const stopCountdown = () => {
-        if (countdown) clearInterval(countdown);
-        countdown = undefined;
-    };
-    function startCountdown() {
-        stopCountdown();
-        resendIn.value = RESEND_COOLDOWN_SECONDS;
-        countdown = setInterval(() => {
-            resendIn.value -= 1;
-            if (resendIn.value <= 0) stopCountdown();
-        }, 1000);
-    }
-    onUnmounted(stopCountdown);
-
-    const providers = computed(() => (flow.value ? oidcProviders(flow.value) : []));
-
-    function adopt(next: KratosFlow) {
-        flow.value = next;
-        message.value = firstMessage(next) ?? null;
-        // Kratos re-sends what it already knows; keep the form filled after an error.
-        email.value = traitValue(next, "email") || email.value;
-        name.value = traitValue(next, "name") || name.value;
-        step.value = isAwaitingCode(next) ? "code" : "identifier";
-    }
-
-    /** Start the flow, or pick up the one Kratos named in `?flow=`. */
-    async function start(flowId?: string, returnTo?: string) {
-        step.value = "loading";
-        try {
-            const existing = flowId ? await fetchFlow(type, flowId) : null;
-            if (existing) {
-                adopt(existing);
-                if (isAwaitingCode(existing)) startCountdown();
-                return;
-            }
-
-            const started = await createFlow(type, returnTo);
-            if (started.kind === "session_exists") {
-                step.value = "signed-in";
-                return;
-            }
-            if (started.kind === "unavailable") {
-                step.value = navigator.onLine === false ? "offline" : "failed";
-                failure.value = "The sign-in service could not be reached.";
-                return;
-            }
-
-            adopt(started.flow);
-            if (isAwaitingCode(started.flow)) startCountdown();
-        } catch {
-            step.value = navigator.onLine === false ? "offline" : "failed";
-            failure.value = "The sign-in service could not be reached.";
-        }
-    }
-
-    async function send(values: Record<string, unknown>): Promise<SubmitResult | null> {
-        if (!flow.value || busy.value) return null;
-        busy.value = true;
-        try {
-            const result = await submitFlow(flow.value, values);
-            switch (result.kind) {
-                case "session":
-                    session.value = result.session;
-                    step.value = "done";
-                    break;
-                case "flow": {
-                    const wasAwaitingCode = step.value === "code";
-                    adopt(result.flow);
-                    // Reaching the code step for the first time means a code was just sent.
-                    if (step.value === "code" && !wasAwaitingCode) startCountdown();
-                    break;
-                }
-                case "redirect":
-                    window.location.assign(result.to);
-                    break;
-                case "expired":
-                    step.value = "expired";
-                    break;
-                case "offline":
-                    step.value = "offline";
-                    break;
-                case "error":
-                    step.value = "failed";
-                    failure.value = result.message;
-                    break;
-            }
-            return result;
-        } finally {
-            busy.value = false;
-        }
-    }
-
-    /** Step one: hand Kratos the address and have it send a code. */
-    async function submitIdentifier() {
-        if (!flow.value) return;
-        const field = identifierField(flow.value);
-        const values: Record<string, unknown> = { method: "code", [field]: email.value };
-        // Registration is the only flow that carries traits alongside the address.
-        if (type === "registration" && findNode(flow.value, "traits.name")) {
-            values["traits.name"] = name.value;
-        }
-        await send(values);
-    }
-
-    /** Step two: the code itself. */
-    async function submitCode() {
-        if (!flow.value) return;
-        const field = identifierField(flow.value);
-        await send({ method: "code", [field]: email.value, code: code.value });
-    }
-
-    async function resend() {
-        if (!flow.value || resendIn.value > 0) return;
-        const field = identifierField(flow.value);
-        code.value = "";
-        const result = await send({ method: "code", [field]: email.value, resend: "code" });
-        if (result?.kind === "flow") startCountdown();
-    }
-
-    /** Go back to the address step without abandoning the flow. */
-    function changeIdentifier() {
-        code.value = "";
-        message.value = null;
-        stopCountdown();
-        resendIn.value = 0;
-        step.value = "identifier";
-    }
-
-    function chooseProvider(provider: string) {
-        return send({ method: "oidc", provider });
-    }
-
-    return {
-        step,
-        busy,
-        email,
-        name,
-        code,
-        message,
-        failure,
-        session,
-        resendIn,
-        providers,
-        start,
-        submitIdentifier,
-        submitCode,
-        resend,
-        changeIdentifier,
-        chooseProvider,
-        restart: () => start(),
-    };
-}
diff --git a/app/src/components/auth/kratos/AccountSettingsScreen.vue b/app/src/components/auth/kratos/AccountSettingsScreen.vue
deleted file mode 100644
index 29d83818ac..0000000000
--- a/app/src/components/auth/kratos/AccountSettingsScreen.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import {
-    CheckBadgeIcon,
-    ComputerDesktopIcon,
-    DevicePhoneMobileIcon,
-} from "@heroicons/vue/24/outline";
-import LButton from "@/components/button/LButton.vue";
-import { useAuthCopy } from "./useAuthCopy";
-import type { AuthProviderOption } from "./types";
-
-export type LinkedMethod = AuthProviderOption & { linked: boolean };
-export type ActiveSession = {
-    id: string;
-    device: string;
-    location?: string;
-    lastSeen: string;
-    current?: boolean;
-};
-
-type Props = {
-    email: string;
-    emailVerified?: boolean;
-    methods?: LinkedMethod[];
-    sessions?: ActiveSession[];
-    /** Kratos has no self-service identity deletion, so hosts that lack it hide the offer. */
-    canDelete?: boolean;
-};
-withDefaults(defineProps<Props>(), {
-    emailVerified: true,
-    methods: () => [],
-    sessions: () => [],
-    canDelete: true,
-});
-defineEmits<{
-    changeEmail: [];
-    toggleMethod: [id: string];
-    signOutOthers: [];
-    deleteAccount: [];
-}>();
-
-const c = useAuthCopy();
-</script>
-
-<template>
-    <div class="flex w-full max-w-md flex-col gap-4">
-        <h1 class="text-xl font-semibold text-zinc-900 dark:text-slate-100">
-            {{ c("auth.settings.title") }}
-        </h1>
-
-        <section
-            class="rounded-lg border border-zinc-100 bg-white p-4 shadow dark:border-slate-800 dark:bg-slate-800"
-        >
-            <h2 class="text-sm font-semibold text-zinc-500 dark:text-slate-400">
-                {{ c("auth.settings.email_section") }}
-            </h2>
-            <div class="mt-3 flex items-center justify-between gap-3">
-                <div class="flex min-w-0 items-center gap-2">
-                    <span class="truncate text-[15px] text-zinc-900 dark:text-slate-100">
-                        {{ email }}
-                    </span>
-                    <CheckBadgeIcon
-                        v-if="emailVerified"
-                        class="h-5 w-5 shrink-0 text-green-600 dark:text-green-400"
-                    />
-                </div>
-                <LButton
-                    variant="secondary"
-                    size="sm"
-                    @click="$emit('changeEmail')"
-                >
-                    {{ c("auth.settings.change") }}
-                </LButton>
-            </div>
-        </section>
-
-        <section
-            v-if="methods.length"
-            class="rounded-lg border border-zinc-100 bg-white p-4 shadow dark:border-slate-800 dark:bg-slate-800"
-        >
-            <h2 class="text-sm font-semibold text-zinc-500 dark:text-slate-400">
-                {{ c("auth.settings.methods_section") }}
-            </h2>
-            <ul class="mt-2 divide-y divide-zinc-100 dark:divide-slate-700">
-                <li
-                    v-for="method in methods"
-                    :key="method.id"
-                    class="flex items-center justify-between gap-3 py-3"
-                >
-                    <div class="flex min-w-0 items-center gap-2.5">
-                        <img
-                            v-if="method.iconUrl"
-                            :src="method.iconUrl"
-                            alt=""
-                            class="size-5 shrink-0"
-                        />
-                        <span class="truncate text-[15px] text-zinc-800 dark:text-slate-100">
-                            {{ method.label }}
-                        </span>
-                    </div>
-                    <LButton
-                        :variant="method.linked ? 'tertiary' : 'secondary'"
-                        size="sm"
-                        @click="$emit('toggleMethod', method.id)"
-                    >
-                        {{ method.linked ? c("auth.settings.unlink") : c("auth.settings.link") }}
-                    </LButton>
-                </li>
-            </ul>
-        </section>
-
-        <section
-            v-if="sessions.length"
-            class="rounded-lg border border-zinc-100 bg-white p-4 shadow dark:border-slate-800 dark:bg-slate-800"
-        >
-            <h2 class="text-sm font-semibold text-zinc-500 dark:text-slate-400">
-                {{ c("auth.settings.sessions_section") }}
-            </h2>
-            <ul class="mt-2 divide-y divide-zinc-100 dark:divide-slate-700">
-                <li
-                    v-for="session in sessions"
-                    :key="session.id"
-                    class="flex items-center gap-3 py-3"
-                >
-                    <component
-                        :is="
-                            session.device.includes('iPhone') || session.device.includes('Android')
-                                ? DevicePhoneMobileIcon
-                                : ComputerDesktopIcon
-                        "
-                        class="h-5 w-5 shrink-0 text-zinc-400 dark:text-slate-400"
-                    />
-                    <div class="flex min-w-0 flex-col">
-                        <span class="truncate text-[15px] text-zinc-800 dark:text-slate-100">
-                            {{ session.device }}
-                            <span
-                                v-if="session.current"
-                                class="ml-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 dark:bg-green-500/15 dark:text-green-300"
-                            >
-                                {{ c("auth.settings.this_device") }}
-                            </span>
-                        </span>
-                        <span class="truncate text-sm text-zinc-500 dark:text-slate-400">
-                            {{ [session.location, session.lastSeen].filter(Boolean).join(" · ") }}
-                        </span>
-                    </div>
-                </li>
-            </ul>
-            <LButton
-                variant="secondary"
-                size="sm"
-                class="mt-3 w-full"
-                @click="$emit('signOutOthers')"
-            >
-                {{ c("auth.settings.sign_out_others") }}
-            </LButton>
-        </section>
-
-        <button
-            v-if="canDelete"
-            type="button"
-            class="self-start text-sm text-red-600 underline underline-offset-2 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-            @click="$emit('deleteAccount')"
-        >
-            {{ c("auth.settings.delete") }}
-        </button>
-    </div>
-</template>
diff --git a/app/src/components/auth/kratos/AuthCodeInput.vue b/app/src/components/auth/kratos/AuthCodeInput.vue
deleted file mode 100644
index 3863807d79..0000000000
--- a/app/src/components/auth/kratos/AuthCodeInput.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-type Props = {
-    label: string;
-    modelValue?: string;
-    length?: number;
-    error?: boolean;
-    disabled?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), { length: 6, error: false, disabled: false });
-const emit = defineEmits<{ "update:modelValue": [value: string]; complete: [value: string] }>();
-
-const boxes = ref<HTMLInputElement[]>([]);
-const digits = computed(() =>
-    Array.from({ length: props.length }, (_, i) => props.modelValue?.[i] ?? ""),
-);
-
-function write(next: string) {
-    const cleaned = next.replace(/\D/g, "").slice(0, props.length);
-    emit("update:modelValue", cleaned);
-    if (cleaned.length === props.length) emit("complete", cleaned);
-    return cleaned;
-}
-
-function onInput(index: number, event: Event) {
-    const target = event.target as HTMLInputElement;
-    const typed = target.value.replace(/\D/g, "");
-    target.value = "";
-    if (!typed) return;
-
-    const current = props.modelValue ?? "";
-    const next = write(current.slice(0, index) + typed + current.slice(index + typed.length));
-    boxes.value[Math.min(next.length, props.length - 1)]?.focus();
-}
-
-function onKeydown(index: number, event: KeyboardEvent) {
-    if (event.key !== "Backspace") return;
-    event.preventDefault();
-    const current = props.modelValue ?? "";
-    // Backspace on an empty box clears the one before it, which is where the caret looks to be.
-    const target = current[index] ? index : index - 1;
-    if (target < 0) return;
-    write(current.slice(0, target) + current.slice(target + 1));
-    boxes.value[target]?.focus();
-}
-
-function onPaste(event: ClipboardEvent) {
-    event.preventDefault();
-    const next = write(event.clipboardData?.getData("text") ?? "");
-    boxes.value[Math.min(next.length, props.length - 1)]?.focus();
-}
-</script>
-
-<template>
-    <div class="flex flex-col gap-1.5">
-        <span class="text-sm font-medium text-zinc-700 dark:text-slate-200">{{ label }}</span>
-        <div
-            class="flex gap-2"
-            role="group"
-            :aria-label="label"
-        >
-            <input
-                v-for="(digit, index) in digits"
-                :key="index"
-                :ref="(el) => (boxes[index] = el as HTMLInputElement)"
-                :value="digit"
-                :disabled="disabled"
-                inputmode="numeric"
-                autocomplete="one-time-code"
-                maxlength="1"
-                class="h-14 w-full min-w-0 rounded-md border bg-white text-center text-xl font-semibold tabular-nums text-zinc-900 shadow-sm focus:outline-none focus:ring-2 disabled:bg-zinc-100 dark:bg-slate-700 dark:text-slate-100 dark:disabled:bg-slate-800"
-                :class="
-                    error
-                        ? 'border-red-400 focus:border-red-500 focus:ring-red-500/40 dark:border-red-500/70'
-                        : 'border-zinc-300 focus:border-yellow-500 focus:ring-yellow-500/40 dark:border-slate-600'
-                "
-                @input="onInput(index, $event)"
-                @keydown="onKeydown(index, $event)"
-                @paste="onPaste"
-            />
-        </div>
-    </div>
-</template>
diff --git a/app/src/components/auth/kratos/AuthDoneScreen.vue b/app/src/components/auth/kratos/AuthDoneScreen.vue
deleted file mode 100644
index 1011c0fa9b..0000000000
--- a/app/src/components/auth/kratos/AuthDoneScreen.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { CheckCircleIcon } from "@heroicons/vue/24/solid";
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import { useAuthCopy } from "./useAuthCopy";
-
-defineEmits<{ continue: [] }>();
-const c = useAuthCopy();
-</script>
-
-<template>
-    <AuthShell
-        :title="c('auth.verify.done_title')"
-        :subtitle="c('auth.verify.done_subtitle')"
-    >
-        <template #brand>
-            <span
-                class="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-500/15"
-            >
-                <CheckCircleIcon class="h-7 w-7 text-green-600 dark:text-green-400" />
-            </span>
-        </template>
-
-        <LButton
-            variant="primary"
-            size="xl"
-            class="w-full"
-            @click="$emit('continue')"
-        >
-            {{ c("auth.verify.done_continue") }}
-        </LButton>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/AuthErrorScreen.vue b/app/src/components/auth/kratos/AuthErrorScreen.vue
deleted file mode 100644
index d6fe973dc1..0000000000
--- a/app/src/components/auth/kratos/AuthErrorScreen.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { ClockIcon, ExclamationTriangleIcon, SignalSlashIcon } from "@heroicons/vue/24/outline";
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import { useAuthCopy } from "./useAuthCopy";
-
-type Props = {
-    /** `expired` is the flow-expiry case Kratos returns most often; `offline` never reaches Kratos at all. */
-    kind?: "generic" | "expired" | "offline";
-    detail?: string;
-    /** Kratos error id, so a user can quote it to support without us logging their address. */
-    errorId?: string;
-};
-const props = withDefaults(defineProps<Props>(), { kind: "generic" });
-defineEmits<{ restart: []; back: [] }>();
-
-const c = useAuthCopy();
-const icons = { generic: ExclamationTriangleIcon, expired: ClockIcon, offline: SignalSlashIcon };
-const title = () =>
-    props.kind === "expired"
-        ? c("auth.error.expired_title")
-        : props.kind === "offline"
-          ? c("auth.error.offline_title")
-          : c("auth.error.title");
-const body = () =>
-    props.kind === "expired"
-        ? c("auth.error.expired_body")
-        : props.kind === "offline"
-          ? c("auth.error.offline_body")
-          : props.detail;
-</script>
-
-<template>
-    <AuthShell
-        :title="title()"
-        :subtitle="body()"
-    >
-        <template #brand>
-            <span
-                class="flex size-12 items-center justify-center rounded-full bg-zinc-100 dark:bg-slate-700"
-            >
-                <component
-                    :is="icons[props.kind]"
-                    class="h-6 w-6 text-zinc-500 dark:text-slate-300"
-                />
-            </span>
-        </template>
-
-        <LButton
-            v-if="kind !== 'offline'"
-            variant="primary"
-            size="xl"
-            class="w-full"
-            @click="$emit('restart')"
-        >
-            {{ c("auth.error.restart") }}
-        </LButton>
-        <LButton
-            variant="secondary"
-            size="xl"
-            class="w-full"
-            @click="$emit('back')"
-        >
-            {{ c("auth.error.back") }}
-        </LButton>
-
-        <template
-            v-if="errorId"
-            #footer
-        >
-            <p class="text-center text-xs tabular-nums text-zinc-400 dark:text-slate-500">
-                {{ c("auth.error.reference", { id: errorId }) }}
-            </p>
-        </template>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/AuthMessage.vue b/app/src/components/auth/kratos/AuthMessage.vue
deleted file mode 100644
index 7d60617628..0000000000
--- a/app/src/components/auth/kratos/AuthMessage.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import {
-    CheckCircleIcon,
-    ExclamationTriangleIcon,
-    InformationCircleIcon,
-} from "@heroicons/vue/24/outline";
-
-/** Mirrors Kratos `ui.messages[].type`, so a flow's messages render without translation at the call site. */
-type Props = { type?: "info" | "error" | "success"; text: string };
-const props = withDefaults(defineProps<Props>(), { type: "info" });
-
-const styles = {
-    info: "border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-slate-600 dark:bg-slate-700/60 dark:text-slate-200",
-    error: "border-red-200 bg-red-50 text-red-800 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-200",
-    success:
-        "border-green-200 bg-green-50 text-green-800 dark:border-green-500/40 dark:bg-green-500/10 dark:text-green-200",
-};
-const icons = {
-    info: InformationCircleIcon,
-    error: ExclamationTriangleIcon,
-    success: CheckCircleIcon,
-};
-</script>
-
-<template>
-    <div
-        class="flex items-start gap-2.5 rounded-md border px-3 py-2.5 text-sm"
-        :class="styles[props.type]"
-        :role="props.type === 'error' ? 'alert' : 'status'"
-    >
-        <component
-            :is="icons[props.type]"
-            class="mt-0.5 h-5 w-5 shrink-0"
-        />
-        <span>{{ text }}</span>
-    </div>
-</template>
diff --git a/app/src/components/auth/kratos/AuthShell.vue b/app/src/components/auth/kratos/AuthShell.vue
deleted file mode 100644
index cd60797270..0000000000
--- a/app/src/components/auth/kratos/AuthShell.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { ArrowLeftIcon } from "@heroicons/vue/24/outline";
-import { useAuthCopy } from "./useAuthCopy";
-
-type Props = {
-    title: string;
-    subtitle?: string;
-    /** Shows the back affordance; the parent decides what going back means. */
-    canGoBack?: boolean;
-};
-withDefaults(defineProps<Props>(), { canGoBack: false });
-defineEmits<{ back: [] }>();
-
-const c = useAuthCopy();
-</script>
-
-<template>
-    <div
-        class="w-full max-w-md rounded-lg border border-zinc-100 bg-white p-6 shadow dark:border-slate-800 dark:bg-slate-800"
-    >
-        <button
-            v-if="canGoBack"
-            type="button"
-            class="-ml-1.5 mb-3 inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100"
-            @click="$emit('back')"
-        >
-            <ArrowLeftIcon class="h-4 w-4" />
-            {{ c("auth.common.back") }}
-        </button>
-
-        <div
-            v-if="$slots.brand"
-            class="mb-5"
-        >
-            <slot name="brand" />
-        </div>
-
-        <h1 class="text-xl font-semibold text-zinc-900 dark:text-slate-100">{{ title }}</h1>
-        <p
-            v-if="subtitle"
-            class="mt-1.5 text-sm leading-relaxed text-zinc-500 dark:text-slate-400"
-        >
-            {{ subtitle }}
-        </p>
-
-        <div class="mt-6 flex flex-col gap-4">
-            <slot />
-        </div>
-
-        <div
-            v-if="$slots.footer"
-            class="mt-6 border-t border-zinc-100 pt-4 dark:border-slate-700"
-        >
-            <slot name="footer" />
-        </div>
-    </div>
-</template>
diff --git a/app/src/components/auth/kratos/AuthTextField.vue b/app/src/components/auth/kratos/AuthTextField.vue
deleted file mode 100644
index 0b4c4eabcc..0000000000
--- a/app/src/components/auth/kratos/AuthTextField.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { computed, useId } from "vue";
-
-type Props = {
-    label: string;
-    modelValue?: string;
-    type?: "text" | "email";
-    placeholder?: string;
-    error?: string;
-    hint?: string;
-    autocomplete?: string;
-    disabled?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), { type: "text", disabled: false });
-defineEmits<{ "update:modelValue": [value: string] }>();
-
-const id = useId();
-const describedBy = computed(() =>
-    props.error ? `${id}-error` : props.hint ? `${id}-hint` : undefined,
-);
-</script>
-
-<template>
-    <div class="flex flex-col gap-1.5">
-        <label
-            :for="id"
-            class="text-sm font-medium text-zinc-700 dark:text-slate-200"
-            >{{ label }}</label
-        >
-        <input
-            :id="id"
-            :type="type"
-            :value="modelValue"
-            :placeholder="placeholder"
-            :autocomplete="autocomplete"
-            :disabled="disabled"
-            :aria-invalid="error ? true : undefined"
-            :aria-describedby="describedBy"
-            class="w-full rounded-md border bg-white px-3 py-2.5 text-base text-zinc-900 placeholder-zinc-400 shadow-sm focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500 dark:bg-slate-700 dark:text-slate-100 dark:placeholder-slate-400 dark:disabled:bg-slate-800"
-            :class="
-                error
-                    ? 'border-red-400 focus:border-red-500 focus:ring-red-500/40 dark:border-red-500/70'
-                    : 'border-zinc-300 focus:border-yellow-500 focus:ring-yellow-500/40 dark:border-slate-600'
-            "
-            @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-        />
-        <p
-            v-if="error"
-            :id="`${id}-error`"
-            class="text-sm text-red-600 dark:text-red-400"
-        >
-            {{ error }}
-        </p>
-        <p
-            v-else-if="hint"
-            :id="`${id}-hint`"
-            class="text-sm text-zinc-500 dark:text-slate-400"
-        >
-            {{ hint }}
-        </p>
-    </div>
-</template>
diff --git a/app/src/components/auth/kratos/EmailIdentifierScreen.vue b/app/src/components/auth/kratos/EmailIdentifierScreen.vue
deleted file mode 100644
index 3f299f1d01..0000000000
--- a/app/src/components/auth/kratos/EmailIdentifierScreen.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import AuthTextField from "./AuthTextField.vue";
-import AuthMessage from "./AuthMessage.vue";
-import { useAuthCopy } from "./useAuthCopy";
-import type { AuthMessageType } from "./types";
-
-type Props = {
-    modelValue?: string;
-    error?: string;
-    message?: { type: AuthMessageType; text: string };
-    busy?: boolean;
-    /** Registration reuses this screen with its own heading and submit label. */
-    mode?: "login" | "recovery";
-};
-const props = withDefaults(defineProps<Props>(), { busy: false, mode: "login" });
-defineEmits<{ "update:modelValue": [value: string]; submit: []; back: [] }>();
-
-const c = useAuthCopy();
-const title = () => (props.mode === "recovery" ? c("auth.recovery.title") : c("auth.email.title"));
-const subtitle = () =>
-    props.mode === "recovery" ? c("auth.recovery.subtitle") : c("auth.email.subtitle");
-const submitLabel = () =>
-    props.mode === "recovery" ? c("auth.recovery.submit") : c("auth.email.submit");
-</script>
-
-<template>
-    <AuthShell
-        :title="title()"
-        :subtitle="subtitle()"
-        can-go-back
-        @back="$emit('back')"
-    >
-        <AuthMessage
-            v-if="message"
-            :type="message.type"
-            :text="message.text"
-        />
-
-        <form
-            class="flex flex-col gap-4"
-            @submit.prevent="$emit('submit')"
-        >
-            <AuthTextField
-                :label="c('auth.email.label')"
-                :placeholder="c('auth.email.placeholder')"
-                :model-value="modelValue"
-                :error="error"
-                type="email"
-                autocomplete="email"
-                :disabled="busy"
-                @update:model-value="$emit('update:modelValue', $event)"
-            />
-            <LButton
-                variant="primary"
-                size="xl"
-                :disabled="busy"
-                class="w-full"
-            >
-                {{ submitLabel() }}
-            </LButton>
-        </form>
-
-        <template
-            v-if="$slots.footer"
-            #footer
-        >
-            <slot name="footer" />
-        </template>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/GuestGateCard.vue b/app/src/components/auth/kratos/GuestGateCard.vue
deleted file mode 100644
index 00b5575952..0000000000
--- a/app/src/components/auth/kratos/GuestGateCard.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { BookmarkIcon } from "@heroicons/vue/24/outline";
-import LButton from "@/components/button/LButton.vue";
-import { useAuthCopy } from "./useAuthCopy";
-
-defineEmits<{ signIn: []; dismiss: [] }>();
-const c = useAuthCopy();
-</script>
-
-<template>
-    <!-- Shown in place, where the guest hit the limit — not as a modal that interrupts reading. -->
-    <div
-        class="flex w-full max-w-md items-start gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-slate-700 dark:bg-slate-800"
-    >
-        <span
-            class="flex size-9 shrink-0 items-center justify-center rounded-md bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
-        >
-            <BookmarkIcon class="h-5 w-5" />
-        </span>
-        <div class="flex min-w-0 flex-col gap-2">
-            <p class="text-sm font-semibold text-zinc-900 dark:text-slate-100">
-                {{ c("auth.gate.bookmarks_title") }}
-            </p>
-            <p class="text-sm leading-relaxed text-zinc-500 dark:text-slate-400">
-                {{ c("auth.gate.bookmarks_body") }}
-            </p>
-            <div class="mt-1 flex items-center gap-2">
-                <LButton
-                    variant="primary"
-                    size="sm"
-                    @click="$emit('signIn')"
-                >
-                    {{ c("auth.gate.sign_in") }}
-                </LButton>
-                <LButton
-                    variant="tertiary"
-                    size="sm"
-                    @click="$emit('dismiss')"
-                >
-                    {{ c("auth.gate.dismiss") }}
-                </LButton>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/app/src/components/auth/kratos/GuestUpgradeScreen.vue b/app/src/components/auth/kratos/GuestUpgradeScreen.vue
deleted file mode 100644
index 82885036e0..0000000000
--- a/app/src/components/auth/kratos/GuestUpgradeScreen.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { BookmarkIcon, ChartBarIcon } from "@heroicons/vue/24/outline";
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import { useAuthCopy } from "./useAuthCopy";
-
-type Props = { bookmarkCount?: number };
-withDefaults(defineProps<Props>(), { bookmarkCount: 0 });
-defineEmits<{ upgrade: []; later: [] }>();
-
-const c = useAuthCopy();
-</script>
-
-<template>
-    <AuthShell
-        :title="c('auth.upgrade.title')"
-        :subtitle="c('auth.upgrade.subtitle')"
-    >
-        <ul class="flex flex-col gap-3">
-            <li class="flex items-center gap-3">
-                <span
-                    class="flex size-8 shrink-0 items-center justify-center rounded-md bg-zinc-100 text-zinc-500 dark:bg-slate-700 dark:text-slate-300"
-                >
-                    <BookmarkIcon class="h-4 w-4" />
-                </span>
-                <span class="text-sm text-zinc-700 dark:text-slate-200">
-                    {{ c("auth.upgrade.bookmarks", { count: bookmarkCount }) }}
-                </span>
-            </li>
-            <li class="flex items-center gap-3">
-                <span
-                    class="flex size-8 shrink-0 items-center justify-center rounded-md bg-zinc-100 text-zinc-500 dark:bg-slate-700 dark:text-slate-300"
-                >
-                    <ChartBarIcon class="h-4 w-4" />
-                </span>
-                <span class="text-sm text-zinc-700 dark:text-slate-200">
-                    {{ c("auth.upgrade.progress") }}
-                </span>
-            </li>
-        </ul>
-
-        <LButton
-            variant="primary"
-            size="xl"
-            class="w-full"
-            @click="$emit('upgrade')"
-        >
-            {{ c("auth.upgrade.submit") }}
-        </LButton>
-
-        <template #footer>
-            <button
-                type="button"
-                class="w-full text-center text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
-                @click="$emit('later')"
-            >
-                {{ c("auth.upgrade.later") }}
-            </button>
-        </template>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/GuestWelcomeScreen.vue b/app/src/components/auth/kratos/GuestWelcomeScreen.vue
deleted file mode 100644
index fac5876350..0000000000
--- a/app/src/components/auth/kratos/GuestWelcomeScreen.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import { useAuthCopy } from "./useAuthCopy";
-
-type Props = { appName?: string; logoUrl?: string };
-withDefaults(defineProps<Props>(), { appName: "Luminary" });
-defineEmits<{ signIn: []; guest: [] }>();
-
-const c = useAuthCopy();
-</script>
-
-<template>
-    <AuthShell
-        :title="c('auth.guest.title')"
-        :subtitle="c('auth.guest.subtitle')"
-    >
-        <template #brand>
-            <div class="flex items-center gap-3">
-                <img
-                    v-if="logoUrl"
-                    :src="logoUrl"
-                    alt=""
-                    class="h-9 w-9"
-                />
-                <span class="text-lg font-semibold text-zinc-900 dark:text-slate-100">
-                    {{ appName }}
-                </span>
-            </div>
-        </template>
-
-        <LButton
-            variant="primary"
-            size="xl"
-            class="w-full"
-            @click="$emit('signIn')"
-        >
-            {{ c("auth.guest.sign_in") }}
-        </LButton>
-        <LButton
-            variant="secondary"
-            size="xl"
-            class="w-full"
-            @click="$emit('guest')"
-        >
-            {{ c("auth.guest.continue") }}
-        </LButton>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/OneTimeCodeScreen.vue b/app/src/components/auth/kratos/OneTimeCodeScreen.vue
deleted file mode 100644
index 02eea9c703..0000000000
--- a/app/src/components/auth/kratos/OneTimeCodeScreen.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import AuthCodeInput from "./AuthCodeInput.vue";
-import AuthMessage from "./AuthMessage.vue";
-import { useAuthCopy } from "./useAuthCopy";
-import type { AuthMessageType } from "./types";
-
-type Props = {
-    email: string;
-    modelValue?: string;
-    message?: { type: AuthMessageType; text: string };
-    busy?: boolean;
-    /** Seconds until a new code may be requested; 0 enables the resend button. */
-    resendIn?: number;
-    /** Verification says "confirm", login says "sign in" — same flow shape, different words. */
-    mode?: "login" | "verification";
-};
-const props = withDefaults(defineProps<Props>(), { busy: false, resendIn: 0, mode: "login" });
-defineEmits<{
-    "update:modelValue": [value: string];
-    submit: [];
-    resend: [];
-    changeEmail: [];
-    back: [];
-}>();
-
-const c = useAuthCopy();
-const title = () => (props.mode === "verification" ? c("auth.verify.title") : c("auth.code.title"));
-const subtitle = () =>
-    props.mode === "verification"
-        ? c("auth.verify.subtitle", { email: props.email })
-        : c("auth.code.subtitle", { email: props.email });
-const submitLabel = () =>
-    props.mode === "verification" ? c("auth.verify.submit") : c("auth.code.submit");
-</script>
-
-<template>
-    <AuthShell
-        :title="title()"
-        :subtitle="subtitle()"
-        can-go-back
-        @back="$emit('back')"
-    >
-        <AuthMessage
-            v-if="message"
-            :type="message.type"
-            :text="message.text"
-        />
-
-        <form
-            class="flex flex-col gap-4"
-            @submit.prevent="$emit('submit')"
-        >
-            <AuthCodeInput
-                :label="c('auth.code.label')"
-                :model-value="modelValue"
-                :error="message?.type === 'error'"
-                :disabled="busy"
-                @update:model-value="$emit('update:modelValue', $event)"
-                @complete="$emit('submit')"
-            />
-            <LButton
-                variant="primary"
-                size="xl"
-                :disabled="busy || (modelValue?.length ?? 0) < 6"
-                class="w-full"
-            >
-                {{ submitLabel() }}
-            </LButton>
-        </form>
-
-        <template #footer>
-            <div class="flex flex-col items-center gap-2 text-sm">
-                <button
-                    v-if="!resendIn"
-                    type="button"
-                    class="font-medium text-zinc-700 underline underline-offset-2 hover:text-zinc-900 dark:text-slate-200 dark:hover:text-white"
-                    @click="$emit('resend')"
-                >
-                    {{ c("auth.code.resend") }}
-                </button>
-                <span
-                    v-else
-                    class="tabular-nums text-zinc-400 dark:text-slate-500"
-                >
-                    {{ c("auth.code.resend_in", { seconds: resendIn }) }}
-                </span>
-                <button
-                    type="button"
-                    class="text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
-                    @click="$emit('changeEmail')"
-                >
-                    {{ c("auth.code.change_email") }}
-                </button>
-            </div>
-        </template>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/RegistrationScreen.vue b/app/src/components/auth/kratos/RegistrationScreen.vue
deleted file mode 100644
index fdc80cdcc1..0000000000
--- a/app/src/components/auth/kratos/RegistrationScreen.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import LButton from "@/components/button/LButton.vue";
-import AuthShell from "./AuthShell.vue";
-import AuthTextField from "./AuthTextField.vue";
-import AuthMessage from "./AuthMessage.vue";
-import { useAuthCopy } from "./useAuthCopy";
-import type { AuthMessageType } from "./types";
-
-type Props = {
-    email?: string;
-    name?: string;
-    emailError?: string;
-    message?: { type: AuthMessageType; text: string };
-    busy?: boolean;
-};
-withDefaults(defineProps<Props>(), { busy: false });
-defineEmits<{
-    "update:email": [value: string];
-    "update:name": [value: string];
-    submit: [];
-    signIn: [];
-    back: [];
-}>();
-
-const c = useAuthCopy();
-</script>
-
-<template>
-    <AuthShell
-        :title="c('auth.register.title')"
-        :subtitle="c('auth.register.subtitle')"
-        can-go-back
-        @back="$emit('back')"
-    >
-        <AuthMessage
-            v-if="message"
-            :type="message.type"
-            :text="message.text"
-        />
-
-        <form
-            class="flex flex-col gap-4"
-            @submit.prevent="$emit('submit')"
-        >
-            <AuthTextField
-                :label="c('auth.email.label')"
-                :placeholder="c('auth.email.placeholder')"
-                :model-value="email"
-                :error="emailError"
-                type="email"
-                autocomplete="email"
-                :disabled="busy"
-                @update:model-value="$emit('update:email', $event)"
-            />
-            <AuthTextField
-                :label="c('auth.register.name_label')"
-                :placeholder="c('auth.register.name_placeholder')"
-                :model-value="name"
-                autocomplete="name"
-                :disabled="busy"
-                @update:model-value="$emit('update:name', $event)"
-            />
-            <LButton
-                variant="primary"
-                size="xl"
-                :disabled="busy"
-                class="w-full"
-            >
-                {{ c("auth.register.submit") }}
-            </LButton>
-        </form>
-
-        <template #footer>
-            <div class="flex flex-col items-center gap-3">
-                <button
-                    type="button"
-                    class="text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
-                    @click="$emit('signIn')"
-                >
-                    {{ c("auth.register.have_account") }}
-                </button>
-                <p class="text-center text-xs text-zinc-400 dark:text-slate-500">
-                    {{ c("auth.common.privacy_note") }}
-                </p>
-            </div>
-        </template>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/SignInMethodsScreen.vue b/app/src/components/auth/kratos/SignInMethodsScreen.vue
deleted file mode 100644
index cf93d1ded1..0000000000
--- a/app/src/components/auth/kratos/SignInMethodsScreen.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import { EnvelopeIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
-import AuthShell from "./AuthShell.vue";
-import AuthMessage from "./AuthMessage.vue";
-import { useAuthCopy } from "./useAuthCopy";
-import type { AuthMessageType, AuthProviderOption } from "./types";
-
-type Props = {
-    providers?: AuthProviderOption[];
-    message?: { type: AuthMessageType; text: string };
-    /** Guests reach this screen from a gate; a first-run visitor can still walk away. */
-    showGuestExit?: boolean;
-};
-withDefaults(defineProps<Props>(), { providers: () => [], showGuestExit: true });
-defineEmits<{ email: []; provider: [id: string]; guest: [] }>();
-
-const c = useAuthCopy();
-</script>
-
-<template>
-    <AuthShell
-        :title="c('auth.methods.title')"
-        :subtitle="c('auth.methods.subtitle')"
-    >
-        <AuthMessage
-            v-if="message"
-            :type="message.type"
-            :text="message.text"
-        />
-
-        <button
-            type="button"
-            class="flex w-full items-center gap-3 rounded-lg border border-zinc-200 bg-white px-4 py-4 text-start hover:bg-zinc-50 dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600/60"
-            @click="$emit('email')"
-        >
-            <span
-                class="flex size-9 shrink-0 items-center justify-center rounded-md bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
-            >
-                <EnvelopeIcon class="h-5 w-5" />
-            </span>
-            <span class="text-[15px] font-medium text-zinc-800 dark:text-slate-100">
-                {{ c("auth.methods.guest_sign_in") }}
-            </span>
-        </button>
-
-        <div
-            v-if="providers.length"
-            class="flex items-center gap-3"
-        >
-            <span class="h-px flex-1 bg-zinc-200 dark:bg-slate-600" />
-            <span class="text-xs uppercase tracking-wide text-zinc-400 dark:text-slate-400">
-                {{ c("auth.methods.divider") }}
-            </span>
-            <span class="h-px flex-1 bg-zinc-200 dark:bg-slate-600" />
-        </div>
-
-        <div class="flex flex-col gap-3">
-            <button
-                v-for="provider in providers"
-                :key="provider.id"
-                type="button"
-                class="group relative flex w-full items-center gap-3 overflow-hidden rounded-lg border border-zinc-200 bg-white px-4 py-4 hover:shadow-sm dark:border-slate-600 dark:bg-slate-700"
-                :style="
-                    provider.backgroundColor
-                        ? {
-                              backgroundColor: provider.backgroundColor,
-                              borderColor: provider.backgroundColor,
-                          }
-                        : {}
-                "
-                @click="$emit('provider', provider.id)"
-            >
-                <span
-                    class="pointer-events-none absolute inset-0 bg-white opacity-0 group-hover:opacity-20"
-                />
-                <img
-                    v-if="provider.iconUrl"
-                    :src="provider.iconUrl"
-                    alt=""
-                    class="size-5 shrink-0"
-                />
-                <span
-                    class="text-[15px] font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-slate-200 dark:group-hover:text-white"
-                    :style="provider.textColor ? { color: provider.textColor } : {}"
-                >
-                    {{ provider.label }}
-                </span>
-            </button>
-        </div>
-
-        <div
-            v-if="!providers.length && message?.type === 'error'"
-            class="flex flex-col items-center gap-3 py-4 text-center"
-        >
-            <span class="rounded-full bg-zinc-100 p-3 dark:bg-slate-700">
-                <ExclamationTriangleIcon class="h-6 w-6 text-zinc-400 dark:text-slate-400" />
-            </span>
-            <p class="text-sm text-zinc-500 dark:text-slate-400">{{ c("auth.methods.none") }}</p>
-        </div>
-
-        <template
-            v-if="showGuestExit"
-            #footer
-        >
-            <div class="flex flex-col items-center gap-3">
-                <!-- A text link, never a third button: continuing as a guest is a dismissal, not a sign-in method. -->
-                <button
-                    type="button"
-                    class="text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
-                    @click="$emit('guest')"
-                >
-                    {{ c("auth.methods.guest") }}
-                </button>
-                <p class="text-center text-xs text-zinc-400 dark:text-slate-500">
-                    {{ c("auth.common.privacy_note") }}
-                </p>
-            </div>
-        </template>
-    </AuthShell>
-</template>
diff --git a/app/src/components/auth/kratos/authCopy.ts b/app/src/components/auth/kratos/authCopy.ts
deleted file mode 100644
index e129b46605..0000000000
--- a/app/src/components/auth/kratos/authCopy.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Default English copy for the Kratos auth screens, keyed by the i18n key each
- * string uses once the language docs carry it. Until then `useAuthCopy` falls
- * back to the value here, so the screens read correctly before translation.
- */
-export const authCopy = {
-    "auth.methods.title": "Sign in",
-    "auth.methods.subtitle":
-        "Use your email address, or continue with an account you already have.",
-    "auth.methods.guest_sign_in": "Sign in as Guest",
-    "auth.methods.divider": "or",
-    "auth.methods.guest": "Continue without an account",
-    "auth.methods.none": "No sign-in methods are available right now.",
-
-    "auth.email.title": "What's your email address?",
-    "auth.email.subtitle": "We'll send you a 6-digit code. No password to remember.",
-    "auth.email.label": "Email address",
-    "auth.email.placeholder": "you@example.com",
-    "auth.email.submit": "Send me a code",
-    "auth.email.invalid": "That doesn't look like an email address.",
-
-    "auth.code.title": "Enter your code",
-    "auth.code.subtitle": "We sent a 6-digit code to {email}.",
-    "auth.code.label": "Verification code",
-    "auth.code.submit": "Sign in",
-    "auth.code.resend": "Send a new code",
-    "auth.code.resend_in": "You can ask for a new code in {seconds}s",
-    "auth.code.change_email": "Use a different email address",
-    "auth.code.invalid": "That code isn't right. Check it and try again.",
-    "auth.code.expired": "This code has expired. Ask for a new one.",
-    "auth.code.too_many": "Too many tries. Wait a minute, then ask for a new code.",
-
-    "auth.register.title": "Create your account",
-    "auth.register.subtitle": "Your saved items and progress move with you, on every device.",
-    "auth.register.name_label": "Name",
-    "auth.register.name_placeholder": "How should we greet you?",
-    "auth.register.submit": "Create account",
-    "auth.register.have_account": "I already have an account",
-
-    "auth.verify.title": "Confirm your email",
-    "auth.verify.subtitle":
-        "Enter the 6-digit code we sent to {email} to finish setting up your account.",
-    "auth.verify.submit": "Confirm",
-    "auth.verify.done_title": "You're all set",
-    "auth.verify.done_subtitle": "Your email is confirmed and you're signed in.",
-    "auth.verify.done_continue": "Start reading",
-
-    "auth.upgrade.title": "Keep what you've saved",
-    "auth.upgrade.subtitle":
-        "You've been reading as a guest. Create an account and everything saved on this device comes with you.",
-    "auth.upgrade.bookmarks": "{count} saved items",
-    "auth.upgrade.progress": "Your reading and watching progress",
-    "auth.upgrade.submit": "Create an account",
-    "auth.upgrade.later": "Not now",
-
-    "auth.recovery.title": "Recover your account",
-    "auth.recovery.subtitle":
-        "Enter the email you signed up with and we'll send you a code to get back in.",
-    "auth.recovery.submit": "Send recovery code",
-    "auth.recovery.sent": "If that address has an account, a code is on its way.",
-
-    "auth.settings.title": "Account",
-    "auth.settings.email_section": "Email address",
-    "auth.settings.methods_section": "Sign-in methods",
-    "auth.settings.sessions_section": "Where you're signed in",
-    "auth.settings.this_device": "This device",
-    "auth.settings.sign_out_others": "Sign out everywhere else",
-    "auth.settings.change": "Change",
-    "auth.settings.link": "Link",
-    "auth.settings.unlink": "Unlink",
-    "auth.settings.delete": "Delete my account",
-
-    "auth.guest.title": "Welcome",
-    "auth.guest.subtitle":
-        "Sign in to save what you read across your devices — or look around first.",
-    "auth.guest.sign_in": "Sign in",
-    "auth.guest.continue": "Continue without an account",
-    "auth.guest.badge": "Guest",
-    "auth.guest.signed_in_as": "Signed in as {name}",
-    "auth.guest.sign_out": "Sign out",
-
-    "auth.gate.bookmarks_title": "Save this for later",
-    "auth.gate.bookmarks_body":
-        "Bookmarks stay on this device until you sign in. Sign in to keep them everywhere.",
-    "auth.gate.sign_in": "Sign in",
-    "auth.gate.dismiss": "Not now",
-
-    "auth.error.title": "Something went wrong",
-    "auth.error.expired_title": "That took a little too long",
-    "auth.error.expired_body":
-        "For your safety this sign-in link expired. Start again and it'll only take a moment.",
-    "auth.error.offline_title": "You're offline",
-    "auth.error.offline_body":
-        "Signing in needs a connection. Everything already downloaded is still here to read.",
-    "auth.error.restart": "Start again",
-    "auth.error.back": "Back to reading",
-    "auth.error.reference": "Reference: {id}",
-
-    "auth.common.back": "Back",
-    "auth.common.privacy_note": "By continuing you accept our privacy policy.",
-} as const;
-
-export type AuthCopyKey = keyof typeof authCopy;
diff --git a/app/src/components/auth/kratos/screens.spec.ts b/app/src/components/auth/kratos/screens.spec.ts
deleted file mode 100644
index 2fae18f098..0000000000
--- a/app/src/components/auth/kratos/screens.spec.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import { authCopy } from "./authCopy";
-import AuthCodeInput from "./AuthCodeInput.vue";
-import SignInMethodsScreen from "./SignInMethodsScreen.vue";
-import EmailIdentifierScreen from "./EmailIdentifierScreen.vue";
-import OneTimeCodeScreen from "./OneTimeCodeScreen.vue";
-import RegistrationScreen from "./RegistrationScreen.vue";
-import AuthDoneScreen from "./AuthDoneScreen.vue";
-import GuestWelcomeScreen from "./GuestWelcomeScreen.vue";
-import GuestGateCard from "./GuestGateCard.vue";
-import GuestUpgradeScreen from "./GuestUpgradeScreen.vue";
-import AccountSettingsScreen from "./AccountSettingsScreen.vue";
-import AuthErrorScreen from "./AuthErrorScreen.vue";
-
-// No auth key is translated yet, so `te` is false everywhere and the screens
-// fall back to the English defaults in authCopy — which is what they render in
-// production until the language docs carry the keys.
-vi.mock("vue-i18n", () => ({
-    useI18n: () => ({ t: (key: string) => key, te: () => false }),
-}));
-
-describe("Kratos auth screens", () => {
-    it("renders every screen with its default copy", () => {
-        const cases: Array<[string, ReturnType<typeof mount>]> = [
-            [authCopy["auth.methods.title"], mount(SignInMethodsScreen)],
-            [authCopy["auth.email.title"], mount(EmailIdentifierScreen)],
-            [
-                authCopy["auth.code.title"],
-                mount(OneTimeCodeScreen, { props: { email: "a@b.com" } }),
-            ],
-            [authCopy["auth.register.title"], mount(RegistrationScreen)],
-            [authCopy["auth.verify.done_title"], mount(AuthDoneScreen)],
-            [authCopy["auth.guest.title"], mount(GuestWelcomeScreen)],
-            [authCopy["auth.gate.bookmarks_title"], mount(GuestGateCard)],
-            [authCopy["auth.upgrade.title"], mount(GuestUpgradeScreen)],
-            [
-                authCopy["auth.settings.title"],
-                mount(AccountSettingsScreen, { props: { email: "a@b.com" } }),
-            ],
-            [
-                authCopy["auth.error.expired_title"],
-                mount(AuthErrorScreen, { props: { kind: "expired" } }),
-            ],
-        ];
-
-        for (const [heading, wrapper] of cases) {
-            expect(wrapper.text()).toContain(heading);
-        }
-    });
-
-    it("interpolates the address into the code screen's subtitle", () => {
-        const wrapper = mount(OneTimeCodeScreen, { props: { email: "johan@example.com" } });
-        expect(wrapper.text()).toContain("johan@example.com");
-        expect(wrapper.text()).not.toContain("{email}");
-    });
-
-    it("offers a resend only once the countdown has run out", async () => {
-        const waiting = mount(OneTimeCodeScreen, { props: { email: "a@b.com", resendIn: 20 } });
-        expect(waiting.text()).toContain("20s");
-        expect(waiting.text()).not.toContain(authCopy["auth.code.resend"]);
-
-        const ready = mount(OneTimeCodeScreen, { props: { email: "a@b.com", resendIn: 0 } });
-        expect(ready.text()).toContain(authCopy["auth.code.resend"]);
-    });
-
-    it("spreads a pasted code across the boxes and reports completion", async () => {
-        const wrapper = mount(AuthCodeInput, { props: { label: "Code" } });
-        await wrapper.find("input").trigger("paste", {
-            clipboardData: { getData: () => "1 2 3-456" },
-        });
-
-        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["123456"]);
-        expect(wrapper.emitted("complete")?.at(-1)).toEqual(["123456"]);
-    });
-
-    it("keeps continuing as a guest out of the method list", () => {
-        const wrapper = mount(SignInMethodsScreen, {
-            props: { providers: [{ id: "bcc", label: "Continue with BCC" }] },
-        });
-        const methodButtons = wrapper.findAll("button");
-        const guest = methodButtons.find((b) => b.text() === authCopy["auth.methods.guest"]);
-
-        expect(guest).toBeDefined();
-        // A dismissal must not wear the same clothes as a sign-in method.
-        expect(guest!.classes().join(" ")).toContain("underline");
-        expect(guest!.classes().join(" ")).not.toContain("border");
-    });
-});
diff --git a/app/src/components/auth/kratos/types.ts b/app/src/components/auth/kratos/types.ts
deleted file mode 100644
index 93eedbaff6..0000000000
--- a/app/src/components/auth/kratos/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/** The non-secret provider fields these screens need, as carried on an `AuthProviderDto`. */
-export type AuthProviderOption = {
-    id: string;
-    label: string;
-    iconUrl?: string;
-    backgroundColor?: string;
-    textColor?: string;
-};
-
-/** Kratos message types, as they arrive on `ui.messages[].type`. */
-export type AuthMessageType = "info" | "error" | "success";
diff --git a/app/src/components/auth/kratos/useAuthCopy.ts b/app/src/components/auth/kratos/useAuthCopy.ts
deleted file mode 100644
index e46aab3cfd..0000000000
--- a/app/src/components/auth/kratos/useAuthCopy.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useI18n } from "vue-i18n";
-import { authCopy, type AuthCopyKey } from "./authCopy";
-
-type Params = Record<string, string | number>;
-
-function interpolate(template: string, params?: Params): string {
-    if (!params) return template;
-    return template.replace(/\{(\w+)\}/g, (match, name) =>
-        name in params ? String(params[name]) : match,
-    );
-}
-
-/**
- * Resolves an auth string from the synced language docs, falling back to the
- * English default in `authCopy` while a key has no translation yet. Screens can
- * therefore be designed and reviewed before the keys exist.
- */
-export function useAuthCopy() {
-    const { t, te } = useI18n();
-
-    return (key: AuthCopyKey, params?: Params): string =>
-        te(key) ? t(key, params ?? {}) : interpolate(authCopy[key], params);
-}
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
index 89d9a1b2dc..e095cec981 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.spec.ts
@@ -10,9 +10,9 @@ vi.mock("vue-i18n", () => ({
     useI18n: () => ({
         t: (key: string) =>
             (
-                ({
+                {
                     "login.provider.button": "Sign in with Example Org",
-                }) as Record<string, string>
+                } as Record<string, string>
             )[key] ?? key,
     }),
 }));
@@ -137,7 +137,9 @@ describe("AuthProviderSelectionModal.vue", () => {
             expect(wrapper.html()).toContain("Acme Corp");
         });
 
-        const providerBtn = wrapper.findAll("button").find((b) => b.text().includes("Acme Corp"));
+        const providerBtn = wrapper
+            .findAll("button")
+            .find((b) => b.text().includes("Acme Corp"));
         await providerBtn!.trigger("click");
 
         expect(loginWithProvider).toHaveBeenCalledTimes(1);
@@ -157,7 +159,9 @@ describe("AuthProviderSelectionModal.vue", () => {
             expect(wrapper.html()).toContain("Beta Inc");
         });
 
-        const providerBtn = wrapper.findAll("button").find((b) => b.text().includes("Beta Inc"));
+        const providerBtn = wrapper
+            .findAll("button")
+            .find((b) => b.text().includes("Beta Inc"));
         const style = providerBtn!.attributes("style") ?? "";
         expect(style).toContain("background-color");
         expect(style).toContain("color");
diff --git a/app/src/components/authProvider/AuthProviderSelectionModal.vue b/app/src/components/authProvider/AuthProviderSelectionModal.vue
index a9e1a4a272..f26164b841 100644
--- a/app/src/components/authProvider/AuthProviderSelectionModal.vue
+++ b/app/src/components/authProvider/AuthProviderSelectionModal.vue
@@ -21,10 +21,7 @@ const providers = computed(() =>
     [...allProviders.value].sort((a, b) => (a.sortIndex ?? 0) - (b.sortIndex ?? 0)),
 );
 const resolveProviderLabel = (provider: AuthProviderDto) =>
-    resolveI18nEmbedded(
-        provider.label || provider.displayName || provider.domain || provider._id,
-        t,
-    );
+    resolveI18nEmbedded(provider.label || provider.displayName || provider.domain || provider._id, t);
 
 const hasIcon = (provider: AuthProviderDto) =>
     provider.imageData?.fileCollections?.some((fc) => fc.imageFiles?.length > 0) ?? false;
diff --git a/app/src/components/navigation/DesktopSidebar.vue b/app/src/components/navigation/DesktopSidebar.vue
index 0df054de46..d16a1ca650 100644
--- a/app/src/components/navigation/DesktopSidebar.vue
+++ b/app/src/components/navigation/DesktopSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted, unref } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { getNavigationItems } from "./navigationItems";
 import { useSearchOverlay } from "@/composables/useSearchOverlay";
@@ -29,10 +29,7 @@ import LDialog from "../common/LDialog.vue";
 import LToggle from "../form/LToggle.vue";
 import { cmsLanguages } from "@/globalConfig";
 import { useDisplayLanguageIds } from "@/ssg/renderLanguage";
-import {
-    showPrivacyPolicyModal,
-    useAuthWithPrivacyPolicy,
-} from "@/composables/useAuthWithPrivacyPolicy";
+import { showPrivacyPolicyModal, useAuthWithPrivacyPolicy } from "@/composables/useAuthWithPrivacyPolicy";
 import { isConnected } from "luminary-shared";
 import { useNotificationStore, type Notification } from "@/stores/notification";
 import { useHydrated } from "@/composables/useHydrated";
@@ -90,12 +87,9 @@ const languageTooltip = computed(() => {
     return name ? `${t("profile_menu.language")} — ${name}` : t("profile_menu.language");
 });
 
-const accountLabel = computed(() => {
-    const details = unref(user) as { name?: string; email?: string } | undefined;
-    return details?.name || details?.email || t("profile_menu.title");
-});
-
-const profileTooltip = computed(() => (isAuthenticated.value ? accountLabel.value : ""));
+const profileTooltip = computed(() =>
+    isAuthenticated.value ? user.value?.name || user.value?.email || t("profile_menu.title") : "",
+);
 
 const showOfflineNotification = () => {
     useNotificationStore().addNotification({
@@ -256,8 +250,7 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                        >{{ item.name }}</span
-                    >
+                    >{{ item.name }}</span>
                 </a>
             </RouterLink>
 
@@ -278,8 +271,7 @@ const handleLogin = () => {
                 <span
                     v-if="!collapsed"
                     :class="navLabelClass"
-                    >{{ t("menu.search") }}</span
-                >
+                >{{ t("menu.search") }}</span>
             </span>
 
             <RouterLink
@@ -301,8 +293,7 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                        >{{ t("profile_menu.bookmarks") }}</span
-                    >
+                    >{{ t("profile_menu.bookmarks") }}</span>
                 </a>
             </RouterLink>
 
@@ -322,8 +313,7 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                        >{{ t("profile_menu.theme") }}</span
-                    >
+                    >{{ t("profile_menu.theme") }}</span>
                 </span>
 
                 <span
@@ -337,14 +327,13 @@ const handleLogin = () => {
                     />
                     <div
                         v-if="!collapsed"
-                        class="flex min-w-0 flex-col leading-none"
+                        class="min-w-0 flex flex-col leading-none"
                     >
                         <span :class="navLabelClass">{{ t("profile_menu.language") }}</span>
                         <span
                             v-if="renderLanguage?.name"
                             :class="navMetaClass"
-                            >{{ renderLanguage.name }}</span
-                        >
+                        >{{ renderLanguage.name }}</span>
                     </div>
                 </span>
 
@@ -367,8 +356,7 @@ const handleLogin = () => {
                         <span
                             v-if="!collapsed"
                             :class="navLabelClass"
-                            >{{ t("profile_menu.settings") }}</span
-                        >
+                        >{{ t("profile_menu.settings") }}</span>
                     </a>
                 </RouterLink>
             </div>
@@ -392,8 +380,7 @@ const handleLogin = () => {
                 <span
                     v-if="!collapsed"
                     :class="navLabelClass"
-                    >{{ t("profile_menu.privacy_policy") }}</span
-                >
+                >{{ t("profile_menu.privacy_policy") }}</span>
             </button>
 
             <button
@@ -403,9 +390,7 @@ const handleLogin = () => {
                 @click="isAuthenticated ? handleLogout() : handleLogin()"
             >
                 <component
-                    :is="
-                        isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon
-                    "
+                    :is="isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon"
                     :class="navIconClass"
                     aria-hidden="true"
                 />
@@ -421,7 +406,7 @@ const handleLogin = () => {
                 v-if="isAuthenticated"
                 :class="[
                     'flex items-center rounded-md',
-                    collapsed ? 'justify-center px-0 py-1' : 'gap-3 py-1.5 pl-1.5',
+                    collapsed ? 'justify-center px-0 py-1' : 'gap-3 pl-1.5 py-1.5',
                 ]"
                 :title="profileTooltip"
             >
@@ -441,7 +426,7 @@ const handleLogin = () => {
                     v-if="!collapsed"
                     class="min-w-0 flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100"
                 >
-                    {{ accountLabel }}
+                    {{ user?.name || user?.email }}
                 </span>
             </div>
         </div>
diff --git a/app/src/components/navigation/ProfileMenu.vue b/app/src/components/navigation/ProfileMenu.vue
index 7f2bfabc5b..d7dcf60535 100644
--- a/app/src/components/navigation/ProfileMenu.vue
+++ b/app/src/components/navigation/ProfileMenu.vue
@@ -11,10 +11,9 @@ import {
 import { Bars3Icon as Bars3IconSolid } from "@heroicons/vue/24/solid";
 import ThemeSelectorModal from "./ThemeSelectorModal.vue";
 import { useRouter } from "vue-router";
-import { computed, onMounted, ref, unref, type ComputedRef } from "vue";
+import { computed, onMounted, ref, type ComputedRef } from "vue";
 import {
     ShieldCheckIcon,
-    UserCircleIcon,
     BookmarkIcon,
     Bars3Icon,
     Cog6ToothIcon,
@@ -157,13 +156,6 @@ const privacyPolicyNavigationItem = computed(
     }),
 );
 
-/** The name shown on the menu trigger and in the panel header. */
-const accountLabel = computed(() => {
-    // `user` is a ref in the app but a plain object in some mounted tests.
-    const details = unref(user) as { name?: string; email?: string } | undefined;
-    return isAuthenticated.value ? details?.name || details?.email : t("profile_menu.title");
-});
-
 const userNavigation = computed(() => {
     const authItem = isAuthenticated.value
         ? {
@@ -215,6 +207,7 @@ const sidebarNavigation = computed(() =>
         aria-label="Open user menu"
         class="-m-1.5 flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-zinc-200 dark:hover:bg-slate-600"
         @click="menuOpen = !menuOpen"
+
     >
         <img
             v-if="isAuthenticated && user?.picture"
@@ -263,7 +256,7 @@ const sidebarNavigation = computed(() =>
                 <span
                     class="flex-1 truncate text-left text-sm font-medium text-zinc-700 dark:text-slate-100"
                 >
-                    {{ accountLabel }}
+                    {{ isAuthenticated ? user?.name || user?.email : t("profile_menu.title") }}
                 </span>
                 <component
                     :is="menuOpen ? ChevronUpIcon : ChevronDownIcon"
@@ -443,14 +436,11 @@ const sidebarNavigation = computed(() =>
                             aria-hidden="true"
                         />
                         <div class="flex flex-col leading-none">
-                            <span class="text-sm font-medium">{{
-                                t("profile_menu.language")
-                            }}</span>
+                            <span class="text-sm font-medium">{{ t("profile_menu.language") }}</span>
                             <span
                                 v-if="appLanguageAsRef?.name"
                                 class="mt-0.5 text-xs text-zinc-500 dark:text-slate-300"
-                                >{{ appLanguageAsRef.name }}</span
-                            >
+                            >{{ appLanguageAsRef.name }}</span>
                         </div>
                     </span>
 
@@ -477,9 +467,7 @@ const sidebarNavigation = computed(() =>
                                 class="h-5 w-5 flex-shrink-0"
                                 aria-hidden="true"
                             />
-                            <span class="text-sm font-medium">{{
-                                t("profile_menu.settings")
-                            }}</span>
+                            <span class="text-sm font-medium">{{ t("profile_menu.settings") }}</span>
                         </span>
                     </RouterLink>
                 </div>
@@ -508,11 +496,7 @@ const sidebarNavigation = computed(() =>
                     @click="isAuthenticated ? handleLogout() : handleLogin()"
                 >
                     <component
-                        :is="
-                            isAuthenticated
-                                ? ArrowRightEndOnRectangleIcon
-                                : ArrowLeftEndOnRectangleIcon
-                        "
+                        :is="isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon"
                         class="h-5 w-5 flex-shrink-0"
                         aria-hidden="true"
                     />
@@ -538,10 +522,8 @@ const sidebarNavigation = computed(() =>
                     >
                         <UserIcon class="h-5 w-5 text-zinc-600 dark:text-slate-100" />
                     </div>
-                    <span
-                        class="flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100"
-                    >
-                        {{ accountLabel }}
+                    <span class="flex-1 truncate text-sm font-medium text-zinc-700 dark:text-slate-100">
+                        {{ user?.name || user?.email }}
                     </span>
                 </div>
             </div>
diff --git a/app/src/pages/auth/KratosAccountPage.vue b/app/src/pages/auth/KratosAccountPage.vue
deleted file mode 100644
index c842e1c79f..0000000000
--- a/app/src/pages/auth/KratosAccountPage.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import LButton from "@/components/button/LButton.vue";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import AccountSettingsScreen from "@/components/auth/kratos/AccountSettingsScreen.vue";
-import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
-import type { ActiveSession } from "@/components/auth/kratos/AccountSettingsScreen.vue";
-import { listOtherSessions, logout, signOutOtherSessions, whoami } from "@/auth/kratos/client";
-import type { KratosSessionListEntry } from "@/auth/kratos/types";
-
-const router = useRouter();
-const loading = ref(true);
-const session = ref<KratosSessionListEntry | null>(null);
-const others = ref<KratosSessionListEntry[]>([]);
-
-const email = computed(() => session.value?.identity?.traits.email ?? "");
-const verified = computed(
-    () =>
-        session.value?.identity?.verifiable_addresses?.some(
-            (address: { verified: boolean }) => address.verified,
-        ) ?? false,
-);
-
-/** A user agent is not a device name; this is only good enough to tell rows apart. */
-function deviceName(agent?: string): string {
-    if (!agent) return "Unknown device";
-    for (const needle of ["iPhone", "iPad", "Android", "Macintosh", "Windows", "Linux"]) {
-        if (agent.includes(needle)) return needle === "Macintosh" ? "Mac" : needle;
-    }
-    return agent.split("/")[0] || "Unknown device";
-}
-
-function toRow(entry: KratosSessionListEntry, current: boolean): ActiveSession {
-    const device = entry.devices?.[0];
-    return {
-        id: entry.id,
-        device: deviceName(device?.user_agent),
-        location: device?.ip_address?.split(":")[0],
-        lastSeen: entry.authenticated_at?.slice(0, 16).replace("T", " ") ?? "",
-        current,
-    };
-}
-
-// This device first: Kratos never includes the current session in the list.
-const rows = computed<ActiveSession[]>(() => [
-    ...(session.value ? [toRow(session.value, true)] : []),
-    ...others.value.map((entry) => toRow(entry, false)),
-]);
-
-async function load() {
-    loading.value = true;
-    session.value = await whoami();
-    others.value = session.value ? await listOtherSessions() : [];
-    loading.value = false;
-}
-onMounted(load);
-
-async function onSignOutOthers() {
-    await signOutOtherSessions();
-    await load();
-}
-
-async function onSignOut() {
-    await logout();
-    router.push("/auth/login");
-}
-</script>
-
-<template>
-    <div
-        class="flex min-h-screen flex-col items-center justify-center gap-4 bg-white p-4 dark:bg-slate-900"
-    >
-        <LoadingSpinner v-if="loading" />
-
-        <AuthErrorScreen
-            v-else-if="!session"
-            kind="generic"
-            detail="You are not signed in."
-            @restart="router.push('/auth/login')"
-            @back="router.push('/')"
-        />
-
-        <template v-else>
-            <AccountSettingsScreen
-                :email="email"
-                :email-verified="verified"
-                :sessions="rows"
-                :can-delete="false"
-                @sign-out-others="onSignOutOthers"
-            />
-            <div class="w-full max-w-md">
-                <LButton
-                    variant="secondary"
-                    size="lg"
-                    class="w-full"
-                    @click="onSignOut"
-                >
-                    Sign out
-                </LButton>
-            </div>
-        </template>
-    </div>
-</template>
diff --git a/app/src/pages/auth/KratosAuthPage.vue b/app/src/pages/auth/KratosAuthPage.vue
deleted file mode 100644
index 7d19e37492..0000000000
--- a/app/src/pages/auth/KratosAuthPage.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import SignInMethodsScreen from "@/components/auth/kratos/SignInMethodsScreen.vue";
-import EmailIdentifierScreen from "@/components/auth/kratos/EmailIdentifierScreen.vue";
-import OneTimeCodeScreen from "@/components/auth/kratos/OneTimeCodeScreen.vue";
-import RegistrationScreen from "@/components/auth/kratos/RegistrationScreen.vue";
-import AuthDoneScreen from "@/components/auth/kratos/AuthDoneScreen.vue";
-import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
-import { browserInitUrl } from "@/auth/kratos/client";
-import { useKratosAuth } from "@/auth/kratos/useKratosAuth";
-import type { FlowType } from "@/auth/kratos/types";
-
-const props = defineProps<{ flowType: FlowType }>();
-
-const route = useRoute();
-const router = useRouter();
-const {
-    step,
-    busy,
-    email,
-    name,
-    code,
-    message,
-    failure,
-    resendIn,
-    providers,
-    start,
-    submitIdentifier,
-    submitCode,
-    resend,
-    changeIdentifier,
-    chooseProvider,
-    restart,
-} = useKratosAuth(props.flowType);
-
-// Where success lands. Kratos only honours `return_to` values its config allows,
-// so an unlisted one is dropped there rather than trusted here.
-const returnTo = computed(() => (route.query.return_to as string) || "/");
-
-// A login flow that also offers social providers opens on the chooser; an
-// email-only configuration skips it, because a one-item menu is not a choice.
-const showMethods = ref(props.flowType === "login");
-
-onMounted(async () => {
-    const flowId = route.query.flow as string | undefined;
-    const loginChallenge = route.query.login_challenge as string | undefined;
-
-    // Hydra sent the user here to authenticate. Hand the challenge to Kratos by
-    // navigating: it either completes the OAuth2 login outright (an existing
-    // session) or bounces back here with a flow id for the screens below.
-    if (loginChallenge && !flowId) {
-        window.location.assign(browserInitUrl(props.flowType, { loginChallenge }));
-        return;
-    }
-
-    await start(flowId, returnTo.value);
-    // Already signed in: show the account rather than an error about a flow
-    // Kratos was right to refuse.
-    if (step.value === "signed-in") {
-        router.replace("/auth/account");
-        return;
-    }
-    if (props.flowType !== "login" || !providers.value.length) showMethods.value = false;
-});
-
-const codeMode = computed(() => (props.flowType === "verification" ? "verification" : "login"));
-const identifierMode = computed(() => (props.flowType === "recovery" ? "recovery" : "login"));
-const flowMessage = computed(() => message.value ?? undefined);
-
-const leave = () => router.push(returnTo.value);
-
-/** Back from the address step returns to the chooser when there is one to return to. */
-function backFromIdentifier() {
-    if (providers.value.length) {
-        showMethods.value = true;
-        return;
-    }
-    leave();
-}
-</script>
-
-<template>
-    <div class="flex min-h-screen items-center justify-center bg-white p-4 dark:bg-slate-900">
-        <LoadingSpinner v-if="step === 'loading'" />
-
-        <SignInMethodsScreen
-            v-else-if="showMethods && step === 'identifier'"
-            :providers="providers"
-            :message="flowMessage"
-            @email="showMethods = false"
-            @provider="chooseProvider"
-            @guest="leave"
-        />
-
-        <RegistrationScreen
-            v-else-if="step === 'identifier' && flowType === 'registration'"
-            v-model:email="email"
-            v-model:name="name"
-            :message="flowMessage"
-            :busy="busy"
-            @submit="submitIdentifier"
-            @sign-in="router.push('/auth/login')"
-            @back="leave"
-        />
-
-        <EmailIdentifierScreen
-            v-else-if="step === 'identifier'"
-            v-model="email"
-            :mode="identifierMode"
-            :message="flowMessage"
-            :busy="busy"
-            @submit="submitIdentifier"
-            @back="backFromIdentifier"
-        >
-            <template
-                v-if="flowType === 'login'"
-                #footer
-            >
-                <button
-                    type="button"
-                    class="w-full text-center text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-800 dark:text-slate-400 dark:hover:text-slate-100"
-                    @click="router.push('/auth/signup')"
-                >
-                    Create an account
-                </button>
-            </template>
-        </EmailIdentifierScreen>
-
-        <OneTimeCodeScreen
-            v-else-if="step === 'code'"
-            v-model="code"
-            :email="email"
-            :mode="codeMode"
-            :message="flowMessage"
-            :busy="busy"
-            :resend-in="resendIn"
-            @submit="submitCode"
-            @resend="resend"
-            @change-email="changeIdentifier"
-            @back="changeIdentifier"
-        />
-
-        <AuthDoneScreen
-            v-else-if="step === 'done'"
-            @continue="leave"
-        />
-
-        <AuthErrorScreen
-            v-else-if="step === 'expired'"
-            kind="expired"
-            @restart="restart"
-            @back="leave"
-        />
-
-        <AuthErrorScreen
-            v-else-if="step === 'offline'"
-            kind="offline"
-            @restart="restart"
-            @back="leave"
-        />
-
-        <AuthErrorScreen
-            v-else
-            kind="generic"
-            :detail="failure"
-            @restart="restart"
-            @back="leave"
-        />
-    </div>
-</template>
diff --git a/app/src/pages/design/AuthArtboard.vue b/app/src/pages/design/AuthArtboard.vue
deleted file mode 100644
index b548b5aa35..0000000000
--- a/app/src/pages/design/AuthArtboard.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-type Props = {
-    title: string;
-    /** The Kratos flow and method this screen submits to, so the design carries its own wiring note. */
-    flow?: string;
-    theme: "light" | "dark";
-};
-defineProps<Props>();
-</script>
-
-<template>
-    <figure class="m-0 flex w-[390px] shrink-0 flex-col gap-2">
-        <figcaption class="flex flex-col gap-0.5 px-1">
-            <span class="text-sm font-semibold text-zinc-900 dark:text-slate-100">{{ title }}</span>
-            <span
-                v-if="flow"
-                class="font-mono text-xs text-zinc-500 dark:text-slate-400"
-                >{{ flow }}</span
-            >
-        </figcaption>
-        <div
-            :class="theme === 'dark' ? 'dark' : ''"
-            class="overflow-hidden rounded-xl border border-zinc-200 shadow-sm dark:border-slate-700"
-        >
-            <div
-                class="flex min-h-[560px] items-center justify-center bg-white p-6 dark:bg-slate-900"
-            >
-                <slot />
-            </div>
-        </div>
-    </figure>
-</template>
diff --git a/app/src/pages/design/AuthDesignPage.spec.ts b/app/src/pages/design/AuthDesignPage.spec.ts
deleted file mode 100644
index 92c8ac6d71..0000000000
--- a/app/src/pages/design/AuthDesignPage.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import AuthDesignPage from "./AuthDesignPage.vue";
-
-vi.mock("vue-i18n", () => ({
-    useI18n: () => ({ t: (key: string) => key, te: () => false }),
-}));
-
-describe("AuthDesignPage", () => {
-    it("renders every artboard in both themes and leaves the app's theme class alone", () => {
-        document.documentElement.classList.add("dark");
-        const wrapper = mount(AuthDesignPage, { attachTo: document.body });
-
-        // 21 screens, drawn light and dark.
-        expect(wrapper.findAll("figure")).toHaveLength(42);
-        expect(document.documentElement.classList.contains("dark")).toBe(false);
-
-        wrapper.unmount();
-        expect(document.documentElement.classList.contains("dark")).toBe(true);
-    });
-});
diff --git a/app/src/pages/design/AuthDesignPage.vue b/app/src/pages/design/AuthDesignPage.vue
deleted file mode 100644
index a87b91d108..0000000000
--- a/app/src/pages/design/AuthDesignPage.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from "vue";
-import AuthArtboard from "./AuthArtboard.vue";
-import SignInMethodsScreen from "@/components/auth/kratos/SignInMethodsScreen.vue";
-import EmailIdentifierScreen from "@/components/auth/kratos/EmailIdentifierScreen.vue";
-import OneTimeCodeScreen from "@/components/auth/kratos/OneTimeCodeScreen.vue";
-import RegistrationScreen from "@/components/auth/kratos/RegistrationScreen.vue";
-import AuthDoneScreen from "@/components/auth/kratos/AuthDoneScreen.vue";
-import GuestWelcomeScreen from "@/components/auth/kratos/GuestWelcomeScreen.vue";
-import GuestGateCard from "@/components/auth/kratos/GuestGateCard.vue";
-import GuestUpgradeScreen from "@/components/auth/kratos/GuestUpgradeScreen.vue";
-import AccountSettingsScreen from "@/components/auth/kratos/AccountSettingsScreen.vue";
-import AuthErrorScreen from "@/components/auth/kratos/AuthErrorScreen.vue";
-import type { AuthProviderOption } from "@/components/auth/kratos/types";
-
-type Theme = "light" | "dark";
-const themeMode = ref<"light" | "dark" | "both">("both");
-const themes = computed<Theme[]>(() =>
-    themeMode.value === "both" ? ["light", "dark"] : [themeMode.value],
-);
-
-// The artboards paint their own theme through a `.dark` wrapper, so the app-wide
-// class has to come off while this page is mounted or every board renders dark.
-let hadDarkClass = false;
-onMounted(() => {
-    hadDarkClass = document.documentElement.classList.contains("dark");
-    document.documentElement.classList.remove("dark");
-});
-onBeforeUnmount(() => {
-    if (hadDarkClass) document.documentElement.classList.add("dark");
-});
-
-const providers: AuthProviderOption[] = [
-    { id: "bcc", label: "Continue with BCC", backgroundColor: "#1e3a5f", textColor: "#ffffff" },
-    { id: "google", label: "Continue with Google" },
-];
-
-const email = ref("");
-const emailInvalid = ref("not-an-email");
-const recoveryEmail = ref("");
-const registerEmail = ref("");
-const registerName = ref("");
-const code = ref("");
-const codeWrong = ref("418293");
-const verifyCode = ref("40");
-
-const sessions = [
-    {
-        id: "1",
-        device: "iPhone 14 · Safari",
-        location: "Cape Town",
-        lastSeen: "Active now",
-        current: true,
-    },
-    { id: "2", device: "MacBook Pro · Chrome", location: "Cape Town", lastSeen: "2 hours ago" },
-    { id: "3", device: "Android · Chrome", location: "Oslo", lastSeen: "12 March" },
-];
-
-const methods = [
-    { id: "email", label: "Email code", linked: true },
-    { id: "bcc", label: "BCC", linked: false },
-];
-
-const sections = [
-    {
-        id: "guest",
-        title: "Guest",
-        note: "No Kratos session at all — the API already serves anonymous callers their default groups.",
-    },
-    {
-        id: "login",
-        title: "Login — email one-time code",
-        note: "self-service/login/browser, method=code",
-    },
-    {
-        id: "register",
-        title: "Registration & verification",
-        note: "self-service/registration/browser + self-service/verification/browser",
-    },
-    {
-        id: "recover",
-        title: "Recovery, account & errors",
-        note: "self-service/recovery/browser, self-service/settings/browser, self-service/errors",
-    },
-];
-</script>
-
-<template>
-    <div class="min-h-screen bg-zinc-100 pb-24">
-        <header
-            class="sticky top-0 z-10 border-b border-zinc-200 bg-white/90 px-6 py-4 backdrop-blur"
-        >
-            <div class="flex flex-wrap items-baseline justify-between gap-4">
-                <div>
-                    <h1 class="text-lg font-semibold text-zinc-900">Guest auth — Ory Kratos</h1>
-                    <p class="text-sm text-zinc-500">
-                        Every screen is a real component from
-                        <code class="font-mono text-xs">src/components/auth/kratos/</code>. Type in
-                        them — they work.
-                    </p>
-                </div>
-                <div class="flex items-center gap-1 rounded-md border border-zinc-300 bg-white p-1">
-                    <button
-                        v-for="option in ['light', 'dark', 'both'] as const"
-                        :key="option"
-                        type="button"
-                        class="rounded px-3 py-1 text-sm font-medium capitalize"
-                        :class="
-                            themeMode === option
-                                ? 'bg-zinc-900 text-white'
-                                : 'text-zinc-600 hover:bg-zinc-100'
-                        "
-                        @click="themeMode = option"
-                    >
-                        {{ option }}
-                    </button>
-                </div>
-            </div>
-            <nav class="mt-3 flex flex-wrap gap-3">
-                <a
-                    v-for="section in sections"
-                    :key="section.id"
-                    :href="`#${section.id}`"
-                    class="text-sm text-zinc-500 underline underline-offset-2 hover:text-zinc-900"
-                >
-                    {{ section.title }}
-                </a>
-            </nav>
-        </header>
-
-        <main class="flex flex-col gap-12 px-6 py-8">
-            <!-- Guest -->
-            <section
-                id="guest"
-                class="flex flex-col gap-4"
-            >
-                <div>
-                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[0].title }}</h2>
-                    <p class="text-sm text-zinc-500">{{ sections[0].note }}</p>
-                </div>
-                <div class="flex flex-wrap gap-6">
-                    <template
-                        v-for="theme in themes"
-                        :key="`welcome-${theme}`"
-                    >
-                        <AuthArtboard
-                            title="First run — sign in or look around"
-                            flow="no flow · app decides"
-                            :theme="theme"
-                        >
-                            <GuestWelcomeScreen app-name="Luminary" />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Guest hits a gated action"
-                            flow="no flow · inline prompt"
-                            :theme="theme"
-                        >
-                            <GuestGateCard />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Guest → account"
-                            flow="registration/browser"
-                            :theme="theme"
-                        >
-                            <GuestUpgradeScreen :bookmark-count="12" />
-                        </AuthArtboard>
-                    </template>
-                </div>
-            </section>
-
-            <!-- Login -->
-            <section
-                id="login"
-                class="flex flex-col gap-4"
-            >
-                <div>
-                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[1].title }}</h2>
-                    <p class="font-mono text-sm text-zinc-500">{{ sections[1].note }}</p>
-                </div>
-                <div class="flex flex-wrap gap-6">
-                    <template
-                        v-for="theme in themes"
-                        :key="`login-${theme}`"
-                    >
-                        <AuthArtboard
-                            title="Choose a method"
-                            flow="login flow · groups: code, oidc"
-                            :theme="theme"
-                        >
-                            <SignInMethodsScreen :providers="providers" />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Choose a method — email only"
-                            flow="login flow · group: code"
-                            :theme="theme"
-                        >
-                            <SignInMethodsScreen />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Identifier step"
-                            flow="POST ui.action · method=code"
-                            :theme="theme"
-                        >
-                            <EmailIdentifierScreen v-model="email" />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Identifier step — invalid address"
-                            flow="ui.nodes[identifier].messages"
-                            :theme="theme"
-                        >
-                            <EmailIdentifierScreen
-                                v-model="emailInvalid"
-                                error="That doesn't look like an email address."
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Code step"
-                            flow="POST ui.action · code + resend"
-                            :theme="theme"
-                        >
-                            <OneTimeCodeScreen
-                                v-model="code"
-                                email="johan@example.com"
-                                :resend-in="42"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Code step — wrong code"
-                            flow="ui.messages 4010008"
-                            :theme="theme"
-                        >
-                            <OneTimeCodeScreen
-                                v-model="codeWrong"
-                                email="johan@example.com"
-                                :resend-in="18"
-                                :message="{
-                                    type: 'error',
-                                    text: `That code isn't right. Check it and try again.`,
-                                }"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Code step — expired"
-                            flow="ui.messages 4060004 · resend enabled"
-                            :theme="theme"
-                        >
-                            <OneTimeCodeScreen
-                                email="johan@example.com"
-                                :message="{
-                                    type: 'error',
-                                    text: 'This code has expired. Ask for a new one.',
-                                }"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Code step — rate limited"
-                            flow="HTTP 429 from Kratos"
-                            :theme="theme"
-                        >
-                            <OneTimeCodeScreen
-                                email="johan@example.com"
-                                :resend-in="60"
-                                :message="{
-                                    type: 'error',
-                                    text: 'Too many tries. Wait a minute, then ask for a new code.',
-                                }"
-                            />
-                        </AuthArtboard>
-                    </template>
-                </div>
-            </section>
-
-            <!-- Registration -->
-            <section
-                id="register"
-                class="flex flex-col gap-4"
-            >
-                <div>
-                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[2].title }}</h2>
-                    <p class="font-mono text-sm text-zinc-500">{{ sections[2].note }}</p>
-                </div>
-                <div class="flex flex-wrap gap-6">
-                    <template
-                        v-for="theme in themes"
-                        :key="`register-${theme}`"
-                    >
-                        <AuthArtboard
-                            title="Create an account"
-                            flow="registration flow · traits + method=code"
-                            :theme="theme"
-                        >
-                            <RegistrationScreen
-                                v-model:email="registerEmail"
-                                v-model:name="registerName"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Create an account — already registered"
-                            flow="ui.messages 4000007"
-                            :theme="theme"
-                        >
-                            <RegistrationScreen
-                                email="johan@example.com"
-                                name="Johan"
-                                :message="{
-                                    type: 'info',
-                                    text: 'That address already has an account — sign in instead.',
-                                }"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Confirm your email"
-                            flow="verification flow · method=code"
-                            :theme="theme"
-                        >
-                            <OneTimeCodeScreen
-                                v-model="verifyCode"
-                                email="johan@example.com"
-                                mode="verification"
-                                :resend-in="30"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Verified"
-                            flow="session issued · redirect to return_to"
-                            :theme="theme"
-                        >
-                            <AuthDoneScreen />
-                        </AuthArtboard>
-                    </template>
-                </div>
-            </section>
-
-            <!-- Recovery, settings, errors -->
-            <section
-                id="recover"
-                class="flex flex-col gap-4"
-            >
-                <div>
-                    <h2 class="text-base font-semibold text-zinc-900">{{ sections[3].title }}</h2>
-                    <p class="font-mono text-sm text-zinc-500">{{ sections[3].note }}</p>
-                </div>
-                <div class="flex flex-wrap gap-6">
-                    <template
-                        v-for="theme in themes"
-                        :key="`recover-${theme}`"
-                    >
-                        <AuthArtboard
-                            title="Recover an account"
-                            flow="recovery flow · method=code"
-                            :theme="theme"
-                        >
-                            <EmailIdentifierScreen
-                                v-model="recoveryEmail"
-                                mode="recovery"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Recovery sent"
-                            flow="ui.messages 1060003 · deliberately vague"
-                            :theme="theme"
-                        >
-                            <EmailIdentifierScreen
-                                mode="recovery"
-                                :message="{
-                                    type: 'success',
-                                    text: 'If that address has an account, a code is on its way.',
-                                }"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Account"
-                            flow="settings flow + GET /sessions"
-                            :theme="theme"
-                        >
-                            <AccountSettingsScreen
-                                email="johan@example.com"
-                                :methods="methods"
-                                :sessions="sessions"
-                            />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Flow expired"
-                            flow="410 Gone · restart the flow"
-                            :theme="theme"
-                        >
-                            <AuthErrorScreen kind="expired" />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Offline"
-                            flow="never reaches Kratos"
-                            :theme="theme"
-                        >
-                            <AuthErrorScreen kind="offline" />
-                        </AuthArtboard>
-                        <AuthArtboard
-                            title="Unhandled error"
-                            flow="self-service/errors?id="
-                            :theme="theme"
-                        >
-                            <AuthErrorScreen
-                                kind="generic"
-                                detail="We couldn't finish signing you in. Trying again usually sorts it out."
-                                error-id="a1f0c7e2"
-                            />
-                        </AuthArtboard>
-                    </template>
-                </div>
-            </section>
-        </main>
-    </div>
-</template>
diff --git a/app/src/router/router.spec.ts b/app/src/router/router.spec.ts
index 3e31ccf9c7..b6f190b338 100644
--- a/app/src/router/router.spec.ts
+++ b/app/src/router/router.spec.ts
@@ -4,24 +4,8 @@ import { flushPromises } from "@vue/test-utils";
 
 describe("Router", () => {
     describe("Router Configuration", () => {
-        it("should have the correct number of shipped routes", () => {
-            // Dev-only routes (the design canvas, the Kratos screens) are marked
-            // devOnly and ship in no build, so they don't count towards this.
-            const shipped = router.getRoutes().filter((route) => !route.meta.devOnly);
-            expect(shipped).toHaveLength(10);
-        });
-
-        it("should mark every development-only route as such", () => {
-            // Whether these are registered depends on the environment; that they
-            // are all flagged devOnly is what keeps them out of the shipped count.
-            const developmentOnly = router
-                .getRoutes()
-                .filter(
-                    (route) => route.path.startsWith("/auth/") || route.path.startsWith("/design/"),
-                );
-            for (const route of developmentOnly) {
-                expect(route.meta.devOnly).toBe(true);
-            }
+        it("should have the correct number of routes", () => {
+            expect(router.getRoutes()).toHaveLength(10);
         });
 
         it("should have home route configured correctly", () => {
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index 7f71fe2f7d..e00f1a2712 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -10,65 +10,6 @@ const SettingsPage = () => import("@/pages/SettingsPage.vue");
 const BookmarksPage = () => import("@/pages/BookmarksPage.vue");
 const SingleContent = () => import("@/pages/SingleContent/SingleContent.vue");
 const NotFoundPage = () => import("@/pages/NotFoundPage.vue");
-const AuthDesignPage = () => import("@/pages/design/AuthDesignPage.vue");
-const KratosAuthPage = () => import("@/pages/auth/KratosAuthPage.vue");
-const KratosAccountPage = () => import("@/pages/auth/KratosAccountPage.vue");
-
-/**
- * Kratos self-service screens. Registered only when VITE_KRATOS_URL is set, so
- * the proof of concept is inert everywhere it hasn't been switched on. The paths
- * must match the `ui_url`s in the Kratos config.
- */
-const kratosRoutes: RouteRecordRaw[] = import.meta.env.VITE_KRATOS_URL
-    ? (
-          [
-              ["/auth/login", "login"],
-              ["/auth/signup", "registration"],
-              ["/auth/verify", "verification"],
-              ["/auth/recovery", "recovery"],
-          ] as const
-      ).map(([path, flowType]) => ({
-          path,
-          component: KratosAuthPage,
-          name: `kratos-${flowType}`,
-          props: { flowType },
-          meta: {
-              analyticsIgnore: true,
-              devOnly: true,
-          },
-      }))
-    : [];
-
-/**
- * The account screen reads the session directly rather than driving a flow, so
- * it is a page of its own rather than another `flowType`.
- */
-if (import.meta.env.VITE_KRATOS_URL) {
-    kratosRoutes.push({
-        path: "/auth/account",
-        component: KratosAccountPage,
-        name: "kratos-account",
-        meta: { analyticsIgnore: true, devOnly: true },
-    });
-}
-
-/**
- * Design canvas for the Kratos auth screens. Development only — it renders every
- * screen and state side by side and ships in no build.
- */
-const designRoutes: RouteRecordRaw[] = import.meta.env.DEV
-    ? [
-          {
-              path: "/design/auth",
-              component: AuthDesignPage,
-              name: "design-auth",
-              meta: {
-                  analyticsIgnore: true,
-                  devOnly: true,
-              },
-          },
-      ]
-    : [];
 
 /**
  * The shared route table for both the normal SPA entry and the web/SSG entry. `meta.prerender: true` marks public, crawlable routes the web build emits as static HTML; dynamic content slugs are enumerated from the API at build time.
@@ -136,8 +77,6 @@ export const routes: RouteRecordRaw[] = [
             title: "title.bookmarks",
         },
     },
-    ...designRoutes,
-    ...kratosRoutes,
     // Note that this route should always come after all defined routes,
     // to prevent wrongly configured slugs from taking over pages
     {
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 0a86ed7b8a..0532699592 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -114,17 +114,6 @@ export default defineConfig({
         watch: {
             ignored: ["dist/**", "dist-web/**", "**/dist/**", "**/dist-web/**"],
         },
-        // Kratos has to answer on the app's own origin or the browser drops its
-        // session and CSRF cookies as cross-site. This proxy is the dev stand-in
-        // for the reverse proxy production needs; Kratos' `serve.public.base_url`
-        // names the same /.ory prefix so the URLs it hands back stay same-origin.
-        proxy: {
-            "/.ory": {
-                target: env.KRATOS_PUBLIC_URL || "http://127.0.0.1:4433",
-                changeOrigin: false,
-                rewrite: (path: string) => path.replace(/^\/\.ory/, ""),
-            },
-        },
     },
     build: {
         target: "es2015",
diff --git a/docs/temp_kratos-guest-auth-ui.md b/docs/temp_kratos-guest-auth-ui.md
deleted file mode 100644
index 87861b4ae6..0000000000
--- a/docs/temp_kratos-guest-auth-ui.md
+++ /dev/null
@@ -1,356 +0,0 @@
-# Guest auth on Ory — UI design
-
-> **Status: built on Hydra.** The recommendation at the end of this doc was
-> taken. Kratos authenticates and **Hydra issues the tokens**, so a guest is an
-> ordinary `AuthProvider` row and neither the app's OIDC client nor the API's
-> JWKS validation has a Kratos special case. Sections below that weigh
-> Kratos-only against Hydra are kept because they are why the decision went that
-> way — not because both options are live. `ory/README.md` is the running
-> instructions.
-
-Working doc for the app-side login screens. The screens themselves are real components in
-`app/src/components/auth/kratos/`; run `npm run dev` in `app/` and open `/design/auth` to
-see all 21 of them, light and dark, side by side.
-
-## What "guest" means
-
-Kratos has no anonymous identity, and it should not be made to grow one. A guest here is
-simply **a visitor with no Kratos session**. The API already handles that case: an
-unauthenticated request resolves through `AuthIdentityService.resolveOrDefault`, which
-returns `status: "anonymous"` with the groups from provider-less `AutoGroupMappings`. Guest
-browsing needs no new server work at all.
-
-What Kratos adds is a way for a guest to _stop_ being one without leaving the app: email
-plus a one-time code, no password to invent, no third-party account required.
-
-Two consequences the design is built around:
-
-- **"Continue without an account" is a dismissal, not a sign-in method.** It is a text link
-  under the card, never a third button in the method list. `screens.spec.ts` pins that.
-- **Signing in moves nothing.** Bookmarks and progress live in this device's IndexedDB. The
-  guest→account screen says what will travel with the account rather than implying a
-  server-side merge that does not exist yet. If per-user bookmark sync lands later, that
-  screen is where the merge is announced — the copy is already shaped for it.
-
-If identified guests are ever a real requirement (device-scoped identity now, claim it from
-another device later), the alternative is a credential-less `guest` identity schema created
-through the Kratos admin API from the Luminary API. It costs an identity row per device,
-gives no way to authenticate _back_ into that identity, and puts every one of those rows
-inside the GDPR deletion story. Not worth it without a concrete need.
-
-## Where the pages live — recommendation
-
-**Put them in the PWA as routes** (`/login`, `/verify`, `/recovery`, `/account`), and point
-Kratos's `selfservice.flows.*.ui_url` at them. Not a standalone self-service UI.
-
-Reasons, in the order they matter here:
-
-1. **Translations.** Every user-facing string in this app comes from synced language docs
-   through `vue-i18n`. A standalone UI cannot reach them, so the most-seen screens in the
-   product would need a second translation pipeline. Screens in the app use the same `t()`
-   as everything else.
-2. **The installed PWA.** Redirecting to another origin drops the user out of the installed
-   shell — on iOS standalone mode, into a separate browser context, which is exactly where
-   session cookies go missing.
-3. **One design system.** `LButton`, dark mode, Inter, the zinc/slate palette all already
-   exist here. Matching them twice is a standing tax.
-
-The cost is that we render `ui.nodes` ourselves. That is bounded: known node groups
-(`code`, `oidc`, `profile`) get the bespoke components in this branch, and anything
-unrecognised falls through to a generic node renderer so a Kratos upgrade that adds a method
-degrades to a plain form instead of a blank screen.
-
-What choosing this requires:
-
-- **Kratos public API must be same-site with the app.** Reverse-proxy it under the app's own
-  origin (`https://app.example.com/.ory/*` → Kratos public). This is Ory's own recommended
-  setup and it makes the session cookie and the CSRF cookie work without any `SameSite`
-  or CORS argument.
-- **Submit the `csrf_token` node.** Every flow's `ui.nodes` carries it; build the POST body
-  from the nodes rather than hand-rolling fields, or the flow 403s.
-- **Handle flow expiry.** Kratos flows expire (30 min by default, code flows sooner). That
-  is the `Flow expired` artboard — it restarts the flow rather than showing a raw error.
-- **Allowlist `return_to`** in the Kratos config, so a guest gated on a page comes back to
-  that page rather than to the home screen.
-
-## Screens ↔ Kratos flows
-
-| Screen (artboard)                      | Flow                                 | Notes                                                                       |
-| -------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
-| First run — sign in or look around     | none                                 | App's own decision, before any flow starts                                  |
-| Guest hits a gated action              | none                                 | Inline prompt, in place; not a modal over the content                       |
-| Guest → account                        | `registration/browser`               | Names what travels with the account                                         |
-| Choose a method                        | `login/browser`                      | `ui.nodes` groups `code` + `oidc`                                           |
-| Choose a method — email only           | `login/browser`                      | Same screen with no `oidc` group configured                                 |
-| Identifier step                        | POST `ui.action`, `method=code`      |                                                                             |
-| Identifier step — invalid address      | —                                    | `ui.nodes[identifier].messages`                                             |
-| Code step                              | POST `ui.action`                     | `code` node + `resend`                                                      |
-| Code step — wrong code                 | —                                    | Kratos message `4010008`                                                    |
-| Code step — expired                    | —                                    | Message `4060004`; resend is enabled                                        |
-| Code step — rate limited               | —                                    | HTTP 429; countdown holds the resend                                        |
-| Create an account                      | `registration/browser`               | `traits.email`, `traits.name`, `method=code`                                |
-| Create an account — already registered | —                                    | Message `4000007`, steered to sign-in                                       |
-| Confirm your email                     | `verification/browser`               | Same code component, different words                                        |
-| Verified                               | —                                    | Session issued, redirect to `return_to`                                     |
-| Recover an account                     | `recovery/browser`                   | `method=code`                                                               |
-| Recovery sent                          | —                                    | Message `1060003` — deliberately vague, does not confirm the address exists |
-| Account                                | `settings/browser` + `GET /sessions` | Sessions are an API read, not a flow                                        |
-| Flow expired                           | —                                    | `410 Gone`                                                                  |
-| Offline                                | —                                    | Never reaches Kratos; says what still works offline                         |
-| Unhandled error                        | `self-service/errors?id=`            | Shows the reference id, not the address                                     |
-
-## Copy and translation
-
-`authCopy.ts` holds the English default for every string, keyed by the i18n key it will use
-once the language docs carry it. `useAuthCopy()` prefers the translation and falls back to
-that default, so the screens read correctly today and translate later without touching a
-component. The table above doubles as the string inventory for whoever adds the keys.
-
-## Open questions
-
-- Does the CMS stay on the current OIDC providers while the app moves to Kratos, or is
-  Kratos meant to serve both? The screens assume app-only; the method list still shows OIDC
-  providers alongside email, so both can coexist.
-- The privacy-policy gate (`useAuthWithPrivacyPolicy`) currently wraps every login start.
-  The designs carry a privacy note in the footer instead — decide whether the modal stays in
-  front of the flow or the note replaces it.
-- Is a guest's bookmark set meant to sync per user once they have an account? The upgrade
-  screen promises "everything saved on this device comes with you", which is true today only
-  because nothing moves. It becomes a real promise the moment bookmarks sync.
-
-## Proof of concept
-
-The screens are wired to a real Kratos. `kratos/README.md` has the run
-instructions; the short version is `docker compose -f kratos/docker-compose.yml up -d`
-plus `VITE_KRATOS_URL="/.ory"` in `app/.env`. Without that variable the `/auth/*`
-routes are not registered at all, so the PoC is inert wherever it hasn't been
-switched on.
-
-What is implemented:
-
-- `app/src/auth/kratos/client.ts` — the flow API over `fetch`, no SDK. Every
-  outcome is a value rather than a throw, because a 400 carrying validation
-  errors is an ordinary step in these flows.
-- `app/src/auth/kratos/nodes.ts` — builds the submitted payload **from the flow's
-  own `ui.nodes`**. That is what keeps `csrf_token`, echoed traits, and any field
-  a Kratos upgrade adds in the body without a code change here.
-- `app/src/auth/kratos/useKratosAuth.ts` — the state machine behind the screens:
-  address step → code step → session, plus resend cooldown, flow expiry and the
-  offline case.
-- `app/src/pages/auth/KratosAuthPage.vue` — picks which designed screen renders
-  for the current step. One component serves login, signup, verification and
-  recovery, because Kratos models them as the same two-step shape.
-
-### What was verified against Kratos v1.3.1, not assumed
-
-- **Sign-up works in one method.** Posting `method: "code"` with traits to the
-  registration flow sends the code directly — the two-step `profile` screen newer
-  Kratos versions show by default is not on the path. Second post with the code
-  returns `200` and an active session, because registration runs the `session` hook.
-- **Login is the same shape** with `identifier` instead of `traits.email`. The
-  flow itself says which field it wants, so `identifierField()` reads it off the
-  nodes rather than hard-coding a table.
-- **Flat dotted keys are accepted as JSON.** `{"traits.email": "…"}` populates the
-  trait — so the payload built straight from node names needs no un-flattening.
-- **The proxy topology holds.** Through `/.ory` the CSRF cookie comes back as
-  `Domain=localhost; SameSite=Lax` and `ui.action` points at the app's own origin.
-
-The recorded flows are checked in as `fixtures.spec-data.json` and the specs
-assert against them, so the tests describe what Kratos actually sends.
-
-## The gap this PoC does not close
-
-**A Kratos session does not authenticate anything to the Luminary API.** Today
-`AuthGuard` and `socketio.ts` validate a JWT against the JWKS of the provider named
-in `x-auth-provider-id`. Kratos issues a cookie session, not a JWT. So a user who
-completes this flow is signed in to Kratos and still anonymous to Luminary — which
-is fine for the PoC (guests are anonymous by design) and blocks nothing that guests
-can already do.
-
-Two ways to close it, when it matters:
-
-1. **Introspect in the API.** A new branch in `AuthIdentityService` that calls
-   Kratos' `/sessions/whoami` with the forwarded cookie, caches the answer briefly,
-   and maps the identity onto groups through `AutoGroupMappings` under a synthetic
-   provider id. No new infrastructure, no new crypto; costs one cacheable hop, and
-   the socket handshake needs the cookie rather than a bearer token.
-2. **Put Ory Oathkeeper in front.** It converts the session into a JWT the existing
-   JWKS path already validates, so the API changes not at all — at the price of
-   another service to run and configure.
-
-For a self-hosted deployment I'd take (1): it keeps the moving parts in a codebase
-we own, and the identity→groups mapping it needs is a thing `AuthIdentityService`
-already does. Either way it is a deliberate second step, not an oversight in this one.
-
-## Using the existing AuthProvider system via Ory Hydra
-
-Kratos alone cannot be an `AuthProvider` doc: it has no `/authorize`, no
-`client_id`, no JWKS and issues no JWT. **Hydra can.** Hydra is Ory's OAuth2 /
-OIDC server, and Kratos becomes the thing that authenticates users for it — so
-from Luminary's side it is an ordinary OIDC provider and the existing model
-applies unchanged.
-
-The shape:
-
-```
-app → Hydra /oauth2/auth → our /auth/login (the Kratos flow, these screens)
-    → Kratos accepts the login request → Hydra → our consent endpoint
-    → Hydra issues a JWT → the API validates it exactly as it does today
-```
-
-### What has to be true for the current API code to accept it
-
-Checked against `api/src/auth/authIdentity.service.ts`, not assumed:
-
-- **JWT access tokens must be switched on.** Hydra issues opaque tokens by
-  default, and an opaque token fails `jwtService.verifyAsync` outright. Set
-  `strategies.access_token: jwt` in Hydra's config file — the
-  `OAUTH2_ACCESS_TOKEN_STRATEGY` environment variable appears only in Hydra's
-  own tests and does not work.
-- **The issuer must match exactly.** The API builds `https://${provider.domain}/`
-  — hard-coded scheme, trailing slash, no path. So Hydra's `urls.self.issuer`
-  has to be `https://<domain>/`. A Hydra mounted at `https://example.com/hydra/`
-  or served over http will fail validation with no way to express it in an
-  `AuthProvider` doc.
-- **JWKS lines up.** The API fetches `https://${provider.domain}/.well-known/jwks.json`,
-  which is exactly where self-hosted Hydra publishes.
-- **The client id check passes.** The API compares `azp ?? client_id` against
-  `provider.clientId`; Hydra's JWT access tokens carry `client_id`.
-- **Audience.** `app/src/auth.ts` already sends `audience` as an authorization
-  parameter, which Hydra supports — the client must be configured to allow that
-  audience.
-
-### Group mappings work, at a different claim path
-
-Custom claims set when accepting consent land under **`ext`** in Hydra's JWT
-access tokens, not at the top level. So an `AutoGroupMappings` condition reads
-`ext.email` rather than `email`. Nothing needs changing for that:
-`extractClaimValue` already walks dotted paths. Hydra's
-`allowed_top_level_claims` can promote specific claims instead, with
-`mirror_top_level_claims` and `preserve_ext_claims` deciding whether they are
-also kept under `ext`.
-
-### What we would still have to build
-
-Kratos handles the login half once `oauth2_provider.url` points at Hydra's admin
-API: it reads the `login_challenge`, validates it, honours Hydra's `skip` flag,
-and on success calls `PUT /admin/oauth2/auth/requests/login/accept` with the
-identity and session ids (the session's AMR flows into the ID token's `amr`).
-
-**Consent is not Kratos' job.** We would own that endpoint. For a first-party app
-it can auto-accept, but it is still ours to write — and it is the natural place
-to inject the claims the group mappings read.
-
-### The trade
-
-Gained: no change to the API's auth model, the CMS can add it as an ordinary
-provider with no code change, and guests get the same group machinery as BCC
-users.
-
-Paid: a second Ory service and its database, a consent endpoint of our own, the
-issuer/JWKS constraints above pinning the deployment topology, and the redirect
-round-trip — the in-app, never-leave-the-page property that motivated this design
-goes away.
-
-The screens are not wasted either way: under Hydra they become the login UI
-Kratos drives.
-
-**Worth doing if guests are meant to be real Luminary users with groups.** If the
-goal is only that a reader keeps their bookmarks across devices, Kratos plus
-session introspection in the API is much less machinery for the same outcome.
-
-## Recommendation
-
-**Take the Hydra path, and drop the idea of teaching `AuthProviderDto` a second
-kind.** The discriminator would have put a second code path through the most
-security-sensitive code in the system — the one whose failure codes already drive
-eviction and silent-refresh logic in both clients (see the cross-package
-contracts in the root `CLAUDE.md`) — and kept it there forever. Hydra makes that
-unnecessary: a guest becomes an ordinary OIDC provider, added from the CMS,
-mapped to groups by the machinery that already exists.
-
-The deciding evidence is that a **"Guest" `AuthProvider` doc already exists** in
-the running system. That says the intended model is _guest = an authenticated
-principal that gets groups_, not _guest = an anonymous reader_. Hydra preserves
-that model exactly; Kratos on its own replaces it with a second, parallel one.
-
-Be clear about what it costs, though: **the never-leave-the-app property goes
-away.** The user does bounce through Hydra's origin. What they do _not_ lose is
-our screens — Hydra's `urls.login` points back at `/auth/login`, so the pages
-they actually look at are the ones in this branch, on our domain, with our
-branding. It ends up the same shape as the existing BCC flow.
-
-### Order to build it
-
-1. **Now** — nothing. The Kratos-only PoC stands as the design proof. It touches
-   no production path, so there is nothing to undo.
-2. **Hydra beside Kratos** in the same compose file. Public client with PKCE,
-   `strategies.access_token: jwt`, issuer on `https://<domain>/` with the
-   trailing slash, `urls.login` → `/auth/login`, `urls.consent` → `/auth/consent`.
-3. **A consent endpoint of our own**, auto-accepting for the first-party client
-   only — never for arbitrary clients.
-4. **A `Guest` provider doc from the CMS**, pointing at Hydra's domain, client id
-   and audience. No change in `api/` or `app/src/auth.ts`. Verify the JWT
-   validates before going further.
-5. **`AutoGroupMappings` for that provider id**, then guests have groups.
-6. **Retire the interim entry** — "Sign in as Guest" becomes an ordinary provider
-   button again, and the bespoke `/auth/*` routes exist only as Hydra's login UI.
-
-### Decide the claim contract before writing any of it
-
-The consent endpoint decides what the token carries, and the group mappings are
-written against it — so getting it wrong is expensive to change once mappings
-exist in production. Suggested: a stable identity id, `email`, and a `tier`
-marker for guests, **promoted with `allowed_top_level_claims`** rather than left
-under `ext`. Mappings then read `email` for every provider instead of `email` for
-one and `ext.email` for another, and the CMS config stays uniform.
-
-### Two things that already line up
-
-- `app/src/auth.ts` requests `openid profile email offline_access`, and
-  `signinSilent()` throws without a refresh token — so Hydra's client must be
-  allowed `offline_access` and issue refresh tokens. The app itself needs no
-  change.
-- The JWKS path and the `azp ?? client_id` check match Hydra's output as-is.
-
-## What the Hydra refactor actually changed
-
-Verified against Hydra v2.2.0 and Kratos v1.3.1 running locally, not against the
-docs alone.
-
-**Removed.** The parallel guest session the Kratos-only PoC needed — its shared
-`kratosSession` ref, the bespoke entry in the provider modal, and the guest
-branches in the profile menu and desktop sidebar. With Hydra the ordinary OIDC
-session is _the_ session, so a second one alongside it would have been a second
-answer to "who is signed in".
-
-**Added.**
-
-- `api/src/oauth/` — Hydra's consent and logout hand-offs. Accepting either needs
-  Hydra's admin API, which a browser must never reach, so `urls.consent` points
-  at the API rather than the web client. It grants only what the request asked
-  for, and only for the one trusted client id; anything else is refused rather
-  than silently approved.
-- `providerBaseUrl()` in `authIdentity.service.ts` — the issuer and JWKS URL were
-  built as `https://${domain}/`, so a provider could never be reached over http.
-  An explicit scheme is now honoured and https still assumed without one, which
-  is the rule `app/src/auth.ts` already applied on the client. Without it no
-  local Hydra can be validated at all.
-- `ory/seed-auth-provider.mjs` — writes the provider doc. Deliberately the same
-  shape the CMS writes; there is no Kratos-specific field to add.
-
-**Two findings that shaped the code.**
-
-- `skip_consent: true` on the client does **not** remove the consent round trip
-  in self-hosted Hydra. It still redirects and still expects an accept. The
-  observed consent request even reported `skip: false`. An endpoint was needed
-  either way.
-- **A browser flow has to be navigated to, not fetched.** Requesting
-  `/self-service/login/browser?login_challenge=…` with `Accept: application/json`
-  returns `200 null` in the case where Kratos can complete the flow itself; the
-  `303` only appears for a real navigation. The PoC fetched it, which worked
-  only because nothing had a live session yet.
-
-**Confirmed end to end**: `iss`, `aud`, `client_id` and `sub` all land where the
-API's validator expects them, `tier` arrives promoted to the top level rather
-than under `ext`, and a refresh token is issued — which `signinSilent()` requires.
diff --git a/ory-kratos-setup-poc/docker-compose.yml.bak b/ory-kratos-setup-poc/docker-compose.yml.bak
deleted file mode 100644
index c59d03a45e..0000000000
--- a/ory-kratos-setup-poc/docker-compose.yml.bak
+++ /dev/null
@@ -1,61 +0,0 @@
-version: "3.8"
-
-services:
-  postgres:
-    image: postgres:16
-    container_name: kratos-postgres
-    restart: unless-stopped
-    environment:
-      POSTGRES_USER: kratos
-      POSTGRES_PASSWORD: kratos
-      POSTGRES_DB: kratos
-    volumes:
-      - kratos-postgres-data:/var/lib/postgresql/data
-    ports:
-      - "5432:5432"
-
-  kratos-migrate:
-    image: oryd/kratos:v1.3.1
-    container_name: kratos-migrate
-    depends_on:
-      - postgres
-    environment:
-      - DSN=postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
-    volumes:
-      - ./kratos-config:/etc/config/kratos
-    command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
-
-  kratos:
-    image: oryd/kratos:v1.3.1
-    container_name: kratos
-    restart: unless-stopped
-    depends_on:
-      - postgres
-      - kratos-migrate
-    environment:
-      - DSN=postgres://kratos:kratos@postgres:5432/kratos?sslmode=disable
-    ports:
-      - "4433:4433" # public API
-      - "4434:4434" # admin API
-    volumes:
-      - ./kratos-config:/etc/config/kratos
-    command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
-
-  kratos-selfservice-ui:
-    image: oryd/kratos-selfservice-ui-node:v1.3.1
-    container_name: kratos-selfservice-ui
-    restart: unless-stopped
-    depends_on:
-      - kratos
-    environment:
-      - PORT=4455
-      - KRATOS_PUBLIC_URL=http://kratos:4433/
-      - KRATOS_BROWSER_URL=http://127.0.0.1:4433/
-      - COOKIE_SECRET=PLEASE-CHANGE-ME-I-AM-INSECURE
-      - CSRF_COOKIE_NAME=ory_csrf_ui
-      - CSRF_COOKIE_SECRET=PLEASE-CHANGE-ME-I-AM-INSECURE
-    ports:
-      - "4455:4455"
-
-volumes:
-  kratos-postgres-data:
\ No newline at end of file
diff --git a/ory/README.md b/ory/README.md
deleted file mode 100644
index 68de1da4f0..0000000000
--- a/ory/README.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Ory — guest auth
-
-Development only. Kratos authenticates, **Hydra issues the tokens**, so from
-Luminary's side a guest is an ordinary OIDC provider: the app's existing
-`oidc-client-ts` redirect and the API's existing JWKS validation both apply with
-no special case for Kratos anywhere.
-
-## Run it
-
-```sh
-docker compose -f ory/docker-compose.yml up -d
-node ory/seed-auth-provider.mjs        # creates the "Sign in as Guest" provider doc
-```
-
-`api/.env` needs `HYDRA_ADMIN_URL` and `HYDRA_TRUSTED_CLIENT_ID` (see
-`api/.env.example`), and `app/.env` needs `VITE_KRATOS_URL="/.ory"` for the
-login screens. **Restart the API** after adding them.
-
-Then sign in from the app's normal login modal — "Sign in as Guest" is a
-provider button like any other. **Codes arrive in Mailpit: http://localhost:8025.**
-
-## What runs
-
-| Service | Port | Role                                                      |
-| ------- | ---- | --------------------------------------------------------- |
-| Kratos  | 4433 | Self-service login/registration. Never issues app tokens. |
-| Kratos  | 4434 | Admin. Not reachable from the browser.                    |
-| Hydra   | 4444 | OAuth2/OIDC. Issues the JWT the Luminary API validates.   |
-| Hydra   | 4445 | Admin. Consent and logout are accepted here, by the API.  |
-| Mailpit | 8025 | Catches the one-time codes.                               |
-
-## The flow
-
-```
-app → Hydra /oauth2/auth
-    → our /auth/login?login_challenge=…   (navigated, not fetched — see below)
-    → Kratos: email, one-time code
-    → Kratos accepts the OAuth2 login request
-    → Hydra → the API's /oauth/consent  (server-side accept)
-    → Hydra issues the code → app exchanges it → JWT
-```
-
-Two things that are easy to get wrong and are why the code looks as it does:
-
-- **A browser flow must be navigated to, not fetched.** Asking
-  `/self-service/login/browser?login_challenge=…` with `Accept: application/json`
-  returns `200 null` when Kratos can complete the flow itself — the case where a
-  live session lets it accept Hydra's request outright. Only a real navigation
-  follows the `303`.
-- **Consent is server work.** Accepting it needs Hydra's admin API, which a
-  browser must never reach, so `urls.consent` points at the API rather than the
-  web client. `skip_consent` on the client does _not_ remove the round trip in
-  self-hosted Hydra — Hydra still asks, the API still has to answer.
-
-## Claims
-
-The API's consent accept injects `tier: "guest"`, and Hydra's
-`allowed_top_level_claims` promotes it out of `ext`, so an `AutoGroupMappings`
-condition reads `tier` rather than `ext.tier` — the same shape as every other
-provider's mappings.
-
-Give guests their groups with a mapping on this provider whose condition is
-**"User is authenticated"**: every guest who signs in through it lands in the
-groups you choose. No per-user claim needed.
-
-## Reset
-
-```sh
-docker compose -f ory/docker-compose.yml down -v
-```
diff --git a/ory/config/hydra.yml b/ory/config/hydra.yml
deleted file mode 100644
index a55c12b13c..0000000000
--- a/ory/config/hydra.yml
+++ /dev/null
@@ -1,66 +0,0 @@
-# Hydra configuration for the guest-auth proof of concept. Development only.
-#
-# Hydra is what makes a guest an ordinary OIDC provider from Luminary's side:
-# the app's existing oidc-client-ts redirect and the API's existing JWKS
-# validation both apply unchanged. Kratos authenticates; Hydra issues the token.
-serve:
-    public:
-        port: 4444
-        cors:
-            enabled: true
-            allowed_origins:
-                - http://localhost:4174
-            allowed_methods: [GET, POST, PUT, DELETE]
-            allowed_headers: [Authorization, Content-Type]
-            allow_credentials: true
-    admin:
-        port: 4445
-
-dsn: sqlite:///var/lib/sqlite/hydra.sqlite?_fk=true&mode=rwc
-
-urls:
-    self:
-        # The API derives both the expected issuer and the JWKS URL from the
-        # AuthProvider doc's `domain`, so this value and that field must agree
-        # exactly, trailing slash included.
-        issuer: http://localhost:4444/
-    # Hydra sends the user here to authenticate; it is our own route, driving
-    # Kratos. The screens the user sees are ours.
-    login: http://localhost:4174/auth/login
-    # Consent and logout are accepted through Hydra's admin API, which a browser
-    # must never reach — so they are handled by the API, not by the web client.
-    consent: http://localhost:3001/oauth/consent
-    logout: http://localhost:3001/oauth/logout
-    error: http://localhost:4174/auth/error
-    post_logout_redirect: http://localhost:4174/
-
-oauth2:
-    # Claims added at consent are nested under `ext` unless they are promoted.
-    # Promoting them keeps AutoGroupMappings conditions identical across
-    # providers — `email`, not `ext.email` for this one and `email` for others.
-    allowed_top_level_claims:
-        - email
-        - name
-        - tier
-    mirror_top_level_claims: false
-    exclude_not_before_claim: false
-
-strategies:
-    # Opaque tokens are the default and would fail the API's JWT verification
-    # outright. The environment variable spelling of this setting does not work.
-    access_token: jwt
-
-ttl:
-    access_token: 1h
-    refresh_token: 720h
-    id_token: 1h
-    auth_code: 10m
-
-secrets:
-    system:
-        - PLEASE-CHANGE-ME-I-AM-A-DEV-ONLY-SECRET
-
-log:
-    level: debug
-    format: text
-    leak_sensitive_values: true
diff --git a/ory/config/identity.schema.json b/ory/config/identity.schema.json
deleted file mode 100644
index 31e26cf156..0000000000
--- a/ory/config/identity.schema.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-    "$id": "https://luminary.bcc.no/schemas/guest.schema.json",
-    "$schema": "http://json-schema.org/draft-07/schema#",
-    "title": "Luminary guest",
-    "type": "object",
-    "properties": {
-        "traits": {
-            "type": "object",
-            "properties": {
-                "email": {
-                    "type": "string",
-                    "format": "email",
-                    "title": "Email address",
-                    "minLength": 3,
-                    "ory.sh/kratos": {
-                        "credentials": {
-                            "code": {
-                                "identifier": true,
-                                "via": "email"
-                            }
-                        },
-                        "verification": {
-                            "via": "email"
-                        },
-                        "recovery": {
-                            "via": "email"
-                        }
-                    }
-                },
-                "name": {
-                    "type": "string",
-                    "title": "Name"
-                }
-            },
-            "required": ["email"],
-            "additionalProperties": false
-        }
-    }
-}
diff --git a/ory/config/kratos.yml b/ory/config/kratos.yml
deleted file mode 100644
index bc44baaba1..0000000000
--- a/ory/config/kratos.yml
+++ /dev/null
@@ -1,121 +0,0 @@
-# Kratos configuration for the guest-auth proof of concept. Development only.
-#
-# `serve.public.base_url` is the app's own origin plus the proxy prefix, not
-# Kratos' own address: every URL Kratos hands the browser (`ui.action`, redirects)
-# has to be same-site with the app or the session and CSRF cookies are dropped.
-# Vite proxies /.ory to this container — the same shape production should use.
-version: v1.3.1
-
-dsn: sqlite:///var/lib/sqlite/db.sqlite?_fk=true
-
-serve:
-    public:
-        base_url: http://localhost:4174/.ory/
-    admin:
-        base_url: http://kratos:4434/
-
-cookies:
-    domain: localhost
-    same_site: Lax
-
-session:
-    lifespan: 720h
-    cookie:
-        domain: localhost
-        same_site: Lax
-
-# Hydra's admin API. With this set, Kratos understands the `login_challenge`
-# Hydra puts on the login URL: it validates the challenge, honours Hydra's skip
-# flag, and on success accepts the OAuth2 login request itself. Consent is not
-# Kratos' job.
-oauth2_provider:
-    url: http://hydra:4445
-
-selfservice:
-    default_browser_return_url: http://localhost:4174/
-    allowed_return_urls:
-        - http://localhost:4174
-        - http://localhost:4444
-
-    methods:
-        # One decision, both flows: `passwordless_enabled` turns the emailed
-        # one-time code into a login method as well as a registration method.
-        code:
-            enabled: true
-            passwordless_enabled: true
-            config:
-                lifespan: 15m
-        password:
-            enabled: false
-        link:
-            enabled: false
-
-    flows:
-        error:
-            ui_url: http://localhost:4174/auth/error
-
-        login:
-            ui_url: http://localhost:4174/auth/login
-            lifespan: 30m
-
-        registration:
-            ui_url: http://localhost:4174/auth/signup
-            lifespan: 30m
-            after:
-                code:
-                    hooks:
-                        # Sign the user in as soon as they register, so the PoC
-                        # ends on a session rather than on "now go and log in".
-                        - hook: session
-
-        verification:
-            enabled: true
-            ui_url: http://localhost:4174/auth/verify
-            use: code
-            after:
-                default_browser_return_url: http://localhost:4174/
-
-        recovery:
-            enabled: true
-            ui_url: http://localhost:4174/auth/recovery
-            use: code
-
-        settings:
-            ui_url: http://localhost:4174/auth/account
-            privileged_session_max_age: 15m
-
-        logout:
-            after:
-                default_browser_return_url: http://localhost:4174/
-
-identity:
-    default_schema_id: guest
-    schemas:
-        - id: guest
-          url: file:///etc/config/kratos/identity.schema.json
-
-courier:
-    smtp:
-        # Mailpit, not a real relay — codes are read from its web UI on :8025.
-        connection_uri: smtp://mailpit:1025/?disable_starttls=true
-        from_address: no-reply@luminary.local
-        from_name: Luminary
-
-log:
-    level: debug
-    format: text
-    leak_sensitive_values: true
-
-secrets:
-    cookie:
-        - PLEASE-CHANGE-ME-I-AM-A-DEV-ONLY-SECRET
-    cipher:
-        - 32-LONG-SECRET-NOT-SECURE-AT-ALL
-
-ciphers:
-    algorithm: xchacha20-poly1305
-
-hashers:
-    algorithm: bcrypt
-    bcrypt:
-        cost: 8
diff --git a/ory/docker-compose.yml b/ory/docker-compose.yml
deleted file mode 100644
index c1a2023559..0000000000
--- a/ory/docker-compose.yml
+++ /dev/null
@@ -1,98 +0,0 @@
-# Local Ory stack for the guest-auth proof of concept. Nothing here is deployed.
-#   docker compose -f ory/docker-compose.yml up -d
-#
-# Kratos authenticates (public :4433, admin :4434), Hydra issues the OAuth2/OIDC
-# tokens (public :4444, admin :4445), Mailpit catches the one-time codes
-# (http://localhost:8025). Hydra's admin API is never reachable from the browser.
-services:
-    kratos-migrate:
-        image: oryd/kratos:v1.3.1
-        volumes:
-            - kratos-sqlite:/var/lib/sqlite
-            - ./config:/etc/config/kratos
-        command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
-        restart: on-failure
-
-    kratos:
-        image: oryd/kratos:v1.3.1
-        depends_on:
-            kratos-migrate:
-                condition: service_completed_successfully
-        ports:
-            - "4433:4433"
-            - "4434:4434"
-        volumes:
-            - kratos-sqlite:/var/lib/sqlite
-            - ./config:/etc/config/kratos
-        command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
-        restart: unless-stopped
-
-    hydra-migrate:
-        image: oryd/hydra:v2.2.0
-        volumes:
-            - hydra-sqlite:/var/lib/sqlite
-            - ./config:/etc/config/hydra
-        command: migrate sql -e --yes --config /etc/config/hydra/hydra.yml
-        restart: on-failure
-
-    hydra:
-        image: oryd/hydra:v2.2.0
-        depends_on:
-            hydra-migrate:
-                condition: service_completed_successfully
-        ports:
-            - "4444:4444"
-            - "4445:4445"
-        volumes:
-            - hydra-sqlite:/var/lib/sqlite
-            - ./config:/etc/config/hydra
-        command: serve all --dev --config /etc/config/hydra/hydra.yml
-        restart: unless-stopped
-
-    # Registers the app as a public client once Hydra is up. The admin API
-    # rather than the CLI, because `hydra create oauth2-client` generates the
-    # client id and the AuthProvider doc has to name a known one.
-    #
-    # `skip_consent` marks it first-party: there is nothing for a user to
-    # consent to when the client and the identity provider are the same product.
-    hydra-client:
-        image: curlimages/curl:latest
-        depends_on:
-            hydra:
-                condition: service_started
-        entrypoint: ["/bin/sh", "-c"]
-        command:
-            - |
-              until curl -sf http://hydra:4445/health/ready >/dev/null; do sleep 1; done
-              if curl -sf http://hydra:4445/admin/clients/luminary-app >/dev/null 2>&1; then
-                echo "client luminary-app already registered"; exit 0
-              fi
-              curl -sS -X POST http://hydra:4445/admin/clients \
-                -H 'Content-Type: application/json' \
-                -d '{
-                  "client_id": "luminary-app",
-                  "client_name": "Luminary app",
-                  "grant_types": ["authorization_code", "refresh_token"],
-                  "response_types": ["code"],
-                  "scope": "openid offline_access profile email",
-                  "audience": ["luminary-api"],
-                  "redirect_uris": ["http://localhost:4174"],
-                  "post_logout_redirect_uris": ["http://localhost:4174"],
-                  "token_endpoint_auth_method": "none",
-                  "skip_consent": true,
-                  "skip_logout_consent": true
-                }' && echo "" && echo "registered client luminary-app"
-        restart: on-failure
-
-    mailpit:
-        image: axllent/mailpit:latest
-        ports:
-            - "8025:8025"
-        restart: unless-stopped
-
-volumes:
-    # Kratos (uid 10000) and Hydra (uid 100) run as different users, so one
-    # shared volume leaves whichever writes first owning it and the other
-    # unable to open its database.
-    kratos-sqlite:
-    hydra-sqlite:
diff --git a/ory/seed-auth-provider.mjs b/ory/seed-auth-provider.mjs
deleted file mode 100644
index 39d3b749be..0000000000
--- a/ory/seed-auth-provider.mjs
+++ /dev/null
@@ -1,78 +0,0 @@
-#!/usr/bin/env node
-// Creates (or updates) the AuthProvider doc that points Luminary at Hydra.
-//
-// A Hydra-backed guest is an ordinary OIDC provider, so this writes exactly the
-// same shape the CMS writes — there is no Kratos-specific field. Run it once:
-//   node ory/seed-auth-provider.mjs
-// Reads DB_CONNECTION_STRING and DB_DATABASE from api/.env.
-
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, join } from "node:path";
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-function env() {
-    const raw = readFileSync(join(here, "..", "api", ".env"), "utf8");
-    const values = {};
-    for (const line of raw.split("\n")) {
-        const match = /^\s*([A-Z0-9_]+)\s*=\s*(.*)$/.exec(line);
-        if (match) values[match[1]] = match[2].trim().replace(/^["']|["']$/g, "");
-    }
-    return values;
-}
-
-const { DB_CONNECTION_STRING, DB_DATABASE } = env();
-if (!DB_CONNECTION_STRING || !DB_DATABASE) {
-    console.error("DB_CONNECTION_STRING and DB_DATABASE must be set in api/.env");
-    process.exit(1);
-}
-
-// fetch() refuses a URL carrying credentials, and CouchDB connection strings
-// conventionally carry them — so they move to an Authorization header.
-const connection = new URL(DB_CONNECTION_STRING);
-const auth =
-    connection.username || connection.password
-        ? "Basic " +
-          Buffer.from(
-              `${decodeURIComponent(connection.username)}:${decodeURIComponent(connection.password)}`,
-          ).toString("base64")
-        : undefined;
-connection.username = "";
-connection.password = "";
-
-const base = `${connection.toString().replace(/\/+$/, "")}/${DB_DATABASE}`;
-const headers = { "Content-Type": "application/json", ...(auth ? { Authorization: auth } : {}) };
-const id = "auth-provider-guest-hydra";
-
-// `domain` carries its scheme because Hydra runs over http locally. The API
-// honours an explicit scheme and assumes https without one, so a production
-// entry is the bare hostname exactly as every other provider's is.
-const doc = {
-    _id: id,
-    type: "authProvider",
-    memberOf: [],
-    updatedTimeUtc: Date.now(),
-    domain: "http://localhost:4444",
-    clientId: "luminary-app",
-    audience: "luminary-api",
-    label: "Sign in as Guest",
-    displayName: "Guest (Ory)",
-    sortIndex: 0,
-};
-
-const existing = await fetch(`${base}/${id}`, { headers });
-if (existing.ok) doc._rev = (await existing.json())._rev;
-
-const response = await fetch(`${base}/${id}`, {
-    method: "PUT",
-    headers,
-    body: JSON.stringify(doc),
-});
-
-if (!response.ok) {
-    console.error(`CouchDB refused the write (${response.status}):`, await response.text());
-    process.exit(1);
-}
-console.log(existing.ok ? "updated" : "created", id, "->", doc.domain);
-console.log("The provider appears in the app's login modal as:", doc.label);

From cd6b3333efd5c15425709976f484d0e35d1b245e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 25 Aug 2026 14:40:52 +0000
Subject: [PATCH 14/15] Add a Zitadel PoC alongside the Ory one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A second standalone Compose stack aimed at the same target as
ory-kratos-setup-poc: an OIDC provider the API accepts as an ordinary
AuthProvider doc, with no change to api/ or app/.

Zitadel bundles the OIDC provider, user management, login UI and admin
console in one service, so the stack is three long-running containers
instead of seven and needs none of the login/consent or admin code the
Ory stack requires.

verify-contract.mjs re-implements the checks authIdentity.service.ts
performs and reports each against the running stack, so the comparison
rests on observed behaviour rather than on documentation. Two constraints
are predicted to fail — the JWKS path, worked around in the Caddyfile,
and the issuer's trailing slash, which the README writes up without
changing the API.

The stack has not been run against a Docker daemon yet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GkEPfBPbGbJUmYDLkunTWD
---
 zitadel-setup-poc/.env.example                |   2 +
 zitadel-setup-poc/.gitignore                  |   3 +
 zitadel-setup-poc/Caddyfile                   |  17 +++
 zitadel-setup-poc/README.md                   | 125 +++++++++++++++++
 zitadel-setup-poc/docker-compose.yml          |  56 ++++++++
 zitadel-setup-poc/secrets/.gitkeep            |   0
 zitadel-setup-poc/seed.mjs                    |  61 +++++++++
 zitadel-setup-poc/verify-contract.mjs         | 129 ++++++++++++++++++
 zitadel-setup-poc/zitadel-config/steps.yaml   |  20 +++
 zitadel-setup-poc/zitadel-config/zitadel.yaml |  27 ++++
 10 files changed, 440 insertions(+)
 create mode 100644 zitadel-setup-poc/.env.example
 create mode 100644 zitadel-setup-poc/.gitignore
 create mode 100644 zitadel-setup-poc/Caddyfile
 create mode 100644 zitadel-setup-poc/README.md
 create mode 100644 zitadel-setup-poc/docker-compose.yml
 create mode 100644 zitadel-setup-poc/secrets/.gitkeep
 create mode 100644 zitadel-setup-poc/seed.mjs
 create mode 100644 zitadel-setup-poc/verify-contract.mjs
 create mode 100644 zitadel-setup-poc/zitadel-config/steps.yaml
 create mode 100644 zitadel-setup-poc/zitadel-config/zitadel.yaml

diff --git a/zitadel-setup-poc/.env.example b/zitadel-setup-poc/.env.example
new file mode 100644
index 0000000000..53479de850
--- /dev/null
+++ b/zitadel-setup-poc/.env.example
@@ -0,0 +1,2 @@
+# Must be exactly 32 characters — Zitadel refuses to start otherwise.
+ZITADEL_MASTERKEY=MasterkeyNeedsToHave32Characters
diff --git a/zitadel-setup-poc/.gitignore b/zitadel-setup-poc/.gitignore
new file mode 100644
index 0000000000..27d75acb46
--- /dev/null
+++ b/zitadel-setup-poc/.gitignore
@@ -0,0 +1,3 @@
+secrets/*
+!secrets/.gitkeep
+.env
diff --git a/zitadel-setup-poc/Caddyfile b/zitadel-setup-poc/Caddyfile
new file mode 100644
index 0000000000..91bb3b2899
--- /dev/null
+++ b/zitadel-setup-poc/Caddyfile
@@ -0,0 +1,17 @@
+auth.luminary.local {
+	tls internal
+
+	# The API fetches JWKS from a fixed `/.well-known/jwks.json` (see
+	# authIdentity.service.ts) while Zitadel publishes keys at /oauth/v2/keys.
+	# Mapping the paths here keeps the API's validator untouched.
+	handle /.well-known/jwks.json {
+		rewrite * /oauth/v2/keys
+		reverse_proxy h2c://zitadel:8080
+	}
+
+	# Zitadel serves gRPC alongside REST on one port, so the console needs h2c
+	# rather than a plain HTTP/1.1 upstream.
+	handle {
+		reverse_proxy h2c://zitadel:8080
+	}
+}
diff --git a/zitadel-setup-poc/README.md b/zitadel-setup-poc/README.md
new file mode 100644
index 0000000000..4add5e2e0a
--- /dev/null
+++ b/zitadel-setup-poc/README.md
@@ -0,0 +1,125 @@
+# Zitadel PoC
+
+A second proof of concept for replacing Auth0 as the identity provider for public
+users, to be compared against `../ory-kratos-setup-poc`. Both aim at the same
+target: an OIDC provider that the API accepts as an ordinary `AuthProvider` doc,
+with no change to `api/` or `app/`.
+
+Nothing here is wired into the monorepo — it is a standalone Compose stack, same
+as the Kratos PoC.
+
+## Status
+
+**Not yet run.** The stack and scripts are written but have not been started
+against a Docker daemon, unlike the Kratos PoC which is known to work. Treat the
+two "expected to fail" rows below as predictions that `verify-contract.mjs` will
+confirm or refute — that is what the script is for.
+
+## Why a second PoC
+
+The Kratos + Hydra stack is architecturally right: it makes the identity provider
+conform to the contract the repo already has, rather than making the app conform
+to the provider. This PoC keeps that property and asks a narrower question — how
+much of the stack is essential?
+
+Ory ships no login UI and no admin console by design, so both are yours to write.
+Zitadel is a single service that includes an OIDC provider, user management, a
+login UI and an admin console.
+
+|  | Kratos + Hydra | Zitadel |
+| --- | --- | --- |
+| Long-running services | 7 | 3 |
+| One-shot migration jobs | 2 | 0 (self-migrating) |
+| Databases | 2 schemas | 1 |
+| Bespoke runtime code you maintain | 708 lines (login/consent + admin) | 0 |
+| Login UI | you write it | shipped |
+| Admin console | you write it | shipped |
+| Language / runtime | Go | Go |
+
+The 708 lines are `login-consent/server.js`, `login-consent/views.js` and
+`admin/server.js` in the Kratos PoC — security-critical request paths (redirect
+handling, consent grants, identity deletion) that would need CSRF, authentication
+and an audit trail before shipping. Here the equivalent surface is `seed.mjs`, a
+61-line one-shot setup script that never serves a request.
+
+## The contract being tested
+
+`api/src/auth/authIdentity.service.ts` imposes five constraints on any provider.
+Hydra satisfies all five. For Zitadel, two are expected to need work:
+
+| Constraint | Hydra | Zitadel |
+| --- | --- | --- |
+| JWT access tokens, not opaque | `strategies.access_token: jwt` | app `accessTokenType: OIDC_TOKEN_TYPE_JWT` (set by `seed.mjs`) |
+| `RS256` | yes | yes |
+| `azp`/`client_id` matches `provider.clientId` | yes | yes |
+| JWKS at `/.well-known/jwks.json` | published there natively | **published at `/oauth/v2/keys`** — the Caddyfile rewrites the path |
+| `iss` exactly `https://<domain>/` | issuer configured with the trailing slash | **expected to be `https://<domain>` with no trailing slash** |
+
+The trailing slash is an Auth0-ism baked into the API:
+
+```ts
+issuer: `https://${provider.domain}/`,
+```
+
+Auth0 uses a trailing slash; most standards-compliant issuers do not. If the
+prediction holds, the fix is one of:
+
+1. Compare the issuer with the trailing slash optional in
+   `authIdentity.service.ts` — smallest change, unblocks Zitadel and others.
+2. Add an optional explicit `issuer` field to `AuthProviderDto`, so the issuer
+   stops being derived from `domain`. Larger, but also the only option that fits
+   providers whose issuer carries a path (Keycloak's is
+   `https://host/realms/<realm>`) and would want a JWKS path of their own.
+
+Neither is done here — this PoC deliberately changes nothing in `api/`.
+
+## Running it
+
+`auth.luminary.local` must resolve locally, matching the Kratos PoC:
+
+```sh
+echo "127.0.0.1 auth.luminary.local" | sudo tee -a /etc/hosts
+```
+
+Then:
+
+```sh
+cp .env.example .env          # masterkey must be exactly 32 characters
+docker compose up -d
+```
+
+First-instance setup writes a machine-user token to `secrets/seed-pat.txt`, which
+the seed script uses:
+
+```sh
+node seed.mjs
+```
+
+It prints the `domain`, `clientId` and `audience` for an `AuthProvider` doc, plus
+the `urn:zitadel:iam:org:project:id:<projectId>:aud` scope the app must request
+for the project to appear in the token's `aud` claim.
+
+- Console: `https://auth.luminary.local/ui/console` (`admin` / `Password1!`)
+- Discovery: `https://auth.luminary.local/.well-known/openid-configuration`
+
+## Verifying
+
+```sh
+node verify-contract.mjs                      # discovery + JWKS constraints
+node verify-contract.mjs --client-id=... --audience=... --token=<jwt>   # all of them
+```
+
+It re-implements the checks `authIdentity.service.ts` performs and reports each
+as PASS/FAIL with the remediation, exiting non-zero on any failure. Get a token
+from the app's network tab after a sign-in, or from an authorization-code flow
+against the seeded client.
+
+## Not covered
+
+The same gaps flagged for the Kratos PoC apply and are not addressed here either:
+no SMTP courier, so verification and recovery mail will not send; no rate limiting
+on public registration; and no guest-vs-registered identity distinction — that
+product decision matters more than the choice of provider.
+
+Secrets in this directory are placeholders. Postgres credentials, the Zitadel
+masterkey and the admin password are all committed and must not be reused.
diff --git a/zitadel-setup-poc/docker-compose.yml b/zitadel-setup-poc/docker-compose.yml
new file mode 100644
index 0000000000..fd79b6e88f
--- /dev/null
+++ b/zitadel-setup-poc/docker-compose.yml
@@ -0,0 +1,56 @@
+services:
+  postgres:
+    image: postgres:17-alpine
+    container_name: zitadel-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: zitadel
+    volumes:
+      - zitadel-postgres-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d zitadel"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+  zitadel:
+    image: ghcr.io/zitadel/zitadel:v4.17.1
+    container_name: zitadel
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+    # Caddy terminates TLS, so Zitadel serves plaintext behind it while still
+    # advertising https URLs via ExternalSecure.
+    command: >
+      start-from-init
+      --config /etc/zitadel/zitadel.yaml
+      --steps /etc/zitadel/steps.yaml
+      --masterkey ${ZITADEL_MASTERKEY:?set ZITADEL_MASTERKEY to exactly 32 characters}
+      --tlsMode external
+    volumes:
+      - ./zitadel-config:/etc/zitadel:ro
+      - ./secrets:/secrets
+    ports:
+      - "8080:8080"
+
+  caddy:
+    image: caddy:2
+    container_name: zitadel-caddy
+    restart: unless-stopped
+    depends_on:
+      - zitadel
+    ports:
+      - "443:443"
+      - "80:80"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy-data:/data
+      - caddy-config:/config
+
+volumes:
+  zitadel-postgres-data:
+  caddy-data:
+  caddy-config:
diff --git a/zitadel-setup-poc/secrets/.gitkeep b/zitadel-setup-poc/secrets/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/zitadel-setup-poc/seed.mjs b/zitadel-setup-poc/seed.mjs
new file mode 100644
index 0000000000..71568a29fe
--- /dev/null
+++ b/zitadel-setup-poc/seed.mjs
@@ -0,0 +1,61 @@
+// Creates the project and OIDC app the Luminary app would use, then prints the
+// AuthProvider field values to enter in the CMS. Run after the stack is up.
+import { readFileSync } from "node:fs";
+
+const DOMAIN = process.env.ZITADEL_DOMAIN || "auth.luminary.local";
+const BASE = `https://${DOMAIN}`;
+const PAT_PATH = process.env.PAT_PATH || "./secrets/seed-pat.txt";
+const APP_ORIGIN = process.env.APP_ORIGIN || "http://localhost:4174";
+
+let pat;
+try {
+    pat = readFileSync(PAT_PATH, "utf8").trim();
+} catch {
+    console.error(`No PAT at ${PAT_PATH}. Start the stack first — first-instance setup writes it.`);
+    process.exit(1);
+}
+
+async function api(path, body) {
+    const res = await fetch(`${BASE}${path}`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${pat}`, "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+    });
+    const json = await res.json().catch(() => null);
+    if (!res.ok) throw new Error(`${path} -> ${res.status}: ${JSON.stringify(json)}`);
+    return json;
+}
+
+const project = await api("/management/v1/projects", { name: "Luminary" });
+const projectId = project.id;
+
+const app = await api(`/management/v1/projects/${projectId}/apps/oidc`, {
+    name: "Luminary app",
+    redirectUris: [`${APP_ORIGIN}/callback`, `${APP_ORIGIN}/`],
+    postLogoutRedirectUris: [`${APP_ORIGIN}/`],
+    responseTypes: ["OIDC_RESPONSE_TYPE_CODE"],
+    grantTypes: ["OIDC_GRANT_TYPE_AUTHORIZATION_CODE", "OIDC_GRANT_TYPE_REFRESH_TOKEN"],
+    // A browser SPA holds no secret, so PKCE with no client auth — this is what
+    // oidc-client-ts in app/src/auth.ts already does.
+    appType: "OIDC_APP_TYPE_USER_AGENT",
+    authMethodType: "OIDC_AUTH_METHOD_TYPE_NONE",
+    // The API runs jwtService.verifyAsync, which an opaque token fails outright.
+    accessTokenType: "OIDC_TOKEN_TYPE_JWT",
+    accessTokenRoleAssertion: true,
+    devMode: true,
+});
+
+const audienceScope = `urn:zitadel:iam:org:project:id:${projectId}:aud`;
+
+console.log(`
+Project ..... ${projectId}
+Client ID ... ${app.clientId}
+
+AuthProvider doc (CMS → Auth providers):
+  domain    ${DOMAIN}
+  clientId  ${app.clientId}
+  audience  ${app.clientId}
+
+The app must request this scope so the project lands in the token's aud claim:
+  ${audienceScope}
+`);
diff --git a/zitadel-setup-poc/verify-contract.mjs b/zitadel-setup-poc/verify-contract.mjs
new file mode 100644
index 0000000000..82ef4889ae
--- /dev/null
+++ b/zitadel-setup-poc/verify-contract.mjs
@@ -0,0 +1,129 @@
+// Checks a running Zitadel against the exact constraints
+// api/src/auth/authIdentity.service.ts imposes on an AuthProvider, so the
+// answer comes from the running stack rather than from reading docs.
+//
+//   node verify-contract.mjs [--domain=...] [--client-id=...] [--audience=...] [--token=<jwt>]
+//
+// Without --token the token-shaped checks are skipped; grab one from the app's
+// network tab or an authorization-code flow to run them.
+
+const arg = (name, fallback) => {
+    const hit = process.argv.find((a) => a.startsWith(`--${name}=`));
+    return hit ? hit.slice(name.length + 3) : fallback;
+};
+
+const domain = arg("domain", "auth.luminary.local");
+const clientId = arg("client-id", null);
+const audience = arg("audience", clientId);
+const token = arg("token", null);
+
+const results = [];
+const record = (id, ok, detail, fix) => results.push({ id, ok, detail, fix });
+const skip = (id, detail) => results.push({ id, ok: null, detail });
+
+const b64url = (s) => Buffer.from(s.replace(/-/g, "+").replace(/_/g, "/"), "base64").toString("utf8");
+
+async function getJson(url) {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`${res.status}`);
+    return res.json();
+}
+
+// 1 — discovery reachable, and the issuer it advertises
+let discovery = null;
+try {
+    discovery = await getJson(`https://${domain}/.well-known/openid-configuration`);
+    record("discovery", true, `reachable, issuer=${discovery.issuer}`);
+} catch (e) {
+    record("discovery", false, `unreachable (${e.message})`, "Is the stack up and does /etc/hosts point auth.luminary.local at 127.0.0.1?");
+}
+
+// 2 — the API builds `https://${provider.domain}/` and jsonwebtoken compares it
+//     to the iss claim as an exact string.
+if (discovery) {
+    const expected = `https://${domain}/`;
+    const ok = discovery.issuer === expected;
+    record(
+        "issuer",
+        ok,
+        `advertised "${discovery.issuer}" vs required "${expected}"`,
+        ok ? undefined : "Trailing-slash mismatch. The API hardcodes it for Auth0. Either accept both forms in authIdentity.service.ts or add an explicit issuer field to AuthProviderDto.",
+    );
+}
+
+// 3 — the API fetches this fixed path; the Caddyfile maps it onto /oauth/v2/keys
+let jwks = null;
+try {
+    jwks = await getJson(`https://${domain}/.well-known/jwks.json`);
+    const n = jwks.keys?.length ?? 0;
+    record("jwks", n > 0, `${n} key(s) at /.well-known/jwks.json`, n > 0 ? undefined : "Endpoint answered but published no keys.");
+} catch (e) {
+    record("jwks", false, `not served (${e.message})`, "Zitadel publishes at /oauth/v2/keys; the Caddyfile rewrite should expose it here.");
+}
+if (discovery?.jwks_uri) {
+    record("jwks-native", true, `Zitadel's own jwks_uri is ${discovery.jwks_uri}`);
+}
+
+// 4/5 — everything that can only be seen on a real token
+if (!token) {
+    skip("token-format", "no --token supplied");
+    skip("alg", "no --token supplied");
+    skip("aud", "no --token supplied");
+    skip("azp", "no --token supplied");
+} else {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+        record("token-format", false, "not a JWT (opaque token)", "Set the app's accessTokenType to OIDC_TOKEN_TYPE_JWT — an opaque token fails jwtService.verifyAsync outright.");
+    } else {
+        record("token-format", true, "three-segment JWT");
+        const header = JSON.parse(b64url(parts[0]));
+        const payload = JSON.parse(b64url(parts[1]));
+
+        // The API compares the iss claim itself, so the token is the real test —
+        // the discovery document only predicts what it will contain.
+        const expectedIss = `https://${domain}/`;
+        const issOk = payload.iss === expectedIss;
+        record(
+            "iss-claim",
+            issOk,
+            `iss="${payload.iss}" vs required "${expectedIss}"`,
+            issOk ? undefined : "jsonwebtoken compares iss exactly; see the issuer check above for the fix.",
+        );
+
+        const algOk = header.alg === "RS256";
+        record("alg", algOk, `alg=${header.alg}`, algOk ? undefined : "The API allows only RS256.");
+
+        if (jwks?.keys) {
+            const known = jwks.keys.some((k) => k.kid === header.kid);
+            record("kid", known, `kid=${header.kid} ${known ? "found" : "absent"} in JWKS`, known ? undefined : "Token was signed by a key the JWKS endpoint does not publish.");
+        }
+
+        const auds = Array.isArray(payload.aud) ? payload.aud : [payload.aud].filter(Boolean);
+        const audOk = audience ? auds.includes(audience) : null;
+        if (audience) {
+            record("aud", audOk, `aud=[${auds.join(", ")}] expecting "${audience}"`, audOk ? undefined : "Request the urn:zitadel:iam:org:project:id:<projectId>:aud scope so the project lands in aud.");
+        } else {
+            skip("aud", "no --audience supplied");
+        }
+
+        const tokenClient = payload.azp ?? payload.client_id;
+        if (clientId) {
+            // The API only enforces this when the claim is present.
+            const azpOk = !tokenClient || tokenClient === clientId;
+            record("azp", azpOk, `azp/client_id=${tokenClient ?? "(absent)"} expecting "${clientId}"`, azpOk ? undefined : "Token was issued to a different client than the AuthProvider doc names.");
+        } else {
+            skip("azp", "no --client-id supplied");
+        }
+    }
+}
+
+const mark = (ok) => (ok === null ? "SKIP" : ok ? "PASS" : "FAIL");
+console.log("\nContract checks against api/src/auth/authIdentity.service.ts\n");
+for (const r of results) {
+    console.log(`  ${mark(r.ok).padEnd(5)} ${r.id.padEnd(14)} ${r.detail}`);
+    if (r.fix) console.log(`        ↳ ${r.fix}`);
+}
+const failed = results.filter((r) => r.ok === false).length;
+const skipped = results.filter((r) => r.ok === null).length;
+console.log(`\n${results.filter((r) => r.ok).length} passed, ${failed} failed, ${skipped} skipped\n`);
+process.exit(failed > 0 ? 1 : 0);
diff --git a/zitadel-setup-poc/zitadel-config/steps.yaml b/zitadel-setup-poc/zitadel-config/steps.yaml
new file mode 100644
index 0000000000..e1bdbab976
--- /dev/null
+++ b/zitadel-setup-poc/zitadel-config/steps.yaml
@@ -0,0 +1,20 @@
+FirstInstance:
+  InstanceName: luminary-poc
+  # The seed script authenticates with this token, so first-instance setup is
+  # the only step that needs a human.
+  PatPath: /secrets/seed-pat.txt
+  Org:
+    Name: Luminary
+    Human:
+      UserName: admin
+      Password: Password1!
+      PasswordChangeRequired: false
+      Email:
+        Address: admin@luminary.local
+        Verified: true
+    Machine:
+      Machine:
+        Username: seed-bot
+        Name: Seed bot
+      Pat:
+        ExpirationDate: 2100-01-01T00:00:00Z
diff --git a/zitadel-setup-poc/zitadel-config/zitadel.yaml b/zitadel-setup-poc/zitadel-config/zitadel.yaml
new file mode 100644
index 0000000000..25a9f6a09f
--- /dev/null
+++ b/zitadel-setup-poc/zitadel-config/zitadel.yaml
@@ -0,0 +1,27 @@
+Log:
+  Level: info
+
+# The issuer Zitadel advertises is derived from these three values, so they
+# have to match the host the app and API actually reach it on.
+ExternalDomain: auth.luminary.local
+ExternalPort: 443
+ExternalSecure: true
+
+TLS:
+  Enabled: false
+
+Database:
+  postgres:
+    Host: postgres
+    Port: 5432
+    Database: zitadel
+    MaxOpenConns: 20
+    MaxIdleConns: 10
+    User:
+      Username: zitadel
+      Password: zitadel
+      SSLMode: disable
+    Admin:
+      Username: postgres
+      Password: postgres
+      SSLMode: disable

From cacc724623637f795ae2472a6f7a9440c9b20c3a Mon Sep 17 00:00:00 2001
From: Dirk <dirkdevbusiness@gmail.com>
Date: Wed, 26 Aug 2026 08:56:38 +0200
Subject: [PATCH 15/15] Enhance Zitadel PoC: Update audience validation, add
 login service, and improve branding

---
 cms/src/components/authProvider/FormModal.vue | 13 +--
 zitadel-setup-poc/Caddyfile                   |  5 +
 zitadel-setup-poc/README.md                   | 97 ++++++++++++++++---
 zitadel-setup-poc/brand.mjs                   | 71 ++++++++++++++
 zitadel-setup-poc/docker-compose.yml          | 21 ++++
 zitadel-setup-poc/login-demo.mjs              | 76 +++++++++++++++
 zitadel-setup-poc/seed.mjs                    | 17 +++-
 7 files changed, 277 insertions(+), 23 deletions(-)
 create mode 100644 zitadel-setup-poc/brand.mjs
 create mode 100644 zitadel-setup-poc/login-demo.mjs

diff --git a/cms/src/components/authProvider/FormModal.vue b/cms/src/components/authProvider/FormModal.vue
index afa2c5e3d2..ff68d49b63 100644
--- a/cms/src/components/authProvider/FormModal.vue
+++ b/cms/src/components/authProvider/FormModal.vue
@@ -68,15 +68,12 @@ function isValidClientId(value: string): boolean {
     return !/\s/.test(trimmed);
 }
 
+// OIDC treats the audience as an opaque string. Auth0 issues URL-shaped API
+// identifiers, but Zitadel and Keycloak use plain IDs, so requiring a URL here
+// would lock those providers out for no gain — the API only checks non-empty.
 function isValidAudience(value: string): boolean {
     const trimmed = value.trim();
-    if (!trimmed) return false;
-    try {
-        const url = new URL(trimmed);
-        return url.protocol === "http:" || url.protocol === "https:";
-    } catch {
-        return false;
-    }
+    return trimmed.length > 0 && !/\s/.test(trimmed);
 }
 
 const providerValidations = ref<Validation[]>([]);
@@ -100,7 +97,7 @@ watch(
             (x) => isValidClientId(x.clientId ?? ""),
         );
         validate(
-            "Audience must be an absolute URL (e.g. https://api.example.com)",
+            "Audience must not be empty or contain whitespace",
             "audience",
             providerValidations.value,
             p,
diff --git a/zitadel-setup-poc/Caddyfile b/zitadel-setup-poc/Caddyfile
index 91bb3b2899..52667a32f8 100644
--- a/zitadel-setup-poc/Caddyfile
+++ b/zitadel-setup-poc/Caddyfile
@@ -9,6 +9,11 @@ auth.luminary.local {
 		reverse_proxy h2c://zitadel:8080
 	}
 
+	# Login v2 runs as its own service, so this path leaves the monolith.
+	handle /ui/v2/login* {
+		reverse_proxy login:3000
+	}
+
 	# Zitadel serves gRPC alongside REST on one port, so the console needs h2c
 	# rather than a plain HTTP/1.1 upstream.
 	handle {
diff --git a/zitadel-setup-poc/README.md b/zitadel-setup-poc/README.md
index 4add5e2e0a..3e3ce5f381 100644
--- a/zitadel-setup-poc/README.md
+++ b/zitadel-setup-poc/README.md
@@ -10,10 +10,22 @@ as the Kratos PoC.
 
 ## Status
 
-**Not yet run.** The stack and scripts are written but have not been started
-against a Docker daemon, unlike the Kratos PoC which is known to work. Treat the
-two "expected to fail" rows below as predictions that `verify-contract.mjs` will
-confirm or refute — that is what the script is for.
+**Run and verified** against Docker on macOS with Zitadel v4.17.1. The stack
+comes up clean, `seed.mjs` provisions the project and OIDC app, and
+`verify-contract.mjs` reports 8 passed / 2 failed against a real RS256 JWT.
+
+Both failures are the two predicted below, and they are the same failure seen
+twice — the issuer's missing trailing slash, once in the discovery document and
+once in the `iss` claim of an issued token. Everything else in the contract
+passes unchanged: the JWKS rewrite works, `alg` is `RS256`, the token's `kid`
+resolves in the published JWKS, and `aud` and `azp` behave as the API expects.
+
+One thing the original stack got wrong: Zitadel v4 defaults to Login v2, which
+ships as a separate `zitadel-login` container rather than inside the monolith.
+Without it the instance still starts and the OIDC endpoints all answer, but every
+login redirect — including the console's own sign-in — lands on `/ui/v2/login/*`
+and returns 404. The container is now in the Compose file and Caddy routes that
+path to it.
 
 ## Why a second PoC
 
@@ -23,12 +35,13 @@ to the provider. This PoC keeps that property and asks a narrower question — h
 much of the stack is essential?
 
 Ory ships no login UI and no admin console by design, so both are yours to write.
-Zitadel is a single service that includes an OIDC provider, user management, a
-login UI and an admin console.
+Zitadel ships both. It is not quite a single service — from v4 the login UI runs
+as its own container — but it is still four images you configure rather than
+seven plus code you maintain.
 
 |  | Kratos + Hydra | Zitadel |
 | --- | --- | --- |
-| Long-running services | 7 | 3 |
+| Long-running services | 7 | 4 |
 | One-shot migration jobs | 2 | 0 (self-migrating) |
 | Databases | 2 schemas | 1 |
 | Bespoke runtime code you maintain | 708 lines (login/consent + admin) | 0 |
@@ -45,15 +58,37 @@ and an audit trail before shipping. Here the equivalent surface is `seed.mjs`, a
 ## The contract being tested
 
 `api/src/auth/authIdentity.service.ts` imposes five constraints on any provider.
-Hydra satisfies all five. For Zitadel, two are expected to need work:
+Hydra satisfies all five. Two need work for Zitadel, both confirmed against the
+running stack rather than predicted:
 
 | Constraint | Hydra | Zitadel |
 | --- | --- | --- |
 | JWT access tokens, not opaque | `strategies.access_token: jwt` | app `accessTokenType: OIDC_TOKEN_TYPE_JWT` (set by `seed.mjs`) |
 | `RS256` | yes | yes |
 | `azp`/`client_id` matches `provider.clientId` | yes | yes |
-| JWKS at `/.well-known/jwks.json` | published there natively | **published at `/oauth/v2/keys`** — the Caddyfile rewrites the path |
-| `iss` exactly `https://<domain>/` | issuer configured with the trailing slash | **expected to be `https://<domain>` with no trailing slash** |
+| JWKS at `/.well-known/jwks.json` | published there natively | **published at `/oauth/v2/keys`** — the Caddyfile rewrite fixes this, verified serving 2 keys |
+| `iss` exactly `https://<domain>/` | issuer configured with the trailing slash | **is `https://<domain>`, no trailing slash** — in both discovery and the `iss` claim |
+| Audience accepted by the CMS form | URL-shaped API identifier | **numeric project/client ID** — rejected by the CMS's `isValidAudience`, though the API itself accepts it |
+
+A third Auth0-ism sits in the CMS rather than the API. The Auth Provider form
+rejects the audience with "Audience must be an absolute URL":
+
+```ts
+// cms/src/components/authProvider/FormModal.vue
+function isValidAudience(value: string): boolean {
+    const url = new URL(trimmed);
+    return url.protocol === "http:" || url.protocol === "https:";
+}
+```
+
+Zitadel's audience is a numeric project or client ID (`387937637261901827`) and
+no setting makes it a URL, so the form cannot be satisfied as written. This one
+is only a form rule: `AuthProviderDto` validates `audience` with `@IsString()`
+`@IsNotEmpty()` and nothing more, and `jsonwebtoken` compares `aud` as an opaque
+string. URL audiences are an Auth0 convention for its API identifiers, not an
+OIDC requirement — the spec makes `aud` a case-sensitive string, usually the
+client ID. Relaxing `isValidAudience` to "non-empty, no whitespace" would admit
+Zitadel and Keycloak without weakening anything the API relies on.
 
 The trailing slash is an Auth0-ism baked into the API:
 
@@ -61,8 +96,9 @@ The trailing slash is an Auth0-ism baked into the API:
 issuer: `https://${provider.domain}/`,
 ```
 
-Auth0 uses a trailing slash; most standards-compliant issuers do not. If the
-prediction holds, the fix is one of:
+Auth0 uses a trailing slash; most standards-compliant issuers do not. Zitadel
+offers no setting to add one — `ExternalDomain` has no path component — so the
+fix has to land in the API. It is one of:
 
 1. Compare the issuer with the trailing slash optional in
    `authIdentity.service.ts` — smallest change, unblocks Zitadel and others.
@@ -88,11 +124,27 @@ cp .env.example .env          # masterkey must be exactly 32 characters
 docker compose up -d
 ```
 
+Caddy signs `auth.luminary.local` with its own internal CA, which Node does not
+trust by default — the scripts fail with `UNABLE_TO_GET_ISSUER_CERT_LOCALLY`
+until it is handed the root certificate. Export it once:
+
+```sh
+docker compose cp caddy:/data/caddy/pki/authorities/local/root.crt ./secrets/caddy-root.crt
+```
+
 First-instance setup writes a machine-user token to `secrets/seed-pat.txt`, which
 the seed script uses:
 
 ```sh
-node seed.mjs
+NODE_EXTRA_CA_CERTS=./secrets/caddy-root.crt node seed.mjs
+```
+
+To reach the console in a browser without a warning, trust that same root in the
+login keychain (macOS):
+
+```sh
+sudo security add-trusted-cert -d -r trustRoot \
+  -k /Library/Keychains/System.keychain ./secrets/caddy-root.crt
 ```
 
 It prints the `domain`, `clientId` and `audience` for an `AuthProvider` doc, plus
@@ -102,9 +154,28 @@ for the project to appear in the token's `aud` claim.
 - Console: `https://auth.luminary.local/ui/console` (`admin` / `Password1!`)
 - Discovery: `https://auth.luminary.local/.well-known/openid-configuration`
 
+## Branding
+
+`brand.mjs` applies the Ory PoC's Luminary palette and logo to Zitadel's shipped
+login screens via the org label policy, so the two PoCs can be compared on looks
+as well as behaviour. It reads the tokens straight out of
+`../ory-kratos-setup-poc/login-consent/views.js`:
+
+```sh
+node --use-system-ca brand.mjs
+```
+
+This restyles the shipped screens; it does not replace their markup. Zitadel's
+login is themed through the label policy (colours, logo, light/dark), with the
+strings overridable through the custom-text API. Replacing the layout outright
+means running your own app against Zitadel's Session API and pointing the
+instance's `LoginV2.BaseURI` at it — at which point you are maintaining login
+code again, which is the cost this PoC was trying to avoid.
+
 ## Verifying
 
 ```sh
+export NODE_EXTRA_CA_CERTS=./secrets/caddy-root.crt
 node verify-contract.mjs                      # discovery + JWKS constraints
 node verify-contract.mjs --client-id=... --audience=... --token=<jwt>   # all of them
 ```
diff --git a/zitadel-setup-poc/brand.mjs b/zitadel-setup-poc/brand.mjs
new file mode 100644
index 0000000000..48de54d0b0
--- /dev/null
+++ b/zitadel-setup-poc/brand.mjs
@@ -0,0 +1,71 @@
+// Applies the Ory PoC's Luminary look to Zitadel's shipped login screens by
+// setting the org label policy, reusing the same design tokens and logo so the
+// two PoCs can be compared on appearance as well as behaviour.
+import { readFileSync } from "node:fs";
+
+const DOMAIN = process.env.ZITADEL_DOMAIN || "auth.luminary.local";
+const BASE = `https://${DOMAIN}`;
+const pat = readFileSync(process.env.PAT_PATH || "./secrets/seed-pat.txt", "utf8").trim();
+
+// Lifted from ory-kratos-setup-poc/login-consent/views.js so the palettes stay
+// the same in both PoCs.
+const THEME = {
+    primaryColor: "#eab308",
+    backgroundColor: "#fafafa",
+    fontColor: "#18181b",
+    warnColor: "#b91c1c",
+    primaryColorDark: "#facc15",
+    backgroundColorDark: "#0f172a",
+    fontColorDark: "#f1f5f9",
+    warnColorDark: "#fca5a5",
+    hideLoginNameSuffix: true,
+    disableWatermark: true,
+    themeMode: "THEME_MODE_AUTO",
+};
+
+const call = async (path, body, method = "POST") => {
+    const res = await fetch(`${BASE}${path}`, {
+        method,
+        headers: { Authorization: `Bearer ${pat}`, "Content-Type": "application/json" },
+        body: body === undefined ? undefined : JSON.stringify(body),
+    });
+    const json = await res.json().catch(() => null);
+    if (!res.ok) throw new Error(`${path} -> ${res.status}: ${JSON.stringify(json)}`);
+    return json;
+};
+
+// The org may not have its own policy yet, in which case it inherits the
+// instance default and PUT reports 404.
+try {
+    await call("/management/v1/policies/label", THEME, "PUT");
+} catch {
+    await call("/management/v1/policies/label", THEME, "POST");
+}
+
+// The logo is the same SVG the Ory login pages render.
+const views = readFileSync("../ory-kratos-setup-poc/login-consent/views.js", "utf8");
+const svg = views.match(/const LOGO = `([\s\S]*?)`;/)?.[1];
+
+async function uploadLogo(endpoint, body, type) {
+    const form = new FormData();
+    form.append("file", new Blob([body], { type }), `logo.${type === "image/svg+xml" ? "svg" : "png"}`);
+    const res = await fetch(`${BASE}${endpoint}`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${pat}` },
+        body: form,
+    });
+    return { ok: res.ok, status: res.status, text: await res.text().catch(() => "") };
+}
+
+if (svg) {
+    for (const [label, endpoint] of [
+        ["light", "/assets/v1/org/policy/label/logo"],
+        ["dark", "/assets/v1/org/policy/label/logo/dark"],
+    ]) {
+        const r = await uploadLogo(endpoint, svg, "image/svg+xml");
+        console.log(`logo (${label}) -> ${r.ok ? "uploaded" : `skipped (${r.status}) ${r.text.slice(0, 120)}`}`);
+    }
+}
+
+await call("/management/v1/policies/label/_activate", {});
+console.log("\nBranding applied and activated. Reload the login tab to see it.");
diff --git a/zitadel-setup-poc/docker-compose.yml b/zitadel-setup-poc/docker-compose.yml
index fd79b6e88f..ac450863f2 100644
--- a/zitadel-setup-poc/docker-compose.yml
+++ b/zitadel-setup-poc/docker-compose.yml
@@ -36,12 +36,33 @@ services:
     ports:
       - "8080:8080"
 
+  # Zitadel v4 defaults to Login v2, which ships as its own container rather than
+  # inside the monolith. Without it every login redirect and the console's own
+  # sign-in land on /ui/v2/login/* and 404.
+  login:
+    image: ghcr.io/zitadel/zitadel-login:v4.17.1
+    container_name: zitadel-login
+    restart: unless-stopped
+    depends_on:
+      - zitadel
+    environment:
+      ZITADEL_API_URL: http://zitadel:8080
+      # Zitadel resolves the instance from the Host header, so the in-network
+      # call has to claim the external domain to be recognised.
+      CUSTOM_REQUEST_HEADERS: Host:auth.luminary.local
+      # Written by first-instance setup; the entrypoint waits for it to appear.
+      ZITADEL_SERVICE_USER_TOKEN_FILE: /secrets/seed-pat.txt
+      NEXT_PUBLIC_BASE_PATH: /ui/v2/login
+    volumes:
+      - ./secrets:/secrets:ro
+
   caddy:
     image: caddy:2
     container_name: zitadel-caddy
     restart: unless-stopped
     depends_on:
       - zitadel
+      - login
     ports:
       - "443:443"
       - "80:80"
diff --git a/zitadel-setup-poc/login-demo.mjs b/zitadel-setup-poc/login-demo.mjs
new file mode 100644
index 0000000000..bab507609f
--- /dev/null
+++ b/zitadel-setup-poc/login-demo.mjs
@@ -0,0 +1,76 @@
+// Drives a real PKCE authorization-code flow against the seeded SPA client and
+// prints the resulting access token's claims, so the API's contract can be
+// checked against a browser-issued token rather than a machine-user one.
+import { createServer } from "node:http";
+import { createHash, randomBytes } from "node:crypto";
+
+const DOMAIN = process.env.ZITADEL_DOMAIN || "auth.luminary.local";
+const BASE = `https://${DOMAIN}`;
+const CLIENT_ID = process.argv[2];
+const PROJECT_ID = process.argv[3];
+const PORT = 4174;
+const REDIRECT = `http://localhost:${PORT}/callback`;
+
+if (!CLIENT_ID || !PROJECT_ID) {
+    console.error("usage: node --use-system-ca login-demo.mjs <clientId> <projectId>");
+    process.exit(1);
+}
+
+const b64url = (b) => b.toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+const verifier = b64url(randomBytes(32));
+const challenge = b64url(createHash("sha256").update(verifier).digest());
+
+const authUrl = `${BASE}/oauth/v2/authorize?` + new URLSearchParams({
+    client_id: CLIENT_ID,
+    redirect_uri: REDIRECT,
+    response_type: "code",
+    scope: `openid profile email urn:zitadel:iam:org:project:id:${PROJECT_ID}:aud`,
+    code_challenge: challenge,
+    code_challenge_method: "S256",
+});
+
+const server = createServer(async (req, res) => {
+    const url = new URL(req.url, `http://localhost:${PORT}`);
+    if (!url.pathname.startsWith("/callback")) return res.writeHead(404).end();
+
+    const code = url.searchParams.get("code");
+    if (!code) {
+        res.writeHead(400, { "Content-Type": "text/plain" });
+        res.end(`No code: ${url.searchParams.get("error_description") || url.search}`);
+        return;
+    }
+
+    const tokenRes = await fetch(`${BASE}/oauth/v2/token`, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({
+            grant_type: "authorization_code",
+            code,
+            redirect_uri: REDIRECT,
+            client_id: CLIENT_ID,
+            code_verifier: verifier,
+        }),
+    });
+    const tok = await tokenRes.json();
+
+    if (!tok.access_token) {
+        res.writeHead(500, { "Content-Type": "text/plain" });
+        res.end(JSON.stringify(tok, null, 2));
+        console.error("token exchange failed:", tok);
+        server.close();
+        return;
+    }
+
+    const claims = JSON.parse(Buffer.from(tok.access_token.split(".")[1], "base64url").toString());
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end("<h2>Signed in. Claims printed in the terminal.</h2>");
+
+    console.log("\n=== access token claims ===");
+    console.log(JSON.stringify(claims, null, 2));
+    console.log("\n=== access token ===\n" + tok.access_token + "\n");
+    server.close();
+});
+
+server.listen(PORT, () => {
+    console.log(`Listening on ${REDIRECT}\n\nOpen this to sign in:\n\n${authUrl}\n`);
+});
diff --git a/zitadel-setup-poc/seed.mjs b/zitadel-setup-poc/seed.mjs
index 71568a29fe..3e209120ca 100644
--- a/zitadel-setup-poc/seed.mjs
+++ b/zitadel-setup-poc/seed.mjs
@@ -15,9 +15,9 @@ try {
     process.exit(1);
 }
 
-async function api(path, body) {
+async function api(path, body, method = "POST") {
     const res = await fetch(`${BASE}${path}`, {
-        method: "POST",
+        method,
         headers: { Authorization: `Bearer ${pat}`, "Content-Type": "application/json" },
         body: JSON.stringify(body),
     });
@@ -26,6 +26,19 @@ async function api(path, body) {
     return json;
 }
 
+// The Login v2 container authenticates as this same machine user, and its
+// session calls are refused with AUTH-AWfge unless it holds IAM_LOGIN_CLIENT.
+// IAM_OWNER from first-instance setup does not imply it.
+const members = await api("/admin/v1/members/_search", {});
+const loginClient = members.result?.find((m) => m.preferredLoginName === "seed-bot");
+if (loginClient && !loginClient.roles.includes("IAM_LOGIN_CLIENT")) {
+    await api(
+        `/admin/v1/members/${loginClient.userId}`,
+        { roles: [...loginClient.roles, "IAM_LOGIN_CLIENT"] },
+        "PUT",
+    );
+}
+
 const project = await api("/management/v1/projects", { name: "Luminary" });
 const projectId = project.id;