@seifer-webapp-factory/authentication 0.1.0

package/frontend/templates/pages/forgot-password.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/**
+ * US-A0503 — Wachtwoord-vergeten-pagina (surface, gematerialiseerd). Composeert de forms-kit met de
+ * pinned `useForgotPassword`-composable (`POST /auth/forgot-password`). No-enumeration: ongeacht of
+ * het e-mailadres bestaat, toont de pagina na verzending dezelfde generieke bevestiging — de UI
+ * onthult nooit of er een account bij het adres hoort. Alleen bij een client-side validatiefout of
+ * een echte transportfout (bv. rate-limit) verschijnt een gelokaliseerde melding.
+ */
+import { computed, ref } from 'vue';
+import { zodFormSchema } from '@seifer-webapp-factory/kits/frontend/forms';
+import { useForm } from '@seifer-webapp-factory/kits/frontend/forms/vue';
+import { forgotPasswordRequestSchema } from '../../../contract/index.js';
+import { useForgotPassword } from '../../src/composables.js';
+import AuthField from '../components/AuthField.vue';
+import { useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const forgot = useForgotPassword();
+
+/** Zodra we een generieke bevestiging tonen (no-enumeration). */
+const submitted = ref(false);
+
+const { handleSubmit, isSubmitting } = useForm(zodFormSchema(forgotPasswordRequestSchema), {
+  initialValues: { email: '' },
+  submitHandler: async (input) => {
+    const ack = await forgot.submit(input);
+    if (ack === undefined) return; // bv. rate_limited: toon de gelokaliseerde reden, geen bevestiging
+    submitted.value = true;
+  },
+});
+
+const submitError = computed(() => (forgot.error.value !== null ? t(forgot.error.value) : ''));
+const busy = computed(() => forgot.pending.value || isSubmitting.value);
+
+async function onSubmit(): Promise<void> {
+  await handleSubmit();
+}
+</script>
+
+<template>
+  <section class="auth-page auth-page--forgot">
+    <div v-if="submitted" class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.forgot.confirmTitle') }}</h1>
+      </header>
+      <p class="auth-page__confirmation" role="status" aria-live="polite" data-testid="auth-confirmation">
+        {{ t('auth.forgot.confirmBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.forgot.backToLogin') }}</a>
+      </nav>
+    </div>
+
+    <div v-else class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.forgot.title') }}</h1>
+        <p class="auth-page__subtitle">{{ t('auth.forgot.subtitle') }}</p>
+      </header>
+
+      <form class="auth-form" novalidate @submit.prevent="onSubmit">
+        <p
+          v-if="submitError"
+          class="auth-form__error"
+          role="alert"
+          aria-live="assertive"
+          data-testid="auth-form-error"
+        >
+          {{ submitError }}
+        </p>
+
+        <AuthField
+          name="email"
+          :label="t('auth.field.email')"
+          type="email"
+          autocomplete="email"
+          required
+        />
+
+        <button class="auth-form__submit" type="submit" :disabled="busy">
+          {{ busy ? t('auth.forgot.submitting') : t('auth.forgot.submit') }}
+        </button>
+      </form>
+
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.forgot.backToLogin') }}</a>
+      </nav>
+    </div>
+  </section>
+</template>

package/frontend/templates/pages/login.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * US-A0303 — Login-pagina (surface, gematerialiseerd, mag divergeren). Composeert de forms-kit
+ * (zod-gedreven validatie + toegankelijke veldfouten) met de pinned `useLogin`-composable, die via
+ * de getypte contract-client `POST /auth/login` aanroept en bij succes de auth-kit-sessie hydrateert.
+ * Serverfoutcodes uit de taxonomie worden via i18n vertaald en in een `aria-live`-regio getoond
+ * (nooit rauwe details — no-enumeration). Bij succes: toast + redirect naar de terugkeer-intentie.
+ *
+ * Design-system-agnostisch: plain semantische HTML + BEM-ish klassen; de host swapt zijn componenten in.
+ */
+import { computed } from 'vue';
+import { zodFormSchema } from '@seifer-webapp-factory/kits/frontend/forms';
+import { useForm } from '@seifer-webapp-factory/kits/frontend/forms/vue';
+import { loginRequestSchema } from '../../../contract/index.js';
+import { useLogin } from '../../src/composables.js';
+import AuthField from '../components/AuthField.vue';
+import { readQueryParam, useNavigate, useOptionalToasts, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const navigate = useNavigate();
+const notifySuccess = useOptionalToasts();
+const login = useLogin();
+
+/** Terugkeer-intentie: het pad waar de guard de bezoeker vandaan wegstuurde, of de home. */
+const redirectTarget = computed(() => readQueryParam('redirect') || '/');
+
+const { handleSubmit, isSubmitting } = useForm(zodFormSchema(loginRequestSchema), {
+  initialValues: { email: '', password: '' },
+  submitHandler: async (input) => {
+    const session = await login.submit(input);
+    if (session === undefined) return; // fout staat reactief in `login.error` (i18n-sleutel)
+    notifySuccess?.(t('auth.login.success'));
+    navigate(redirectTarget.value);
+  },
+});
+
+/** Vertaalde, veilige serverfout (of leeg). */
+const submitError = computed(() => (login.error.value !== null ? t(login.error.value) : ''));
+/** Bezig zolang de client-call of de form-submit loopt. */
+const busy = computed(() => login.pending.value || isSubmitting.value);
+
+async function onSubmit(): Promise<void> {
+  await handleSubmit();
+}
+</script>
+
+<template>
+  <section class="auth-page auth-page--login">
+    <header class="auth-page__header">
+      <h1 class="auth-page__title">{{ t('auth.login.title') }}</h1>
+      <p class="auth-page__subtitle">{{ t('auth.login.subtitle') }}</p>
+    </header>
+
+    <form class="auth-form" novalidate @submit.prevent="onSubmit">
+      <p
+        v-if="submitError"
+        class="auth-form__error"
+        role="alert"
+        aria-live="assertive"
+        data-testid="auth-form-error"
+      >
+        {{ submitError }}
+      </p>
+
+      <AuthField
+        name="email"
+        :label="t('auth.field.email')"
+        type="email"
+        autocomplete="email"
+        required
+      />
+      <AuthField
+        name="password"
+        :label="t('auth.field.password')"
+        type="password"
+        autocomplete="current-password"
+        required
+      />
+
+      <button class="auth-form__submit" type="submit" :disabled="busy">
+        {{ busy ? t('auth.login.submitting') : t('auth.login.submit') }}
+      </button>
+    </form>
+
+    <nav class="auth-page__links">
+      <a class="auth-page__link" href="/forgot-password">{{ t('auth.login.forgotLink') }}</a>
+      <a class="auth-page__link" href="/register">{{ t('auth.login.registerLink') }}</a>
+    </nav>
+  </section>
+</template>

package/frontend/templates/pages/logout.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * US-A0404 — Logout-pagina (surface, gematerialiseerd). Roept bij het laden de pinned
+ * `useLogout`-composable aan (`POST /auth/logout`), die de server-sessie beëindigt én de lokale
+ * auth-kit-sessie hoe dan ook wist — ook als de server-call faalt (netwerk/al afgemeld). Daarna een
+ * bevestiging + redirect naar de login-pagina. Geen invoervelden.
+ */
+import { computed, onMounted, ref } from 'vue';
+import { useLogout } from '../../src/composables.js';
+import { useNavigate, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const navigate = useNavigate();
+const logout = useLogout();
+
+/** Klaar zodra de (lokale) sessie is gewist — ongeacht het server-resultaat. */
+const done = ref(false);
+
+onMounted(async () => {
+  // De composable wist de lokale sessie altijd, ook bij een fout; daarom is "afgemeld" altijd waar.
+  await logout.submit();
+  done.value = true;
+  navigate('/login');
+});
+
+const busy = computed(() => logout.pending.value);
+</script>
+
+<template>
+  <section class="auth-page auth-page--logout">
+    <p v-if="busy" class="auth-page__status" role="status" aria-live="polite" data-testid="auth-logging-out">
+      {{ t('auth.logout.pending') }}
+    </p>
+    <div v-else class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.logout.doneTitle') }}</h1>
+      </header>
+      <p class="auth-page__confirmation" role="status" aria-live="polite" data-testid="auth-confirmation">
+        {{ t('auth.logout.doneBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.logout.toLogin') }}</a>
+      </nav>
+    </div>
+  </section>
+</template>

package/frontend/templates/pages/register.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * US-A0204 — Register-pagina + form (surface, gematerialiseerd, mag divergeren). Composeert de
+ * forms-kit (zod-gedreven, spiegelt de password-policy) met de pinned `useRegister`-composable, die
+ * via de getypte contract-client `POST /auth/register` aanroept. Client-side zod-validatie blokkeert
+ * verzending vóór het netwerk (AC2); serverfoutcodes (`email_taken`, `weak_password`) worden via
+ * i18n vertaald en in een `aria-live`-regio getoond (AC3). Bij succes: toast + de
+ * "controleer je e-mail"-bevestiging (AC1). Geen eigen HTTP-mechanisme.
+ */
+import { computed, ref } from 'vue';
+import { zodFormSchema } from '@seifer-webapp-factory/kits/frontend/forms';
+import { useForm } from '@seifer-webapp-factory/kits/frontend/forms/vue';
+import { registerRequestSchema } from '../../../contract/index.js';
+import { useRegister } from '../../src/composables.js';
+import AuthField from '../components/AuthField.vue';
+import { useOptionalToasts, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const notifySuccess = useOptionalToasts();
+const register = useRegister();
+
+/** Wisselt naar de "controleer je e-mail"-status na een geslaagde registratie. */
+const registered = ref(false);
+
+const { handleSubmit, isSubmitting } = useForm(zodFormSchema(registerRequestSchema), {
+  initialValues: { email: '', password: '' },
+  submitHandler: async (input) => {
+    const ack = await register.submit(input);
+    if (ack === undefined) return; // fout staat reactief in `register.error`
+    notifySuccess?.(t('auth.register.success'));
+    registered.value = true;
+  },
+});
+
+const submitError = computed(() => (register.error.value !== null ? t(register.error.value) : ''));
+const busy = computed(() => register.pending.value || isSubmitting.value);
+
+async function onSubmit(): Promise<void> {
+  await handleSubmit();
+}
+</script>
+
+<template>
+  <section class="auth-page auth-page--register">
+    <div v-if="registered" class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.register.checkEmailTitle') }}</h1>
+      </header>
+      <p class="auth-page__confirmation" role="status" aria-live="polite" data-testid="auth-confirmation">
+        {{ t('auth.register.checkEmailBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.register.backToLogin') }}</a>
+      </nav>
+    </div>
+
+    <div v-else class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.register.title') }}</h1>
+        <p class="auth-page__subtitle">{{ t('auth.register.subtitle') }}</p>
+      </header>
+
+      <form class="auth-form" novalidate @submit.prevent="onSubmit">
+        <p
+          v-if="submitError"
+          class="auth-form__error"
+          role="alert"
+          aria-live="assertive"
+          data-testid="auth-form-error"
+        >
+          {{ submitError }}
+        </p>
+
+        <AuthField
+          name="email"
+          :label="t('auth.field.email')"
+          type="email"
+          autocomplete="email"
+          required
+        />
+        <AuthField
+          name="password"
+          :label="t('auth.field.password')"
+          type="password"
+          autocomplete="new-password"
+          required
+        />
+        <p class="auth-form__hint">{{ t('auth.register.passwordHint') }}</p>
+
+        <button class="auth-form__submit" type="submit" :disabled="busy">
+          {{ busy ? t('auth.register.submitting') : t('auth.register.submit') }}
+        </button>
+      </form>
+
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.register.loginLink') }}</a>
+      </nav>
+    </div>
+  </section>
+</template>

package/frontend/templates/pages/reset-password.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+/**
+ * US-A0504 — Wachtwoord-reset-pagina (surface, gematerialiseerd). Leest het reset-token uit de
+ * route-query en composeert de forms-kit met de pinned `useResetPassword`-composable
+ * (`POST /auth/reset-password`). Ontbreekt het token, dan toont de pagina een "ongeldige link"-status
+ * en géén formulier. Serverfoutcodes (`token_invalid`, `token_expired`, `weak_password`) worden via
+ * i18n vertaald en in een `aria-live`-regio getoond. Bij succes: een bevestiging + link naar login.
+ */
+import { computed, ref } from 'vue';
+import { zodFormSchema } from '@seifer-webapp-factory/kits/frontend/forms';
+import { useForm } from '@seifer-webapp-factory/kits/frontend/forms/vue';
+import { resetPasswordRequestSchema } from '../../../contract/index.js';
+import { useResetPassword } from '../../src/composables.js';
+import AuthField from '../components/AuthField.vue';
+import { readQueryParam, useOptionalToasts, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const notifySuccess = useOptionalToasts();
+const reset = useResetPassword();
+
+/** Het token uit de e-maillink (`?token=...`). Leeg = ongeldige/onvolledige link. */
+const token = readQueryParam('token');
+const hasToken = computed(() => token.length > 0);
+
+/** Wisselt naar de bevestiging na een geslaagde reset. */
+const done = ref(false);
+
+const { handleSubmit, isSubmitting } = useForm(zodFormSchema(resetPasswordRequestSchema), {
+  // `token` reist mee in de waarden (uit de query); alleen `password` heeft een zichtbaar veld.
+  initialValues: { token, password: '' },
+  submitHandler: async (input) => {
+    const ack = await reset.submit(input);
+    if (ack === undefined) return; // fout staat reactief in `reset.error`
+    notifySuccess?.(t('auth.reset.success'));
+    done.value = true;
+  },
+});
+
+const submitError = computed(() => (reset.error.value !== null ? t(reset.error.value) : ''));
+const busy = computed(() => reset.pending.value || isSubmitting.value);
+
+async function onSubmit(): Promise<void> {
+  await handleSubmit();
+}
+</script>
+
+<template>
+  <section class="auth-page auth-page--reset">
+    <div v-if="!hasToken" class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.reset.invalidLinkTitle') }}</h1>
+      </header>
+      <p class="auth-page__error" role="alert" aria-live="assertive" data-testid="auth-invalid-link">
+        {{ t('auth.reset.invalidLinkBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/forgot-password">{{ t('auth.reset.requestNew') }}</a>
+      </nav>
+    </div>
+
+    <div v-else-if="done" class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.reset.doneTitle') }}</h1>
+      </header>
+      <p class="auth-page__confirmation" role="status" aria-live="polite" data-testid="auth-confirmation">
+        {{ t('auth.reset.doneBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.reset.toLogin') }}</a>
+      </nav>
+    </div>
+
+    <div v-else class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.reset.title') }}</h1>
+        <p class="auth-page__subtitle">{{ t('auth.reset.subtitle') }}</p>
+      </header>
+
+      <form class="auth-form" novalidate @submit.prevent="onSubmit">
+        <p
+          v-if="submitError"
+          class="auth-form__error"
+          role="alert"
+          aria-live="assertive"
+          data-testid="auth-form-error"
+        >
+          {{ submitError }}
+        </p>
+
+        <AuthField
+          name="password"
+          :label="t('auth.reset.newPassword')"
+          type="password"
+          autocomplete="new-password"
+          required
+        />
+        <p class="auth-form__hint">{{ t('auth.register.passwordHint') }}</p>
+
+        <button class="auth-form__submit" type="submit" :disabled="busy">
+          {{ busy ? t('auth.reset.submitting') : t('auth.reset.submit') }}
+        </button>
+      </form>
+    </div>
+  </section>
+</template>

package/frontend/templates/pages/verify-email.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * US-A0205 — Verify-email-pagina (surface, gematerialiseerd). Leest het verificatie-token uit de
+ * route-query en roept bij het laden de pinned `useVerifyEmail`-composable aan
+ * (`POST /auth/verify-email`). De pagina toont vier toestanden: ontbrekend token (ongeldige link),
+ * bezig, geslaagd (met link naar login) en mislukt (`token_invalid`/`token_expired`, via i18n
+ * vertaald in een `aria-live`-regio). Geen invoervelden — het token komt volledig uit de link.
+ */
+import { computed, onMounted, ref } from 'vue';
+import { useVerifyEmail } from '../../src/composables.js';
+import { readQueryParam, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const verify = useVerifyEmail();
+
+/** Het token uit de e-maillink (`?token=...`). Leeg = ongeldige/onvolledige link. */
+const token = readQueryParam('token');
+const hasToken = computed(() => token.length > 0);
+
+/** Geslaagd zodra de composable een bevestiging teruggaf. */
+const verified = ref(false);
+
+const errorMessage = computed(() => (verify.error.value !== null ? t(verify.error.value) : ''));
+
+onMounted(async () => {
+  if (!hasToken.value) return;
+  const ack = await verify.submit({ token });
+  verified.value = ack !== undefined;
+});
+</script>
+
+<template>
+  <section class="auth-page auth-page--verify">
+    <div v-if="!hasToken" class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.verify.invalidLinkTitle') }}</h1>
+      </header>
+      <p class="auth-page__error" role="alert" aria-live="assertive" data-testid="auth-invalid-link">
+        {{ t('auth.verify.invalidLinkBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.verify.toLogin') }}</a>
+      </nav>
+    </div>
+
+    <div v-else-if="verify.pending.value" class="auth-page__panel">
+      <p class="auth-page__status" role="status" aria-live="polite" data-testid="auth-verifying">
+        {{ t('auth.verify.verifying') }}
+      </p>
+    </div>
+
+    <div v-else-if="verified" class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.verify.successTitle') }}</h1>
+      </header>
+      <p class="auth-page__confirmation" role="status" aria-live="polite" data-testid="auth-confirmation">
+        {{ t('auth.verify.successBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.verify.toLogin') }}</a>
+      </nav>
+    </div>
+
+    <div v-else class="auth-page__panel">
+      <header class="auth-page__header">
+        <h1 class="auth-page__title">{{ t('auth.verify.failedTitle') }}</h1>
+      </header>
+      <p class="auth-page__error" role="alert" aria-live="assertive" data-testid="auth-form-error">
+        {{ errorMessage || t('auth.verify.failedBody') }}
+      </p>
+      <nav class="auth-page__links">
+        <a class="auth-page__link" href="/login">{{ t('auth.verify.toLogin') }}</a>
+      </nav>
+    </div>
+  </section>
+</template>

package/frontend/templates/plugins/auth.client.ts

@@ -0,0 +1,111 @@
+/**
+ * US-A0303/US-A0304 — Auth-bootstrap-plugin (surface, gematerialiseerd, Nuxt client-plugin).
+ * Bindt de frontend-kits en het mechanisme samen tot één per-app-instance geheel — géén
+ * module-globale mutable state:
+ *
+ *  1. `createHttpClient` met een `fetchTransport` die cookies meestuurt (`credentials: 'include'`),
+ *     zodat het httpOnly refresh-token + CSRF-cookie (US-A0703) automatisch meereizen.
+ *  2. `createAuthClient` (het mechanisme) rond die http-client → `provideAuthClient`.
+ *  3. De auth-kit sessie-store → `provideAuth` (bron van waarheid voor de sessie-status).
+ *  4. i18n-, notifications- en forms-translate-providers voor de surface-pagina's.
+ *  5. Hydratie via `client.me()`: bij een geldige sessie wordt de store `authenticated`.
+ *
+ * Dit bestand is een template dat in de host-Nuxt-app wordt gematerialiseerd; het draait niet in de
+ * vitest-render-tests (die injecteren een fake client rechtstreeks via `provideAuthClient`).
+ */
+import { createHttpClient, fetchTransport } from '@seifer-webapp-factory/kits/frontend/http-client';
+import {
+  createSessionStore,
+  memoryTokenStorage,
+  systemClock,
+  realScheduler,
+} from '@seifer-webapp-factory/kits/frontend/auth';
+import { provideAuth } from '@seifer-webapp-factory/kits/frontend/auth/vue';
+import {
+  createNotifications,
+  systemClock as notifyClock,
+  realScheduler as notifyScheduler,
+} from '@seifer-webapp-factory/kits/frontend/notifications';
+import { provideNotifications } from '@seifer-webapp-factory/kits/frontend/notifications/vue';
+import { provideFormTranslate } from '@seifer-webapp-factory/kits/frontend/forms/vue';
+import { createI18n, provideI18n } from '@seifer-webapp-factory/kits/frontend/i18n/vue';
+import { staticCatalogLoader } from '@seifer-webapp-factory/kits/frontend/i18n';
+import { createAuthClient } from '../../src/index.js';
+import { provideAuthClient } from '../../src/composables.js';
+import { provideNavigate } from '../runtime.js';
+import type { PublicUser } from '../../../contract/index.js';
+import nl from '../i18n/nl.json';
+import en from '../i18n/en.json';
+
+// `defineNuxtPlugin`, `navigateTo`, `useRuntimeConfig` zijn Nuxt auto-imports (host-context).
+declare const defineNuxtPlugin: <T>(setup: (nuxtApp: NuxtAppLike) => T) => unknown;
+declare const navigateTo: (to: string) => unknown;
+declare const useRuntimeConfig: () => { public?: { authBaseUrl?: string } };
+
+interface NuxtAppLike {
+  readonly vueApp: import('vue').App;
+  provide(name: string, value: unknown): void;
+}
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const app = nuxtApp.vueApp;
+
+  // 1. HTTP-client met cookie-transport (roterend refresh-token + CSRF via httpOnly-cookies).
+  const baseUrl = useRuntimeConfig().public?.authBaseUrl ?? '/api';
+  const credentialledFetch: typeof fetch = (input, init) =>
+    fetch(input, { ...init, credentials: 'include' });
+  const http = createHttpClient({
+    transport: fetchTransport(credentialledFetch),
+    baseUrl,
+    defaultHeaders: { accept: 'application/json' },
+  });
+
+  // 2. Het mechanisme: de getypte auth-client.
+  const client = createAuthClient({ http });
+  provideAuthClient(app, client);
+
+  // 3. De auth-kit sessie-store (bron van waarheid). Access-token in geheugen; refresh via cookie.
+  const store = createSessionStore<PublicUser>({
+    storage: memoryTokenStorage(),
+    clock: systemClock(),
+  });
+  provideAuth<PublicUser, unknown>(app, {
+    store,
+    login: () => Promise.reject(new Error('login loopt via de contract-client, niet via de kit')),
+    logout: () => Promise.resolve(),
+  });
+  // Voor de route-middleware (US-A0305): de status-accessor op de Nuxt-app.
+  nuxtApp.provide('authIsAuthenticated', () => store.isAuthenticated());
+
+  // 4. Cross-cutting providers voor de surface-pagina's.
+  const i18n = await createI18n({
+    loader: staticCatalogLoader({ nl, en }),
+    supported: ['nl', 'en'],
+    defaultLocale: 'nl',
+    initialLocale: 'nl',
+  });
+  provideI18n(app, i18n);
+  provideFormTranslate(app, (key, params) => i18n.t(key, params));
+
+  const notifications = createNotifications({
+    clock: notifyClock(),
+    scheduler: notifyScheduler(),
+  });
+  provideNotifications(app, notifications);
+
+  provideNavigate(app, (to) => {
+    navigateTo(to);
+  });
+
+  // 5. Hydratie: probeer de bestaande sessie te herstellen. Anoniem = stil terugvallen op idle.
+  try {
+    const me = await client.me();
+    store.establish({
+      tokens: { accessToken: '', expiresAt: undefined },
+      subject: me.user.id,
+      claims: me.user,
+    });
+  } catch {
+    // Geen (geldige) sessie: de store blijft `idle`. Geen fout lekken naar de gebruiker.
+  }
+});