fix(e2e): poll the register by reference, not a shared INGEDIEND cell (refs #78)

The verify stack is shared: earlier verify-projection/verify-domain checks leave
INGEDIEND rows in the register before the e2e submits. A status-only poll
short-circuited on a stale row, then the reference assertion ran against a
not-yet-reloaded page and timed out. Poll (with reload) on this submission's
reference cell instead — stronger, and it directly proves the #78 correlation.
Scope the INGEDIEND/INGESCHREVEN status checks to that reference row too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitea/workflows/ci.yaml

@@ -23,6 +23,16 @@ jobs:
       - uses: https://github.com/actions/setup-dotnet@v4
         with:
           dotnet-version: '10.0.x'
+      # Cache the NuGet package store so each .NET job restores from disk, not the network. There are
+      # no lock files (so setup-dotnet's built-in cache doesn't apply); key on the project files. @v3
+      # avoids the GHES guard that breaks @v4 on Gitea (gitea-actions-gotchas.md); cache is best-effort
+      # — a miss just restores from the network. See issue #73.
+      - uses: https://github.com/actions/cache@v3
+        with:
+          path: ~/.nuget/packages
+          key: nuget-${{ runner.os }}-${{ hashFiles('**/*.csproj') }}
+          restore-keys: |
+            nuget-${{ runner.os }}-
       - run: make lint
 
   build:
@@ -32,6 +42,12 @@ jobs:
       - uses: https://github.com/actions/setup-dotnet@v4
         with:
           dotnet-version: '10.0.x'
+      - uses: https://github.com/actions/cache@v3
+        with:
+          path: ~/.nuget/packages
+          key: nuget-${{ runner.os }}-${{ hashFiles('**/*.csproj') }}
+          restore-keys: |
+            nuget-${{ runner.os }}-
       - run: make build
 
   unit:
@@ -41,6 +57,12 @@ jobs:
       - uses: https://github.com/actions/setup-dotnet@v4
         with:
           dotnet-version: '10.0.x'
+      - uses: https://github.com/actions/cache@v3
+        with:
+          path: ~/.nuget/packages
+          key: nuget-${{ runner.os }}-${{ hashFiles('**/*.csproj') }}
+          restore-keys: |
+            nuget-${{ runner.os }}-
       - run: make unit
 
   # Frontend (Nx/Angular) lane: install with pnpm, then Nx lint + test + build.
@@ -64,6 +86,12 @@ jobs:
       - uses: https://github.com/actions/setup-dotnet@v4
         with:
           dotnet-version: '10.0.x'
+      - uses: https://github.com/actions/cache@v3
+        with:
+          path: ~/.nuget/packages
+          key: nuget-${{ runner.os }}-${{ hashFiles('**/*.csproj') }}
+          restore-keys: |
+            nuget-${{ runner.os }}-
       - run: make mutation
       # Publish the Stryker HTML reports. `if: always()` uploads them even when the
       # ratchet fails — that is exactly when you want to inspect the survivors.
@@ -124,10 +152,12 @@ jobs:
         run: make verify-domain
       - name: BFF → Keycloak + domain + projection
         run: make verify-bff
+      - name: Self-service e2e (Playwright, login → submit → success)
+        run: make verify-e2e
       # Log dump must precede teardown (which removes the containers).
       - name: Dump container logs on failure
         if: failure()
-        run: docker compose -f infra/docker-compose.yml logs --no-color --tail=100 oz-init openzaak nrc-init nrc-web nrc-celery nrc-beat flowable-db flowable-rest flowable-init keycloak acl bff domain projection-db event-subscriber projection-api 2>&1 || true
+        run: docker compose -f infra/docker-compose.yml logs --no-color --tail=100 oz-init openzaak nrc-init nrc-web nrc-celery nrc-beat flowable-db flowable-rest flowable-init keycloak acl bff domain projection-db event-subscriber projection-api self-service 2>&1 || true
       - name: Tear down
         if: always()
         run: make down

.gitignore

@@ -52,3 +52,8 @@ vite.config.*.timestamp*
 vitest.config.*.timestamp*
 
 .angular
+
+# Playwright e2e (installed/generated in-container or on local runs)
+tests/e2e/node_modules/
+tests/e2e/test-results/
+tests/e2e/playwright-report/

BACKLOG.md

@@ -162,20 +162,36 @@ The skeleton proves the spine end-to-end: a registration, a workflow, a zaak in
 
 **Out of scope (whole of S-08):** document upload, status tracking page.
 
-### S-09 · Openbaar Register portal — public lookup
+### S-09 · Openbaar Register portal — public lookup *(#10)*
 
-**Outcome:** The openbaar Angular app shows a search box. Anonymous. Queries the BFF's `/openbaar/register` which reads only the projection's **public-safe** fields. Confirms the walking skeleton end-to-end.
+**Outcome:** The openbaar Angular app shows a search box. Anonymous. Queries the BFF's `/openbaar/register` which reads only the projection's **public-safe** fields. Shows the public-visibility half of the walking skeleton.
+
+_Split from the original S-09 — scoped to the portal only; the approval flow is **S-09b (#75)**._
 
 **Acceptance:**
 
-- E2E test: zorgprofessional registers via self-service (S-08), behandelaar approves via a temporary admin endpoint (no behandel-portal yet), openbaar register shows the entry.
-- Public-safe field whitelist enforced and tested.
+- E2E test: after a zorgprofessional registers via self-service (S-08), the openbaar register shows the entry (as `INGEDIEND`).
+- Public-safe field whitelist enforced and tested (already in the BFF; add a portal component test + a11y check).
 
-**Touches:** `apps/openbaar/`, projection-api hardening, tests.
+**Touches:** `apps/openbaar/`, compose serving, e2e, docs.
 
-**Out of scope:** advanced search filters, sorting.
+**Out of scope:** approval/status transition (S-09b), advanced search filters, sorting.
 
-**End of walking skeleton.** Demo: submit → process → projection → public visibility. All CI gates green on Gitea Actions. Cut release `vYYYY.MM.0` and publish via Gitea Releases.
+### S-09b · Approval flow — temp admin endpoint + status transition to projection *(#75)*
+
+**Outcome:** A behandelaar approves a submitted registration via a temporary admin endpoint (no behandel-portal yet — S-12). The approval transitions the zaak status through the ACL → NRC → event-subscriber → projection, and the openbaar register then shows the entry as approved.
+
+**Acceptance:**
+
+- A new terminal/approved status (e.g. `INGESCHREVEN`) exists and is projected.
+- Temporary admin approve endpoint transitions a registration via a real ZGW status set (behind the ACL, §8).
+- E2E: register (S-08) → approve → openbaar shows the entry as approved.
+
+**Touches:** `services/domain`, `services/acl`, `services/event-subscriber`, `services/projection-api`, e2e.
+
+**Out of scope:** behandel-portal UI (S-12), assessment logic (S-13), escalation (S-15).
+
+**End of walking skeleton** (S-09 + S-09b). Demo: submit → process → projection → public visibility. All CI gates green on Gitea Actions. Cut release `vYYYY.MM.0` and publish via Gitea Releases.
 
 ---
 

Makefile

@@ -10,7 +10,7 @@ COMPOSE    := infra/docker-compose.yml
 # Long-running services with a healthcheck — the smoke polls these for readiness
 # (infra/wait-healthy.sh). One-shot init jobs (oz-init, nrc-init, flowable-init)
 # are not polled; they only need to have run. See docs/runbooks/gitea-actions-gotchas.md.
-WAIT_SVCS  := openzaak nrc-web acl bff domain event-subscriber projection-api
+WAIT_SVCS  := openzaak nrc-web acl bff domain event-subscriber projection-api self-service openbaar
 # Config files (OpenZaak data.yaml, Keycloak realms, Flowable BPMN) are streamed
 # into external named volumes via `docker cp` (infra/seed-config.sh) instead of
 # bind-mounted, because bind mounts don't reach sibling containers on the
@@ -50,9 +50,16 @@ endif
 ci: lint build unit mutation frontend verify
 
 ## frontend: install deps and run the Nx lint/test/build for the portals (pnpm + Node required)
+# Tests run in their own phase, ahead of the build. The @angular/build:unit-test
+# (Vitest) runner spawns a worker with a hard-coded 60s/90s startup timeout that is
+# not configurable. When the ~5min production build shares the run-many pool, it
+# starves that worker of CPU on constrained CI runners and Vitest fails with
+# "Timeout waiting for worker to respond". Splitting the phases keeps tests off the
+# heavy build's back so the worker starts well inside its window.
 frontend:
 	pnpm install --frozen-lockfile
-	pnpm nx run-many -t lint test build
+	pnpm nx run-many -t lint test
+	pnpm nx run-many -t build
 
 ## lint: verify formatting (no changes)
 lint:
@@ -153,6 +160,11 @@ verify-domain:
 verify-bff:
 	bash infra/run-bff-check.sh
 
+## verify-e2e: walking-skeleton Playwright e2e (S-08d) against the up stack — DigiD login →
+## submit → confirmation, driven inside the compose network.
+verify-e2e:
+	bash infra/run-e2e-check.sh
+
 ## verify: local mirror of the CI verify-stack job — full stack up once, all checks,
 ## tear down (always). For fast single-concern local iteration use `integration`
 ## (oz-only) or `verify-notifications` (oz+nrc) instead.
@@ -165,7 +177,8 @@ verify:
 	    && bash infra/run-notification-check.sh \
 	    && bash infra/run-projection-check.sh \
 	    && bash infra/run-domain-check.sh \
-	    && bash infra/run-bff-check.sh || rc=$$?; \
+	    && bash infra/run-bff-check.sh \
+	    && bash infra/run-e2e-check.sh || rc=$$?; \
 	  docker compose -f $(COMPOSE) down --volumes >/dev/null 2>&1; \
 	  docker volume rm -f $(CFG_VOLS) >/dev/null 2>&1; \
 	  exit $$rc'

apps/openbaar/Dockerfile

@@ -0,0 +1,21 @@
+# Multi-stage build for the openbaar portal (Angular → nginx).
+# Build context is the repo root (the app needs the pnpm workspace + libs). See infra/docker-compose.yml.
+FROM node:24-slim AS build
+WORKDIR /src
+RUN corepack enable && corepack prepare pnpm@11.5.2 --activate
+
+# Restore first (cached unless the manifests change).
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml nx.json tsconfig.base.json eslint.config.mjs ./
+RUN pnpm install --frozen-lockfile
+
+# Sources (only what the app + its libs need).
+COPY apps/openbaar apps/openbaar
+COPY libs libs
+RUN pnpm nx build openbaar
+
+FROM nginx:1.27-alpine AS runtime
+COPY apps/openbaar/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /src/dist/apps/openbaar/browser /usr/share/nginx/html
+# No runtime config: the openbaar register is anonymous (no OIDC authority to inject).
+
+EXPOSE 80

apps/openbaar/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

apps/openbaar/nginx.conf

@@ -0,0 +1,23 @@
+server {
+  listen 80;
+  server_name _;
+  root /usr/share/nginx/html;
+  index index.html;
+
+  # Resolve the BFF via Docker's embedded DNS at request time (variable proxy_pass), so nginx starts
+  # even before the BFF is up and picks up restarts — instead of failing to load the config.
+  resolver 127.0.0.11 ipv6=off valid=30s;
+
+  # Same-origin API: proxy the anonymous openbaar endpoint group to the bff service. The api-client
+  # uses relative URLs, so the browser calls this origin and nginx forwards to the BFF — no CORS.
+  location /openbaar/ {
+    set $bff http://bff:8080;
+    proxy_pass $bff;
+    proxy_set_header Host $host;
+  }
+
+  # SPA fallback — Angular client-side routing.
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}

apps/openbaar/project.json

@@ -0,0 +1,80 @@
+{
+  "name": "openbaar",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/openbaar/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular/build:application",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/openbaar",
+        "browser": "apps/openbaar/src/main.ts",
+        "tsConfig": "apps/openbaar/tsconfig.app.json",
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "apps/openbaar/public"
+          }
+        ],
+        "styles": ["apps/openbaar/src/styles.css"]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "1mb",
+              "maximumError": "2mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "4kb",
+              "maximumError": "8kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      }
+    },
+    "serve": {
+      "continuous": true,
+      "executor": "@angular/build:dev-server",
+      "defaultConfiguration": "development",
+      "configurations": {
+        "production": {
+          "buildTarget": "openbaar:build:production"
+        },
+        "development": {
+          "buildTarget": "openbaar:build:development"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@angular/build:unit-test",
+      "options": {
+        "watch": false
+      }
+    },
+    "serve-static": {
+      "continuous": true,
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "openbaar:build",
+        "staticFilePath": "dist/apps/openbaar/browser",
+        "spa": true
+      }
+    }
+  }
+}

apps/openbaar/src/app/app.config.ts

@@ -0,0 +1,19 @@
+import { provideHttpClient } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+} from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+
+/**
+ * The openbaar register is a public, anonymous read: no DigiD, no auth interceptor. The app is served
+ * same-origin as the BFF (nginx proxies /openbaar), so the api-client's relative calls stay same-origin.
+ */
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(appRoutes),
+    provideHttpClient(),
+  ],
+};

apps/openbaar/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

apps/openbaar/src/app/app.routes.ts

@@ -0,0 +1,4 @@
+import { Route } from '@angular/router';
+import { RegisterPage } from './register/register-page';
+
+export const appRoutes: Route[] = [{ path: '', component: RegisterPage }];

apps/openbaar/src/app/app.spec.ts

@@ -0,0 +1,14 @@
+import { provideRouter } from '@angular/router';
+import { render } from '@testing-library/angular';
+import { App } from './app';
+
+describe('App', () => {
+  it('renders the router outlet shell', async () => {
+    const { container } = await render(App, {
+      providers: [provideRouter([])],
+    });
+
+    // The shell is a thin host for routed pages (the RegisterPage owns the heading).
+    expect(container.querySelector('router-outlet')).toBeTruthy();
+  });
+});

apps/openbaar/src/app/app.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  imports: [RouterModule],
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+})
+export class App {
+  protected title = 'openbaar';
+}

apps/openbaar/src/app/register/register-page.html

@@ -0,0 +1,54 @@
+<main utrecht-document class="utrecht-theme">
+  <utrecht-article>
+    <utrecht-heading-1>Openbaar BIG-register</utrecht-heading-1>
+    <p utrecht-paragraph>
+      Zoek in het openbare register van BIG-registraties. Alleen publieke gegevens worden getoond.
+    </p>
+
+    <div role="search">
+      <label for="register-search" utrecht-form-label>Zoek op referentie</label>
+      <input
+        id="register-search"
+        type="search"
+        utrecht-textbox
+        [ngModel]="query()"
+        (ngModelChange)="query.set($event)"
+        [ngModelOptions]="{ standalone: true }"
+        (keyup.enter)="search()"
+      />
+      <button
+        utrecht-button
+        appearance="primary-action-button"
+        type="button"
+        [disabled]="loading()"
+        (click)="search()"
+      >
+        Zoeken
+      </button>
+    </div>
+
+    @if (loading()) {
+      <p utrecht-paragraph role="status">Bezig met laden…</p>
+    } @else if (searched() && entries().length === 0) {
+      <p utrecht-paragraph role="status">Geen inschrijvingen gevonden.</p>
+    } @else if (entries().length > 0) {
+      <table utrecht-table>
+        <caption>Inschrijvingen in het openbaar register</caption>
+        <thead>
+          <tr>
+            <th scope="col">Referentie</th>
+            <th scope="col">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (entry of entries(); track entry.id) {
+            <tr>
+              <td>{{ entry.reference }}</td>
+              <td>{{ entry.status }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+  </utrecht-article>
+</main>

apps/openbaar/src/app/register/register-page.spec.ts

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from '@testing-library/angular';
+import { of } from 'rxjs';
+import { BffApiV1Service, type OpenbaarEntry } from 'api-client';
+import { axe } from 'vitest-axe';
+import { RegisterPage } from './register-page';
+
+const sample: OpenbaarEntry[] = [
+  { id: 'zaak-abc', status: 'INGEDIEND', reference: 'REG-abc' },
+  { id: 'zaak-def', status: 'INGESCHREVEN', reference: 'REG-def' },
+];
+
+function providers(get = vi.fn().mockReturnValue(of(sample))) {
+  return {
+    get,
+    providers: [{ provide: BffApiV1Service, useValue: { getOpenbaarRegister: get } }],
+  };
+}
+
+describe('RegisterPage', () => {
+  it('lists the public register entries from the BFF on open', async () => {
+    const { get } = providers();
+    await render(RegisterPage, { providers: providers(get).providers });
+
+    expect(get).toHaveBeenCalled();
+    // The Referentie column shows the citizen's reference (matches the submit confirmation, #78),
+    // not the internal zaak id.
+    expect(await screen.findByText(/REG-abc/)).toBeTruthy();
+    expect(screen.getByText(/INGEDIEND/)).toBeTruthy();
+    expect(screen.getByText(/REG-def/)).toBeTruthy();
+  });
+
+  it('searches by the entered term', async () => {
+    const get = vi.fn().mockReturnValue(of(sample));
+    await render(RegisterPage, { providers: providers(get).providers });
+
+    fireEvent.input(screen.getByRole('searchbox'), { target: { value: 'zaak-abc' } });
+    fireEvent.click(screen.getByRole('button', { name: /zoek/i }));
+
+    expect(get).toHaveBeenLastCalledWith({ q: 'zaak-abc' });
+  });
+
+  it('shows an empty-state message when the register has no matches', async () => {
+    const get = vi.fn().mockReturnValue(of([] as OpenbaarEntry[]));
+    await render(RegisterPage, { providers: providers(get).providers });
+
+    expect(await screen.findByText(/geen inschrijvingen gevonden/i)).toBeTruthy();
+  });
+
+  it('has no WCAG 2.1 AA violations', async () => {
+    document.documentElement.lang = 'nl';
+    const { container } = await render(RegisterPage, { providers: providers().providers });
+
+    const results = await axe(container, {
+      runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'] },
+    });
+
+    expect(results.violations).toEqual([]);
+  });
+});

apps/openbaar/src/app/register/register-page.ts

@@ -0,0 +1,45 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BffApiV1Service, type OpenbaarEntry } from 'api-client';
+import { UtrechtComponentsModule } from 'ui';
+
+/**
+ * The openbaar (public) BIG-register: an anonymous search over the read projection's public-safe
+ * view (id + status only — bsn/naam never leave the BFF; ADR-0010). Loads the full register on open
+ * and filters by the search term via the BFF's `/openbaar/register?q=` endpoint (S-09).
+ */
+@Component({
+  selector: 'app-register-page',
+  imports: [FormsModule, UtrechtComponentsModule],
+  templateUrl: './register-page.html',
+})
+export class RegisterPage {
+  private readonly bff = inject(BffApiV1Service);
+
+  protected readonly query = signal('');
+  protected readonly entries = signal<OpenbaarEntry[]>([]);
+  protected readonly loading = signal(false);
+  protected readonly searched = signal(false);
+
+  constructor() {
+    // Show the full register on open; the search box narrows it.
+    this.search();
+  }
+
+  search(): void {
+    const q = this.query().trim();
+    this.loading.set(true);
+    this.bff.getOpenbaarRegister(q ? { q } : {}).subscribe({
+      next: (rows: OpenbaarEntry[]) => {
+        this.entries.set(rows);
+        this.loading.set(false);
+        this.searched.set(true);
+      },
+      error: () => {
+        this.entries.set([]);
+        this.loading.set(false);
+        this.searched.set(true);
+      },
+    });
+  }
+}

apps/openbaar/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="nl">
+  <head>
+    <meta charset="utf-8" />
+    <title>Openbaar BIG-register</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/openbaar/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { appConfig } from './app/app.config';
+
+// The openbaar register is anonymous (no DigiD, no runtime config) — bootstrap directly.
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

apps/openbaar/src/styles.css

@@ -0,0 +1,2 @@
+/* NL Design System theme — Utrecht design tokens (docs/frontend-decisions.md). */
+@import '@utrecht/design-tokens/dist/index.css';

apps/openbaar/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}

apps/openbaar/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": true,
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "emitDecoratorMetadata": false,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

apps/openbaar/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts"]
+}

apps/self-service/Dockerfile

@@ -0,0 +1,23 @@
+# Multi-stage build for the self-service portal (Angular → nginx).
+# Build context is the repo root (the app needs the pnpm workspace + libs). See infra/docker-compose.yml.
+FROM node:24-slim AS build
+WORKDIR /src
+RUN corepack enable && corepack prepare pnpm@11.5.2 --activate
+
+# Restore first (cached unless the manifests change).
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml nx.json tsconfig.base.json eslint.config.mjs ./
+RUN pnpm install --frozen-lockfile
+
+# Sources (only what the app + its libs need).
+COPY apps/self-service apps/self-service
+COPY libs libs
+RUN pnpm nx build self-service
+
+FROM nginx:1.27-alpine AS runtime
+COPY apps/self-service/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /src/dist/apps/self-service/browser /usr/share/nginx/html
+# Compose-time OIDC config: the browser (Playwright, on the compose network) reaches Keycloak by
+# service name, so the token issuer matches the BFF's authority (host-consistent, ADR-0010).
+RUN printf '{ "authority": "http://keycloak:8080/realms/digid" }\n' > /usr/share/nginx/html/config.json
+
+EXPOSE 80

apps/self-service/nginx.conf

@@ -0,0 +1,29 @@
+server {
+  listen 80;
+  server_name _;
+  root /usr/share/nginx/html;
+  index index.html;
+
+  # Resolve the BFF via Docker's embedded DNS at request time (variable proxy_pass), so nginx starts
+  # even before the BFF is up and picks up restarts — instead of failing to load the config.
+  resolver 127.0.0.11 ipv6=off valid=30s;
+
+  # Same-origin API: proxy the BFF endpoint groups to the bff service. The api-client uses relative
+  # URLs, so the browser calls this origin and nginx forwards to the BFF — no CORS, and the DigiD
+  # token (same-origin) is attached by the app's interceptor (S-08d/ADR-0010).
+  location /self-service/ {
+    set $bff http://bff:8080;
+    proxy_pass $bff;
+    proxy_set_header Host $host;
+  }
+  location /openbaar/ {
+    set $bff http://bff:8080;
+    proxy_pass $bff;
+    proxy_set_header Host $host;
+  }
+
+  # SPA fallback — Angular client-side routing.
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}

apps/self-service/project.json

@@ -27,8 +27,8 @@
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "1mb",
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",

apps/self-service/public/config.json

@@ -0,0 +1,3 @@
+{
+  "authority": "http://localhost:8180/realms/digid"
+}

apps/self-service/src/app/app.config.spec.ts

@@ -0,0 +1,65 @@
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import { BffApiV1Service } from 'api-client';
+import { authInterceptor } from 'auth';
+import { AbstractSecurityStorage, ConfigurationService } from 'angular-auth-oidc-client';
+import { SECURE_API_ROUTES } from './app.config';
+
+// Guards the DigiD token wiring end-to-end. The api-client calls the BFF with RELATIVE URLs, and the
+// angular-auth-oidc-client interceptor attaches the token only when `req.url` starts with a configured
+// secureRoute. A regression to an absolute origin (as once shipped) makes the relative URL never match,
+// so the submit goes out unauthenticated and fails silently. This drives the REAL interceptor and the
+// REAL api-client against the REAL production route value (SECURE_API_ROUTES); only the config source
+// and the token storage are faked, so the assertion turns on the actual route-matching.
+describe('self-service DigiD token wiring', () => {
+  let http: HttpTestingController;
+  let bff: BffApiV1Service;
+  const token = 'digid-access-token';
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(withInterceptors([authInterceptor()])),
+        provideHttpClientTesting(),
+        {
+          provide: ConfigurationService,
+          useValue: {
+            hasAtLeastOneConfig: () => true,
+            getAllConfigurations: () => [{ configId: 'digid', secureRoutes: SECURE_API_ROUTES }],
+          },
+        },
+        {
+          // A signed-in session: the storage the interceptor's token lookup reads from.
+          provide: AbstractSecurityStorage,
+          useValue: {
+            read: () => JSON.stringify({ authzData: token, authnResult: { id_token: 'id-token' } }),
+            write: () => undefined,
+            remove: () => undefined,
+            clear: () => undefined,
+          },
+        },
+      ],
+    });
+    http = TestBed.inject(HttpTestingController);
+    bff = TestBed.inject(BffApiV1Service);
+  });
+
+  afterEach(() => http.verify());
+
+  it('attaches the bearer token to the relative self-service BFF call', () => {
+    bff.postSelfServiceRegistrations().subscribe();
+
+    const req = http.expectOne('/self-service/registrations');
+    expect(req.request.headers.get('Authorization')).toBe(`Bearer ${token}`);
+    req.flush({ registrationId: 'reg-1', status: 'Ingediend' });
+  });
+
+  it('leaves the anonymous openbaar register call unauthenticated', () => {
+    bff.getOpenbaarRegister().subscribe();
+
+    const req = http.expectOne((r) => r.url === '/openbaar/register');
+    expect(req.request.headers.has('Authorization')).toBe(false);
+    req.flush([]);
+  });
+});

apps/self-service/src/app/app.config.ts

@@ -1,10 +1,42 @@
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import {
   ApplicationConfig,
   provideBrowserGlobalErrorListeners,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { authInterceptor, provideDigiadAuth } from 'auth';
 import { appRoutes } from './app.routes';
 
-export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(appRoutes)],
-};
+/** Environment-specific settings fetched from /config.json at startup (see main.ts). */
+export interface RuntimeConfig {
+  /** The Keycloak `digid` realm issuer as the browser reaches it (dev: localhost; compose: keycloak:8080). */
+  authority: string;
+}
+
+/**
+ * Route prefixes whose requests carry the DigiD token. These MUST match the **relative** URLs the
+ * api-client actually calls (same-origin via the nginx proxy) — the interceptor matches on `req.url`,
+ * which stays relative, so an absolute origin would never match and the token would go unattached.
+ * `/openbaar/` is deliberately excluded: it is the anonymous public register.
+ */
+export const SECURE_API_ROUTES = ['/self-service/'];
+
+/**
+ * Build the app providers from runtime config. `redirectUrl` is the app's own origin (where Keycloak
+ * redirects back). `secureRoutes` uses {@link SECURE_API_ROUTES} — relative prefixes, not the origin.
+ */
+export function appConfig(runtime: RuntimeConfig): ApplicationConfig {
+  const origin = typeof window !== 'undefined' ? window.location.origin : '/';
+  return {
+    providers: [
+      provideBrowserGlobalErrorListeners(),
+      provideRouter(appRoutes),
+      provideHttpClient(withInterceptors([authInterceptor()])),
+      provideDigiadAuth({
+        authority: runtime.authority,
+        redirectUrl: origin,
+        secureRoutes: SECURE_API_ROUTES,
+      }),
+    ],
+  };
+}

apps/self-service/src/app/app.html

@@ -1,5 +1 @@
-<main>
-  <h1>Zelfservice — BIG-registratie</h1>
-  <p>Portaal voor zorgprofessionals. Inloggen en indienen volgt in S-08c.</p>
-  <router-outlet></router-outlet>
-</main>
+<router-outlet></router-outlet>

apps/self-service/src/app/app.routes.ts

@@ -1,3 +1,7 @@
 import { Route } from '@angular/router';
+import { authenticatedGuard } from 'auth';
+import { RegistrationPage } from './registration/registration-page';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  { path: '', component: RegistrationPage, canActivate: [authenticatedGuard] },
+];

apps/self-service/src/app/app.spec.ts

@@ -1,17 +1,15 @@
-import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { render, screen } from '@testing-library/angular';
 import { App } from './app';
 
 describe('App', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-    }).compileComponents();
-  });
+  it('renders the router outlet shell', async () => {
+    const { container } = await render(App, {
+      providers: [provideRouter([])],
+    });
 
-  it('renders the self-service portal heading', async () => {
-    const fixture = TestBed.createComponent(App);
-    await fixture.whenStable();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Zelfservice');
+    // The shell is a thin host for routed pages (the RegistrationPage owns the heading).
+    expect(container.querySelector('router-outlet')).toBeTruthy();
+    expect(screen).toBeTruthy();
   });
 });

apps/self-service/src/app/registration/registration-page.html

@@ -0,0 +1,27 @@
+<main utrecht-document class="utrecht-theme">
+  <utrecht-article>
+    <utrecht-heading-1>Zelfservice — BIG-registratie</utrecht-heading-1>
+
+    @if (submitted()) {
+      <p utrecht-paragraph role="status">
+        Uw registratie is ontvangen. Referentie: {{ reference() }}.
+      </p>
+    } @else {
+      <p utrecht-paragraph>U bent ingelogd met BSN {{ bsn() }}.</p>
+      @if (failed()) {
+        <p utrecht-paragraph role="alert">
+          Er ging iets mis bij het indienen van uw registratie. Probeer het opnieuw.
+        </p>
+      }
+      <button
+        utrecht-button
+        appearance="primary-action-button"
+        type="button"
+        [disabled]="submitting()"
+        (click)="submit()"
+      >
+        Registratie indienen
+      </button>
+    }
+  </utrecht-article>
+</main>

apps/self-service/src/app/registration/registration-page.spec.ts

@@ -0,0 +1,71 @@
+import { signal } from '@angular/core';
+import { fireEvent, render, screen } from '@testing-library/angular';
+import { of, throwError } from 'rxjs';
+import { AuthService } from 'auth';
+import { BffApiV1Service } from 'api-client';
+import { axe } from 'vitest-axe';
+import { RegistrationPage } from './registration-page';
+
+class FakeAuth extends AuthService {
+  readonly isAuthenticated = signal(true);
+  readonly bsn = signal<string | undefined>('123456782');
+  login(): void {
+    /* noop */
+  }
+  logout(): void {
+    /* noop */
+  }
+}
+
+function providers(post = vi.fn().mockReturnValue(of({ registrationId: 'reg-9', status: 'Ingediend' }))) {
+  return {
+    post,
+    providers: [
+      { provide: AuthService, useClass: FakeAuth },
+      { provide: BffApiV1Service, useValue: { postSelfServiceRegistrations: post } },
+    ],
+  };
+}
+
+describe('RegistrationPage', () => {
+  it('shows the signed-in BSN', async () => {
+    await render(RegistrationPage, { providers: providers().providers });
+    expect(screen.getByText(/123456782/)).toBeTruthy();
+  });
+
+  it('submits the registration and confirms', async () => {
+    const { post, providers: p } = providers();
+    await render(RegistrationPage, { providers: p });
+
+    fireEvent.click(screen.getByRole('button', { name: /indienen/i }));
+
+    expect(post).toHaveBeenCalledTimes(1);
+    expect(await screen.findByText(/ontvangen/i)).toBeTruthy();
+  });
+
+  it('shows an error and keeps the submit available when the BFF call fails', async () => {
+    const { post, providers: p } = providers(vi.fn().mockReturnValue(throwError(() => new Error('BFF rejected'))));
+    await render(RegistrationPage, { providers: p });
+
+    fireEvent.click(screen.getByRole('button', { name: /indienen/i }));
+
+    expect(post).toHaveBeenCalledTimes(1);
+    // The failure is surfaced (not swallowed), the confirmation is not shown, and the user can retry.
+    expect(await screen.findByRole('alert')).toBeTruthy();
+    expect(screen.queryByText(/ontvangen/i)).toBeNull();
+    expect(screen.getByRole('button', { name: /indienen/i })).toBeTruthy();
+  });
+
+  it('has no WCAG 2.1 AA violations on the submit page', async () => {
+    // The portal is Dutch; the real index.html sets lang. Set it here so the document-level
+    // html-has-lang rule reflects the app, not the bare jsdom document.
+    document.documentElement.lang = 'nl';
+    const { container } = await render(RegistrationPage, { providers: providers().providers });
+
+    const results = await axe(container, {
+      runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'] },
+    });
+
+    expect(results.violations).toEqual([]);
+  });
+});

apps/self-service/src/app/registration/registration-page.ts

@@ -0,0 +1,42 @@
+import { Component, inject, signal } from '@angular/core';
+import { BffApiV1Service, type SubmitAccepted } from 'api-client';
+import { AuthService } from 'auth';
+import { UtrechtComponentsModule } from 'ui';
+
+/**
+ * The self-service submit page: a signed-in zorgprofessional confirms and submits their BIG
+ * registration. The bsn comes from the DigiD token (not a form field), so this is a confirm-and-
+ * submit flow that posts to the BFF and shows the returned reference (ADR-0010; S-08c).
+ */
+@Component({
+  selector: 'app-registration-page',
+  imports: [UtrechtComponentsModule],
+  templateUrl: './registration-page.html',
+})
+export class RegistrationPage {
+  private readonly auth = inject(AuthService);
+  private readonly bff = inject(BffApiV1Service);
+
+  protected readonly bsn = this.auth.bsn;
+  protected readonly submitting = signal(false);
+  protected readonly reference = signal<string | undefined>(undefined);
+  protected readonly submitted = signal(false);
+  protected readonly failed = signal(false);
+
+  submit(): void {
+    this.submitting.set(true);
+    this.failed.set(false);
+    this.bff.postSelfServiceRegistrations().subscribe({
+      next: (accepted: SubmitAccepted) => {
+        this.reference.set(accepted.registrationId);
+        this.submitted.set(true);
+        this.submitting.set(false);
+      },
+      // Surface the failure instead of swallowing it: re-enable the button so the user can retry.
+      error: () => {
+        this.failed.set(true);
+        this.submitting.set(false);
+      },
+    });
+  }
+}

apps/self-service/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="nl">
   <head>
     <meta charset="utf-8" />
     <title>self-service</title>

apps/self-service/src/main.ts

@@ -1,5 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
 import { App } from './app/app';
+import { appConfig, type RuntimeConfig } from './app/app.config';
 
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+// Load environment config before bootstrap so the OIDC authority is set per environment
+// (dev: localhost; compose: keycloak:8080) from a single build — 12-factor (S-08d).
+fetch('config.json')
+  .then((response) => response.json() as Promise<RuntimeConfig>)
+  .then((config) => bootstrapApplication(App, appConfig(config)))
+  .catch((err) => console.error(err));

apps/self-service/src/styles.css

@@ -1 +1,2 @@
-/* You can add global styles to this file, and also import other style files */
+/* NL Design System theme — Utrecht design tokens (docs/frontend-decisions.md). */
+@import '@utrecht/design-tokens/dist/index.css';

docs/architecture/adr-0011-approval-status-flow.md

@@ -0,0 +1,64 @@
+# ADR-0011: Approval sets the zaak eindstatus via the ACL and projects INGESCHREVEN from the notification alone
+
+- **Status:** Accepted
+- **Date:** 2026-07-13
+- **Deciders:** Respellion engineering
+- **Relates to:** S-09b (#75); split from S-09 (#10); builds on ADR-0001 (§8 loose coupling), ADR-0003 (ACL default-fill), ADR-0007 (OZ→NRC wiring), ADR-0008 (read projection), ADR-0009 (external-task worker)
+
+## Context
+
+The walking skeleton could submit a registration (INGEDIEND) and show it in the openbaar register,
+but nothing could **approve** it. S-09b adds a behandelaar approval that must make the entry publicly
+visible as a terminal status. There is no behandel-portal yet (S-12), so approval is triggered by a
+**temporary admin endpoint** on the Domain Service.
+
+Two decisions are non-obvious (§14) and cross service boundaries:
+
+1. **Who resolves the ZGW statustype?** Approval means "set the zaak to its final status", but the
+   domain must stay ZGW-ignorant (§8.1 — only the ACL talks to ZGW) and does not know statustype URLs.
+2. **How does the projection learn the new status?** The status is set in OpenZaak, which notifies over
+   NRC; the Event Subscriber projects it. But the subscriber **may not read OpenZaak** (§8.1), and an
+   NRC `status`/`create` notification's `resourceUrl` is the *status* resource, not the zaak, and does
+   not carry the statustype.
+
+## Decision
+
+**Approval flows Domain → ACL → OpenZaak → NRC → Event Subscriber → projection, using only the
+notification's own fields on the read side.**
+
+- **Domain.** `Registration.Approve()` advances INGEDIEND → INGESCHREVEN (requires an opened zaak; a
+  repeat is a no-op). The `ApproveRegistration` use case calls the ACL to set the zaak status, then
+  advances the aggregate. A temporary `POST /registrations/{id}/approve` endpoint drives it.
+- **ACL.** A new `POST /statussen` operation takes only the zaak URL. The ACL resolves the zaaktype's
+  **eindstatus** from the catalogus (`isEindstatus`, falling back to the highest `volgnummer`) and
+  POSTs a ZGW status against the zaak. The domain never names statustypen — the ACL owns the ZGW
+  translation (§8.1, ADR-0003).
+- **Event Subscriber.** It binds the NRC `hoofdObject` (always the zaak URL) and keys the projection on
+  it, so a `zaken`/`status`/`create` notification updates the **same** row the zaak-create created,
+  flipping it to INGESCHREVEN. It takes **any** status-create as the approval — in the walking skeleton
+  the only status ever set after creation is the approval — so it never has to read OpenZaak to learn
+  the statustype. The ZGW `resource` is retained in the notification log (new column) so a rebuild
+  reproduces the right status.
+
+## Consequences
+
+- The domain↔ACL boundary stays clean: the domain hands over a zaak URL and says "approve"; ZGW
+  statustype knowledge lives only in the ACL.
+- The projection remains rebuildable without OpenZaak (§8.1, ADR-0008): the log now records the ZGW
+  resource, which is all a rebuild needs to reproject the status.
+- The openbaar register shows real lifecycle: INGEDIEND on submit, INGESCHREVEN on approval.
+- **Walking-skeleton assumption:** "any status-create ⇒ INGESCHREVEN" holds only while approval is the
+  sole post-creation status transition. When more transitions arrive (beoordeling, afwijzing — S-12+),
+  the subscriber must distinguish statustypen. The honest options then are to carry the statustype
+  omschrijving in the notification `kenmerken`, or to have the ACL resolve it and re-notify — recorded
+  here so future-me revisits this rather than assuming it generalises.
+
+## Alternatives considered
+
+- **Inject the approved statustype URL into the ACL as config** (like the zaaktype URL). Rejected:
+  couples ACL config to seed output and adds compose/run-domain-check plumbing; runtime eindstatus
+  discovery keeps the ACL self-contained for one extra ZGW GET per approval.
+- **Have the Event Subscriber GET the status/statustype from OpenZaak** to map precisely. Rejected:
+  violates §8.1 (only the ACL talks to ZGW) and makes the projection depend on OpenZaak being up.
+- **Record the derived status in the notification log** instead of the ZGW resource. Rejected: the log
+  should retain notification *facts*, not projection semantics; the mapping stays in the projector.

docs/architecture/adr-0012-citizen-reference-correlation.md

@@ -0,0 +1,104 @@
+# ADR-0012: One citizen-facing reference across self-service and the openbaar register
+
+- **Status:** Accepted
+- **Date:** 2026-07-14
+- **Deciders:** Respellion engineering
+- **Relates to:** #78 (adr-proposal); builds on ADR-0008 (read projection), ADR-0001 (loose coupling), ADR-0009 (external-task worker / zaak creation)
+
+## Context
+
+A citizen submits through the self-service portal and is shown a confirmation with a
+**reference** so they can find their registration back in the public register. But the two
+sides showed **different identifiers**:
+
+- The self-service confirmation shows the **domain `registrationId`** — a GUID minted by the
+  domain aggregate (`RegistrationId.New()`) when the registration is created, before any zaak
+  exists.
+- The openbaar register showed the **zaak id** — the UUID from the NRC `hoofdObject` URL,
+  assigned by OpenZaak when the ACL opens the zaak.
+
+These never match, so the reference on the confirmation was useless for looking the entry up.
+The two identifiers live on opposite sides of the ACL boundary and are generated by different
+systems at different times, so there is no way to reconcile them after the fact without a
+correlating value carried across the boundary.
+
+The NRC notification the Event Subscriber consumes carries only the zaak URL plus the fixed
+`kenmerken` (`bronorganisatie`, `zaaktype`, `vertrouwelijkheidaanduiding`) — **not** the
+`registrationId`, the bsn, or the `identificatie`. ADR-0008 already recorded that filling any
+such field means reading the zaak **through the ACL** (§8.1) and deferred it as a follow-up.
+This is that follow-up, scoped to the one field the citizen actually needs.
+
+## Decision
+
+**Use the domain `registrationId` as the zaak's `identificatie`, and surface that single value
+as the citizen-facing `reference` on both portals. The Event Subscriber enriches the projection
+with the reference by reading the zaak through the ACL, and stores it in the replay log so
+rebuild stays log-only.**
+
+Concretely, following the request path:
+
+1. **Domain → ACL (write).** When the OpenZaak worker opens a zaak, it passes
+   `registration.Id` to the ACL (`IAclClient.OpenZaakAsync(bsn, reference, …)`). The ACL sets
+   it as the zaak's `identificatie` on `POST /zaken`. OpenZaak's `identificatie` is unique per
+   `bronorganisatie` and ≤ 40 chars — a GUID string fits. The ACL remains the only code that
+   constructs ZGW payloads (§8.1); the domain never sees a ZGW URL.
+2. **Event Subscriber → ACL (read).** On a notification, the subscriber asks the ACL for the
+   zaak's reference via a new `POST /zaken/reference` endpoint (`{ zaakUrl } → { reference }`),
+   which reads the zaak's `identificatie` through the ACL's OpenZaak gateway. The subscriber
+   still never talks to ZGW itself (§8.1) — it depends only on the ACL, over HTTP.
+3. **Projection + replay log.** The reference is written both to the `register_projection` row
+   **and** to the `processed_notifications` replay log (a new nullable `reference` column on
+   each). Storing it in the log is what keeps ADR-0008's "**rebuild replays the log, not
+   OpenZaak**" invariant true: `POST /admin/rebuild` reproduces the reference from the log
+   without re-reading the ACL.
+4. **BFF + openbaar.** The public view (`OpenbaarProjection.PublicView`) exposes
+   `id`, `status`, and `reference` (never bsn/naam), and the openbaar search matches on either
+   `id` or `reference`. The openbaar register's "Referentie" column now renders `reference`.
+
+The end-to-end guarantee is asserted in the Playwright walking-skeleton: the reference captured
+from the submit confirmation must appear as a cell in the public register.
+
+### Why HTTP to the ACL, not the ACL as a library
+
+ADR-0008 floated "extend the ACL with a zaak-read operation, consumed as a library." We instead
+call the ACL **over HTTP**, consistent with every other cross-service hop in this system
+(portals→BFF, domain→ACL). Sharing the ACL as a library would couple the subscriber to the
+ACL's infrastructure assembly and its ZGW client configuration, defeating the anti-corruption
+boundary. The HTTP endpoint keeps the ACL the single owner of ZGW access and its config.
+
+## Consequences
+
+**Positive**
+
+- One reference, end to end: the citizen's confirmation value is exactly what the public
+  register shows and searches by.
+- §8.1 stays intact — only the ACL reads or writes ZGW; the subscriber depends on the ACL, not
+  OpenZaak.
+- Rebuild stays log-only (ADR-0008): the reference is replayed from `processed_notifications`,
+  so `/admin/rebuild` needs no ACL/ZGW access.
+- The column additions are nullable and additive; older rows without a reference are tolerated.
+
+**Negative / costs**
+
+- A new coupling: the Event Subscriber now depends on the ACL being reachable
+  (`Acl__BaseUrl`, compose `depends_on: acl`). A registration whose reference read fails will
+  need the notification redelivered (NRC already redelivers; the projection upsert is
+  idempotent).
+- One extra HTTP hop per notification (subscriber→ACL→OpenZaak) on the projection path. Bounded:
+  one small GET per zaak, off the citizen's request path.
+- `identificatie` now carries semantic meaning (it equals the `registrationId`). If OpenZaak
+  were ever configured to auto-generate `identificatie`, the correlation would break; the ACL
+  setting it explicitly is now load-bearing.
+
+## Alternatives considered
+
+- **Carry the `registrationId` in the notification** — rejected: NRC `kenmerken` are fixed and
+  the notification content is not ours to extend; it would also couple the projection to a
+  bespoke notification shape.
+- **Show the zaak id on the confirmation instead** — rejected: the zaak does not exist yet when
+  the confirmation is returned (the worker opens it asynchronously, ADR-0009), so the domain has
+  no zaak id to show at submit time.
+- **Store only on the projection row, re-read the ACL on rebuild** — rejected: it would make
+  rebuild depend on the ACL/ZGW, breaking ADR-0008's log-only rebuild invariant.
+- **Reconcile the two ids in a lookup table** — rejected: adds write-only state and a second
+  source of truth for a value that can simply be the same on both sides.

docs/demo-script.md

@@ -5,6 +5,51 @@ copy-pasteable walkthrough against a local `make up` stack.
 
 ---
 
+## S-08d — Walking skeleton complete: browser → submit, end-to-end
+
+**Outcome:** the self-service portal is served in the stack and the full front-of-house happy path
+runs in a real browser — **mock DigiD login → submit → confirmation** — closing the walking skeleton
+(portal → BFF → domain → Flowable → ACL → OpenZaak, with the openbaar register reading the projection).
+
+```bash
+# 1. Bring the whole stack up (portal served on :8140, BFF :8080, Keycloak :8180).
+make up
+
+# 2. Automated happy path — Playwright, inside the compose network (issuer-consistent):
+make verify-e2e          # → login as jan-burger → submit → "ontvangen" confirmation
+
+# 3. By hand: open the portal, log in as jan-burger / test123, click "Registratie indienen".
+open http://localhost:8140
+```
+
+> The portal is served same-origin with the BFF (nginx proxies `/self-service` + `/openbaar`), so no
+> CORS; the OIDC authority comes from `/config.json` at runtime. See `docs/frontend-decisions.md`.
+
+---
+
+## S-08c — Self-service submit form (NL Design System + DigiD)
+
+**Outcome:** a zorgprofessional logs in via mock DigiD and submits a BIG registration through the
+self-service portal (NL Design System styling); the page confirms with the reference returned by the
+BFF. The bsn comes from the DigiD token, so it's a confirm-and-submit flow (no bsn field).
+
+```bash
+# 1. Bring the backend + Keycloak up (BFF on :8080, Keycloak on :8180).
+make up
+
+# 2. Serve the portal (dev server); it redirects to Keycloak for DigiD login.
+pnpm nx serve self-service        # → http://localhost:4200
+
+# 3. In the browser: log in as the mock DigiD user jan-burger / test123, then submit.
+#    The page shows the returned registration reference.
+```
+
+> First real UI. The full **login → submit → success** happy path is automated in **S-08d**
+> (Playwright, against the compose-served app). Component tests + an axe WCAG 2.1 AA check on the
+> submit page run headless in the `frontend` CI lane. See `docs/frontend-decisions.md`.
+
+---
+
 ## S-08a — Nx workspace + self-service portal skeleton
 
 **Outcome:** the frontend foundation — an Nx (pnpm) monorepo with the `self-service` Angular app
@@ -123,3 +168,83 @@ curl -fsS http://localhost:8120/register | jq 'length'  # → unchanged
 
 > `bsn` / `naam_placeholder` are deferred (ADR-0008) — the notification doesn't carry them and
 > the subscriber may not read OpenZaak directly (§8.1). They surface in a later slice.
+
+---
+
+## S-09 — Openbaar Register portal (public visibility)
+
+**Outcome:** the entry a zorgprofessional submits via self-service becomes publicly visible in the
+anonymous openbaar register portal — closing the walking-skeleton loop (submit → process → projection
+→ public visibility).
+
+**The path:** self-service submit → BFF → domain → (zaak) OpenZaak → NRC → Event Subscriber →
+projection → openbaar portal reads the BFF's public-safe `GET /openbaar/register`.
+
+```bash
+# 1. Bring the full stack up (self-service :8140, openbaar :8141).
+make up
+
+# 2. Submit a registration via the self-service portal (mock DigiD: jan-burger / test123),
+#    or drive the whole happy path automatically (login → submit → public visibility):
+make verify-e2e
+
+# 3. Open the public register — no login. It lists the submitted entry (id + status only).
+#    Only public-safe fields cross the BFF: bsn / naam never appear.
+open http://localhost:8141/            # search box; searches the BFF by referentie
+curl -fsS http://localhost:8140/openbaar/register | jq   # same public-safe view via the BFF proxy
+# → [ { "id": "<zaak-uuid>", "status": "INGEDIEND" } ]
+```
+
+> The register shows `INGEDIEND` on submit; approval flips it to `INGESCHREVEN` — see S-09b below.
+
+---
+
+## S-09b — Approval flow (public visibility flips to INGESCHREVEN)
+
+**Outcome:** a behandelaar approves a submitted registration via a temporary admin endpoint (no
+behandel-portal yet — S-12). The approval sets the zaak's final status through the ACL, which flows
+back to the projection over NRC, and the openbaar register then shows the entry as `INGESCHREVEN`.
+
+**The path:** `POST /registrations/{id}/approve` (domain) → ACL sets the zaak eindstatus (ZGW
+`/statussen`) → OpenZaak → NRC → Event Subscriber projects `INGESCHREVEN` → openbaar register.
+
+```bash
+# 1. Full stack up, then drive submit → public INGEDIEND → approve → public INGESCHREVEN:
+make up
+make verify-e2e
+
+# 2. Or by hand: submit (as in S-09), note the reference, then approve it.
+#    The zaak is opened off the request path, so approve once GET shows a zaakUrl.
+ref="<registration-reference-from-the-confirmation>"
+curl -fsS http://localhost:8130/registrations/$ref | jq       # domain (host port 8130): wait for .zaakUrl
+curl -fsS -X POST http://localhost:8130/registrations/$ref/approve -i   # → 204 No Content
+
+# 3. The public register now shows the entry as approved.
+curl -fsS http://localhost:8140/openbaar/register | jq
+# → [ { "id": "<zaak-uuid>", "status": "INGESCHREVEN" } ]
+```
+
+> **End of walking skeleton** (S-09 + S-09b): submit → process → projection → public visibility, from
+> INGEDIEND through approval to INGESCHREVEN. The subscriber takes any post-creation status-set as the
+> approval (ADR-0011) — a walking-skeleton assumption that tightens when more transitions arrive (S-12+).
+
+## #78 — One reference across both portals (ADR-0012)
+
+Before this change the self-service confirmation and the openbaar register showed **different**
+identifiers, so a citizen could not look their registration back up. Now both show the same
+**reference**: the domain `registrationId` is set as the zaak's `identificatie` by the ACL, and the
+Event Subscriber enriches the projection with it by reading the zaak through the ACL (§8.1) — storing
+it in the replay log so rebuild stays log-only (ADR-0008).
+
+**The path:** domain passes `registrationId` → ACL sets it as `zaak.identificatie` → NRC →
+Event Subscriber asks the ACL for the reference → projection row + replay log → openbaar register.
+
+```bash
+# Submit as in S-09 and note the reference on the confirmation, then find it in the public register:
+ref="<registration-reference-from-the-confirmation>"
+curl -fsS "http://localhost:8140/openbaar/register?q=$ref" | jq
+# → [ { "id": "<zaak-uuid>", "status": "INGEDIEND", "reference": "<same-ref-as-confirmation>" } ]
+```
+
+> The openbaar register's "Referentie" column and its search now use this reference — the exact value
+> the citizen saw on submit. Asserted end-to-end by the Playwright happy path.

docs/frontend-decisions.md

@@ -48,3 +48,72 @@ with the submit form (S-08c, #67); any deviation from NL DS will be recorded her
 - The BFF endpoints carry no `operationId`, so orval synthesises method names
   (`postSelfServiceRegistrations`, `getOpenbaarRegister`); adding explicit operation ids to the BFF
   is a possible later polish.
+
+---
+
+## Self-service form: NL DS, DigiD auth, testing (S-08c, #67)
+
+- **NL Design System via `@utrecht/component-library-angular`** (`libs/ui`) + `@utrecht/design-tokens`
+  (imported once in `apps/self-service/src/styles.css`). Utrecht is NL DS's reference Angular
+  implementation. Its v3 components are **NgModule-based, not standalone**, so `libs/ui` re-exports
+  `UtrechtComponentsModule` (and the component classes, so the AOT compiler resolves the template
+  directives through the barrel); standalone components consume it via `imports: [UtrechtComponentsModule]`.
+  §10's "no NgModules in new code" governs *our* code — consuming a third-party module is fine.
+- **DigiD login via `angular-auth-oidc-client`** (`libs/auth`): auth-code + PKCE against the Keycloak
+  `digid` realm (public client `big-portal`). A small **`AuthService` abstraction** (bsn /
+  isAuthenticated / login) wraps the library so components and the `authenticatedGuard` depend on a
+  mockable surface; a **token `HttpInterceptor`** attaches the bearer to BFF calls (secure route).
+  The OIDC `authority`/`secureApiOrigin` are dev defaults in `app.config.ts`; the compose-served app
+  overrides them (S-08d), and the browser-vs-container issuer alignment is handled there (ADR-0010).
+- **Testing:** component tests use **`@testing-library/angular`** (§10) with `AuthService` and the
+  api-client mocked; the **axe** (`vitest-axe`) check runs scoped to WCAG 2.1 AA tags
+  (`wcag2a/2aa/21a/21aa`) with the document `lang` set, asserting zero violations on the submit page.
+  The real DigiD browser round-trip is exercised in S-08d (Playwright).
+- **Module boundaries:** replaced the demo eslint `depConstraints` (`scope:shop`/`scope:shared`, left
+  over from the Nx angular template) with a permissive `*` default; scope/type tags can be
+  introduced when the portal set grows.
+
+---
+
+## Serving + e2e (S-08d, #68)
+
+- **Served by nginx, same-origin as the BFF.** The compose `self-service` image serves the built app
+  and **reverse-proxies** `/self-service/*` + `/openbaar/*` to the `bff` service. Because the
+  api-client uses **relative URLs**, the browser calls the app's own origin → nginx forwards to the
+  BFF: **no CORS**, and the DigiD token (same-origin) is attached by the interceptor. nginx resolves
+  the BFF at request time (a `resolver` + variable `proxy_pass`) so it starts before the BFF is up.
+- **Runtime config.** The app fetches `/config.json` before bootstrap (`main.ts`); `appConfig` is a
+  factory. The dev default (`public/config.json`) points at `localhost:8180`; the Docker image bakes
+  the compose value (`keycloak:8080`). One build, per-environment OIDC authority.
+- **e2e runs inside the compose network.** `infra/run-e2e-check.sh` runs Playwright in a container on
+  `cg`, so the browser reaches Keycloak as `keycloak:8080` — the **same issuer** the BFF validates
+  against (resolves the browser-vs-container mismatch, ADR-0010). It uses the official
+  `mcr.microsoft.com/playwright:<version>` image with browsers pre-baked, rather than downloading
+  ~150 MB of Chromium on every run (issue #73) — the image tag is kept in lockstep with
+  `tests/e2e/package.json`'s `@playwright/test` version. The spec is copied in (`docker cp`), not
+  mounted, so it leaves nothing root-owned on the host. Wired as `verify-e2e` in the `verify-stack`
+  CI job.
+- **e2e treats the portal origin as secure.** In-network the portal is served over plain HTTP on a
+  non-localhost origin (`http://self-service`), which is **not a secure context**, so Web Crypto
+  (`crypto.subtle`) is unavailable. angular-auth-oidc-client needs it for the PKCE code challenge, so
+  `authorize()` throws and the login redirect never fires. Production runs behind HTTPS where this is
+  a non-issue; rather than terminate TLS in the throwaway stack, the Playwright config passes
+  `--unsafely-treat-insecure-origin-as-secure` (honoured only by the full `channel: 'chromium'`
+  build, not the default headless-shell). This emulates the production HTTPS secure context without
+  touching the app or its production config.
+- `tests/e2e` is a standalone Playwright project (its own `package.json`), not an Nx project — it's a
+  live-stack check like the other `verify-*` runners, not part of the `frontend` unit lane.
+
+## Openbaar Register portal (S-09, #10)
+
+- **Anonymous, no auth.** The openbaar register is a public read, so `apps/openbaar` has no
+  `angular-auth-oidc-client`, no interceptor, and no `config.json` — `main.ts` bootstraps `appConfig`
+  directly with just `provideHttpClient` + `provideRouter`. This is the deliberate contrast to
+  self-service and keeps the app trivially cacheable/CDN-able.
+- **Same-origin via nginx, like self-service.** The compose `openbaar` image serves the built app and
+  reverse-proxies `/openbaar` to the BFF; the api-client's relative calls stay same-origin (no CORS).
+  Served on `:8141`, health-checked over IPv4 (`127.0.0.1`), no Keycloak dependency.
+- **Public-safe by construction.** The portal only ever sees the BFF's `OpenbaarProjection.PublicView`
+  (id + status); `bsn`/`naam` never leave the BFF. The e2e asserts the bsn never renders.
+- **Loads on open, filters on search.** `RegisterPage` fetches the full register on construction and
+  re-queries `/openbaar/register?q=` on search — no client-side filtering, the BFF owns the query.

eslint.config.mjs

@@ -19,22 +19,12 @@ export default [
         {
           enforceBuildableLibDependency: true,
           allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?[jt]s$'],
+          // Permissive default — apps/libs are untagged for now. Introduce scope/type tags
+          // when the portal set grows (docs/frontend-decisions.md).
           depConstraints: [
             {
-              sourceTag: 'scope:shared',
-              onlyDependOnLibsWithTags: ['scope:shared'],
-            },
-            {
-              sourceTag: 'scope:shop',
-              onlyDependOnLibsWithTags: ['scope:shop', 'scope:shared'],
-            },
-            {
-              sourceTag: 'scope:api',
-              onlyDependOnLibsWithTags: ['scope:api', 'scope:shared'],
-            },
-            {
-              sourceTag: 'type:data',
-              onlyDependOnLibsWithTags: ['type:data'],
+              sourceTag: '*',
+              onlyDependOnLibsWithTags: ['*'],
             },
           ],
         },

infra/docker-compose.yml

@@ -396,6 +396,9 @@ services:
     image: register-referentie/event-subscriber:dev
     environment:
       ConnectionStrings__Projection: Host=projection-db;Database=projection;Username=projection;Password=projection
+      # The subscriber enriches the projection with each zaak's reference (identificatie) by asking
+      # the ACL — the only code allowed to read ZGW (§8.1, #78).
+      Acl__BaseUrl: http://acl:8080/
       # The bearer Open Notificaties must present on the abonnement callback. NRC's
       # registration probe expects a 401 without it (ADR-0007). Dev-only token.
       EventSubscriber__Webhook__AuthToken: ${NOTIFICATION_WEBHOOK_TOKEN:-Bearer big-reference-notifications}
@@ -410,6 +413,8 @@ services:
     depends_on:
       projection-db:
         condition: service_healthy
+      acl:
+        condition: service_healthy
     networks: [cg]
 
   # The read side of the projection. Shares Projection.ReadModel, so build context is root.
@@ -433,6 +438,52 @@ services:
         condition: service_healthy
     networks: [cg]
 
+  # ── Self-Service portal (S-08d) ────────────────────────────────────────────
+  # nginx serves the Angular app and reverse-proxies /self-service + /openbaar to the BFF
+  # (same-origin, no CORS). The Playwright e2e drives it inside this network so the DigiD
+  # token issuer (keycloak:8080) matches the BFF's authority (ADR-0010).
+  self-service:
+    build:
+      context: ..
+      dockerfile: apps/self-service/Dockerfile
+    image: register-referentie/self-service:dev
+    ports:
+      - "8140:80"
+    healthcheck:
+      # 127.0.0.1, not localhost: nginx listens on IPv4 only, but localhost resolves to ::1 first.
+      test: ["CMD-SHELL", "wget -q -O /dev/null http://127.0.0.1/ || exit 1"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+      start_period: 10s
+    depends_on:
+      bff:
+        condition: service_healthy
+      keycloak:
+        condition: service_started
+    networks: [cg]
+
+  # The openbaar (public) register portal: nginx serves the Angular app and reverse-proxies
+  # /openbaar to the BFF. Anonymous — no DigiD, no Keycloak dependency (S-09).
+  openbaar:
+    build:
+      context: ..
+      dockerfile: apps/openbaar/Dockerfile
+    image: register-referentie/openbaar:dev
+    ports:
+      - "8141:80"
+    healthcheck:
+      # 127.0.0.1, not localhost: nginx listens on IPv4 only, but localhost resolves to ::1 first.
+      test: ["CMD-SHELL", "wget -q -O /dev/null http://127.0.0.1/ || exit 1"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+      start_period: 10s
+    depends_on:
+      bff:
+        condition: service_healthy
+    networks: [cg]
+
 volumes:
   oz-db:
   nrc-db:

infra/run-e2e-check.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+#
+# Walking-skeleton e2e (S-08d) against an ALREADY-RUNNING full stack: drive the self-service portal
+# in a real browser through mock-DigiD login → submit → confirmation (login → BFF → domain).
+#
+# Runs Playwright INSIDE the compose network (a container on `cg`), so the browser reaches
+# Keycloak by service name (keycloak:8080) — the same authority the BFF validates against, so the
+# token issuer matches (ADR-0010). The spec is copied into the container (docker cp), not mounted,
+# so it leaves no root-owned files on the host. The caller owns stack bring-up + teardown.
+#
+# Uses the official Playwright image with browsers pre-baked, instead of downloading ~150 MB of
+# Chromium on every run (issue #73). The image tag MUST match tests/e2e/package.json's
+# @playwright/test version — bump both together.
+set -euo pipefail
+
+here="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+root="$(cd "$here/.." && pwd)"
+
+ss="$(docker ps -q --filter 'name=self-service' | head -1)"
+[ -n "$ss" ] || { echo "ERROR: no running self-service container — bring the stack up first" >&2; exit 1; }
+net="$(docker inspect -f '{{range $k,$_ := .NetworkSettings.Networks}}{{$k}}{{"\n"}}{{end}}' "$ss" | head -1)"
+echo ">> running Playwright e2e on network $net against http://self-service"
+
+cid="$(docker create --network "$net" -w /e2e --ipc=host \
+  -e SELF_SERVICE_URL=http://self-service \
+  mcr.microsoft.com/playwright:v1.61.1-noble sh -c 'npm install --no-audit --no-fund && npx playwright test')"
+trap 'docker rm -f "$cid" >/dev/null 2>&1 || true' EXIT
+docker cp "$root/tests/e2e/." "$cid:/e2e" >/dev/null
+docker start -a "$cid"

libs/api-client/src/lib/generated/bff-api.ts

@@ -27,6 +27,8 @@ import {
 export interface OpenbaarEntry {
   id: string;
   status: string;
+  /** @nullable */
+  reference: string | null;
 }
 
 export interface SubmitAccepted {

libs/auth/README.md

@@ -0,0 +1,7 @@
+# auth
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test auth` to execute the unit tests.

libs/auth/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/auth/project.json

@@ -0,0 +1,13 @@
+{
+  "name": "auth",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/auth/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/auth/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/auth.service';
+export * from './lib/digid-auth.service';
+export * from './lib/digid-auth.providers';
+export * from './lib/authenticated.guard';

libs/auth/src/lib/auth.service.ts

@@ -0,0 +1,16 @@
+import { Signal } from '@angular/core';
+
+/**
+ * The portal's view of the signed-in user. An abstraction over the OIDC library so components and
+ * guards depend on a small, mockable surface (the real implementation is DigiadAuthService).
+ */
+export abstract class AuthService {
+  /** Whether a DigiD session is active. */
+  abstract readonly isAuthenticated: Signal<boolean>;
+  /** The citizen-service number from the DigiD token, once authenticated. */
+  abstract readonly bsn: Signal<string | undefined>;
+  /** Start the DigiD login (redirects to Keycloak). */
+  abstract login(): void;
+  /** End the session. */
+  abstract logout(): void;
+}

libs/auth/src/lib/authenticated.guard.spec.ts

@@ -0,0 +1,42 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { AuthService } from './auth.service';
+import { authenticatedGuard } from './authenticated.guard';
+
+class FakeAuth extends AuthService {
+  readonly isAuthenticated = signal(false);
+  readonly bsn = signal<string | undefined>(undefined);
+  login(): void {
+    /* spied in tests */
+  }
+  logout(): void {
+    /* noop */
+  }
+}
+
+function runGuard(authenticated: boolean) {
+  const auth = new FakeAuth();
+  auth.isAuthenticated.set(authenticated);
+  const loginSpy = vi.spyOn(auth, 'login');
+  TestBed.configureTestingModule({
+    providers: [{ provide: AuthService, useValue: auth }],
+  });
+  const result = TestBed.runInInjectionContext(() =>
+    authenticatedGuard(null as never, null as never),
+  );
+  return { result, loginSpy };
+}
+
+describe('authenticatedGuard', () => {
+  it('allows the route for an authenticated user', () => {
+    const { result, loginSpy } = runGuard(true);
+    expect(result).toBe(true);
+    expect(loginSpy).not.toHaveBeenCalled();
+  });
+
+  it('blocks and starts DigiD login when not authenticated', () => {
+    const { result, loginSpy } = runGuard(false);
+    expect(result).toBe(false);
+    expect(loginSpy).toHaveBeenCalledTimes(1);
+  });
+});

libs/auth/src/lib/authenticated.guard.ts

@@ -0,0 +1,13 @@
+import { inject } from '@angular/core';
+import { CanActivateFn } from '@angular/router';
+import { AuthService } from './auth.service';
+
+/** Allow the route only when a DigiD session is active; otherwise start the login. */
+export const authenticatedGuard: CanActivateFn = () => {
+  const auth = inject(AuthService);
+  if (auth.isAuthenticated()) {
+    return true;
+  }
+  auth.login();
+  return false;
+};

libs/auth/src/lib/digid-auth.providers.ts

@@ -0,0 +1,55 @@
+import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import {
+  authInterceptor,
+  LogLevel,
+  provideAuth,
+  withAppInitializerAuthCheck,
+} from 'angular-auth-oidc-client';
+import { AuthService } from './auth.service';
+import { DigiadAuthService } from './digid-auth.service';
+
+export interface DigiadAuthOptions {
+  /** The Keycloak `digid` realm issuer, as reachable from the browser. */
+  authority: string;
+  /** Where Keycloak redirects back to after login (usually the app origin). */
+  redirectUrl: string;
+  /**
+   * Route prefixes whose requests get the bearer token attached. The api-client calls the BFF with
+   * **relative** URLs (same-origin via the nginx proxy), so these must be relative path prefixes
+   * (e.g. `/self-service/`) — angular-auth-oidc-client matches `req.url.startsWith(route)`, and a
+   * relative `req.url` never starts with an absolute origin.
+   */
+  secureRoutes: string[];
+}
+
+/**
+ * Configure DigiD login (Keycloak `digid` realm, public client `big-portal`, auth-code + PKCE) and
+ * bind {@link AuthService} to the OIDC-backed implementation. Register {@link authInterceptor} in the
+ * app's HttpClient so BFF calls carry the token.
+ */
+export function provideDigiadAuth(options: DigiadAuthOptions): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    provideAuth(
+      {
+        config: {
+          authority: options.authority,
+          redirectUrl: options.redirectUrl,
+          postLogoutRedirectUri: options.redirectUrl,
+          clientId: 'big-portal',
+          scope: 'openid profile',
+          responseType: 'code',
+          silentRenew: true,
+          useRefreshToken: true,
+          secureRoutes: options.secureRoutes,
+          logLevel: LogLevel.Warn,
+        },
+      },
+      // Run checkAuth() at startup so the DigiD callback (?code=…) is processed before the router
+      // and guard run — without it the guard sees "not authenticated" and re-triggers login (loop).
+      withAppInitializerAuthCheck(),
+    ),
+    { provide: AuthService, useClass: DigiadAuthService },
+  ]);
+}
+
+export { authInterceptor };

libs/auth/src/lib/digid-auth.service.ts

@@ -0,0 +1,29 @@
+import { inject, Injectable, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { map } from 'rxjs';
+import { AuthService } from './auth.service';
+
+/** DigiD-backed AuthService over angular-auth-oidc-client (Keycloak `digid` realm). */
+@Injectable()
+export class DigiadAuthService extends AuthService {
+  private readonly oidc = inject(OidcSecurityService);
+
+  readonly isAuthenticated: Signal<boolean> = toSignal(
+    this.oidc.isAuthenticated$.pipe(map((result) => result.isAuthenticated)),
+    { initialValue: false },
+  );
+
+  readonly bsn: Signal<string | undefined> = toSignal(
+    this.oidc.userData$.pipe(map((data) => (data.userData as { bsn?: string } | null)?.bsn)),
+    { initialValue: undefined },
+  );
+
+  override login(): void {
+    this.oidc.authorize();
+  }
+
+  override logout(): void {
+    this.oidc.logoff().subscribe();
+  }
+}

libs/auth/src/test-setup.ts

@@ -0,0 +1,5 @@
+import '@angular/compiler';
+import '@analogjs/vitest-angular/setup-snapshots';
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+
+setupTestBed({ zoneless: false });

libs/auth/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "emitDecoratorMetadata": false,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/auth/tsconfig.lib.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/test-setup.ts"
+  ]
+}

libs/auth/tsconfig.spec.json

@@ -0,0 +1,29 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": ["src/test-setup.ts"]
+}

libs/auth/vite.config.mts

@@ -0,0 +1,28 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/auth',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //   plugins: () => [ nxViteTsPaths() ],
+  // },
+  test: {
+    name: 'auth',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/auth',
+      provider: 'v8' as const,
+    },
+  },
+}));

libs/ui/README.md

@@ -0,0 +1,7 @@
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests.

libs/ui/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/ui/project.json

@@ -0,0 +1,13 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/ui/src/index.ts

@@ -0,0 +1,11 @@
+// NL Design System building blocks — Utrecht is NL DS's reference Angular implementation
+// (docs/frontend-decisions.md). The portals depend on the design system through this one lib.
+// The design tokens/theme CSS is imported once, at the app level (apps/*/src/styles.css).
+//
+// The Utrecht v3 components are NgModule-based (not standalone), so we re-export the module.
+// A standalone component consumes them by importing UtrechtComponentsModule in its `imports`
+// (CLAUDE.md §10 forbids *declaring* NgModules in our code, not consuming a third-party one).
+// Re-export the whole Utrecht package: importing UtrechtComponentsModule pulls every component it
+// exports into the compiler's scope, so the AOT build needs all of them resolvable through this
+// barrel (a partial re-export fails with NG3004 for the first unused component).
+export * from '@utrecht/component-library-angular';

libs/ui/src/lib/ui.spec.ts

@@ -0,0 +1,7 @@
+import { UtrechtComponentsModule } from '../index';
+
+describe('ui barrel', () => {
+  it('re-exports the NL Design System (Utrecht) module', () => {
+    expect(UtrechtComponentsModule).toBeTruthy();
+  });
+});

libs/ui/src/test-setup.ts

@@ -0,0 +1,5 @@
+import '@angular/compiler';
+import '@analogjs/vitest-angular/setup-snapshots';
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+
+setupTestBed({ zoneless: false });

libs/ui/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "emitDecoratorMetadata": false,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/ui/tsconfig.lib.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/test-setup.ts"
+  ]
+}

libs/ui/tsconfig.spec.json

@@ -0,0 +1,29 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": ["src/test-setup.ts"]
+}

libs/ui/vite.config.mts

@@ -0,0 +1,28 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/ui',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //   plugins: () => [ nxViteTsPaths() ],
+  // },
+  test: {
+    name: 'ui',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/ui',
+      provider: 'v8' as const,
+    },
+  },
+}));

package.json

@@ -12,6 +12,9 @@
     "@angular/forms": "21.2.9",
     "@angular/platform-browser": "21.2.9",
     "@angular/router": "21.2.9",
+    "@utrecht/component-library-angular": "^3.0.2",
+    "@utrecht/design-tokens": "^6.2.1",
+    "angular-auth-oidc-client": "^21.0.2",
     "rxjs": "~7.8.0",
     "zone.js": "0.16.0"
   },
@@ -40,11 +43,13 @@
     "@swc-node/register": "1.11.1",
     "@swc/core": "1.15.8",
     "@swc/helpers": "0.5.18",
+    "@testing-library/angular": "^19.4.1",
     "@types/node": "20.19.9",
     "@typescript-eslint/utils": "^8.40.0",
     "@vitest/coverage-v8": "~4.1.0",
     "@vitest/ui": "~4.1.0",
     "angular-eslint": "21.3.1",
+    "axe-core": "^4.12.1",
     "esbuild": "^0.27.0",
     "eslint": "^9.8.0",
     "eslint-config-prettier": "^10.0.0",
@@ -60,6 +65,7 @@
     "typescript-eslint": "^8.40.0",
     "vite": "8.0.9",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "~4.1.0"
+    "vitest": "~4.1.0",
+    "vitest-axe": "^0.1.0"
   }
 }

pnpm-lock.yaml

@@ -29,6 +29,15 @@ importers:
       '@angular/router':
         specifier: 21.2.9
         version: 21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2)
+      '@utrecht/component-library-angular':
+        specifier: ^3.0.2
+        version: 3.0.2
+      '@utrecht/design-tokens':
+        specifier: ^6.2.1
+        version: 6.2.1
+      angular-auth-oidc-client:
+        specifier: ^21.0.2
+        version: 21.0.2(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/router@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2))(rxjs@7.8.2)
       rxjs:
         specifier: ~7.8.0
         version: 7.8.2
@@ -108,6 +117,9 @@ importers:
       '@swc/helpers':
         specifier: 0.5.18
         version: 0.5.18
+      '@testing-library/angular':
+        specifier: ^19.4.1
+        version: 19.4.1(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/router@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2))(@testing-library/dom@10.4.1)
       '@types/node':
         specifier: 20.19.9
         version: 20.19.9
@@ -123,6 +135,9 @@ importers:
       angular-eslint:
         specifier: 21.3.1
         version: 21.3.1(@angular/cli@21.2.7(@types/node@20.19.9)(chokidar@5.0.0))(chokidar@5.0.0)(eslint@9.39.4(jiti@2.4.2))(typescript-eslint@8.62.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(typescript@5.9.3)
+      axe-core:
+        specifier: ^4.12.1
+        version: 4.12.1
       esbuild:
         specifier: ^0.27.0
         version: 0.27.7
@@ -171,6 +186,9 @@ importers:
       vitest:
         specifier: ~4.1.0
         version: 4.1.9(@types/node@20.19.9)(@vitest/coverage-v8@4.1.9)(@vitest/ui@4.1.9)(jsdom@22.1.0)(vite@8.0.9(@types/node@20.19.9)(esbuild@0.27.7)(jiti@2.4.2)(less@4.5.1)(sass-embedded@1.100.0)(sass@1.97.3)(terser@5.48.0)(yaml@2.9.0))
+      vitest-axe:
+        specifier: ^0.1.0
+        version: 0.1.0(vitest@4.1.9)
 
 packages:
 
@@ -1756,6 +1774,9 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource-variable/noto-sans@5.2.10':
+    resolution: {integrity: sha512-wyFgKkFu7jki5kEL8qv7avjQ8rxHX0J/nhLWvbR9T0hOH1HRKZEvb9EW9lMjZfWHHfEzKkYf5J+NadwgCS7TXA==}
+
   '@gar/promise-retry@1.0.3':
     resolution: {integrity: sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -3555,6 +3576,19 @@ packages:
   '@swc/types@0.1.27':
     resolution: {integrity: sha512-K6h3iUlqeM946U4sXFYeahefR1YBbXJvko+hv8WS8/0BNJ4OHiHRywMnQUJCqkR7Y9+hqQ1TvEpiKqUhz7NEFg==}
 
+  '@testing-library/angular@19.4.1':
+    resolution: {integrity: sha512-C9gIfKf3cpkLqNoUy0pbz8/YpmxyFQTZP6Qzo9HrolQPyVSMdc0+ev3vewCouZDyQQwfRkJNlpgjaHHyhL9oqw==}
+    peerDependencies:
+      '@angular/common': '>= 21.0.0'
+      '@angular/core': '>= 21.0.0'
+      '@angular/platform-browser': '>= 21.0.0'
+      '@angular/router': '>= 21.0.0'
+      '@testing-library/dom': ^10.0.0
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
   '@tootallnate/once@2.0.1':
     resolution: {integrity: sha512-HqmEUIGRJ5fSXchkVgR5F7qn48bDBzv0kWj/Kfu5e6uci4UlEeng4331LnBkWffb++Ei3FOVLxo8JJWMFBDMeQ==}
     engines: {node: '>= 10'}
@@ -3588,6 +3622,9 @@ packages:
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -3890,6 +3927,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@utrecht/component-library-angular@3.0.2':
+    resolution: {integrity: sha512-SgCygnsyabXpI2UQPyU9KeuTLfgoEd9pskbmrqd6AwR5SfKEkyoxokZTw9qyDhepSyINvGGlhGSEn8LQ8rOU2A==}
+
+  '@utrecht/design-tokens@6.2.1':
+    resolution: {integrity: sha512-wSh0/uT8FfHM/J3fcN7ZJ80OoJpOXjEdSqLu1higSW6AHW4LYm5ZyeQFFsGcIhGlIYPSjds8ksDpizdgjoab/g==}
+
   '@vitejs/plugin-basic-ssl@2.1.4':
     resolution: {integrity: sha512-HXciTXN/sDBYWgeAD4V4s0DN0g72x5mlxQhHxtYu3Tt8BLa6MzcJZUyDVFCdtjNs3bfENVHVzOsmooTVuNgAAw==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -4096,6 +4139,14 @@ packages:
     resolution: {integrity: sha512-Rf7xmeuIo7nb6S4mp4abW2faW8DauZyE2faBIKFaUfP3wnpOvNSbiI5AwVhqBNj0jPgBWEvhyCu0sLjN2q77Rg==}
     engines: {node: '>= 14.0.0'}
 
+  angular-auth-oidc-client@21.0.2:
+    resolution: {integrity: sha512-e3S8/ylzPXgeiM14GFQ/rxV4q6S+UqYjefHhMooNEDF4FSvZYd/C8VGQUmJFbYSO5IQql9d9seVbDJ5yIxDzEA==}
+    peerDependencies:
+      '@angular/common': '>=20.0.0'
+      '@angular/core': '>=20.0.0'
+      '@angular/router': '>=20.0.0'
+      rxjs: ^6.5.3 || ^7.4.0
+
   angular-eslint@21.3.1:
     resolution: {integrity: sha512-VGQWTyuPAEO/AnZuqHxGBJMYSiZ0tbrHx/OgPCRTKHfbrFU4x+zivS84h9UWoDpDtius1RyD+ZReFjTAEWptiA==}
     peerDependencies:
@@ -4154,6 +4205,9 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -4192,6 +4246,10 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  axe-core@4.12.1:
+    resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
+    engines: {node: '>=4'}
+
   axios@1.16.0:
     resolution: {integrity: sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==}
 
@@ -4819,6 +4877,10 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -4847,6 +4909,9 @@ packages:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -5558,6 +5623,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -6114,6 +6183,9 @@ packages:
     resolution: {integrity: sha512-XT9ewWAC43tiAV7xDAPflMkG0qOPn2QjHqlgX8FOqmWa/rxnyYDulF9T0F7tRy1u+TVTmK/M//6VIOye+2zDXg==}
     engines: {node: '>=20'}
 
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
@@ -6151,6 +6223,10 @@ packages:
   lunr@2.3.9:
     resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -6260,6 +6336,10 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   mini-css-extract-plugin@2.10.0:
     resolution: {integrity: sha512-540P2c5dYnJlyJxTaSloliZexv8rji6rY8FhQN+WF/82iHQfA23j/xtJx97L+mXOML27EqksSek/g4eK7jaL3g==}
     engines: {node: '>= 12.13.0'}
@@ -6984,6 +7064,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   pretty-format@30.4.1:
     resolution: {integrity: sha512-K6KiKMHTL4jjX4u3Kir2EW07nRfcqVTXIImx50wbjHQTcZPgg+gjVeNTIT3l3L1Rd4UefxfogquC9J37SoFyyw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -7061,6 +7145,9 @@ packages:
     resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
     engines: {node: '>= 0.10'}
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -7089,6 +7176,10 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
@@ -7172,6 +7263,9 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  rfc4648@1.5.4:
+    resolution: {integrity: sha512-rRg/6Lb+IGfJqO05HZkN50UtY7K/JhxJag1kP23+zyMfrvoB0B7RWv06MbOzoc79RgCdNTiUaNsTT1AJZ7Z+cg==}
+
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
@@ -7664,6 +7758,10 @@ packages:
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
     engines: {node: '>=18'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -7914,6 +8012,9 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
+  tslib@2.6.3:
+    resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -8168,6 +8269,11 @@ packages:
       yaml:
         optional: true
 
+  vitest-axe@0.1.0:
+    resolution: {integrity: sha512-jvtXxeQPg8R/2ANTY8QicA5pvvdRP4F0FsVUAHANJ46YCDASie/cuhlSzu0DGcLmZvGBSBNsNuK3HqfaeknyvA==}
+    peerDependencies:
+      vitest: '>=0.16.0'
+
   vitest@4.1.9:
     resolution: {integrity: sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -10757,6 +10863,8 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@fontsource-variable/noto-sans@5.2.10': {}
+
   '@gar/promise-retry@1.0.3': {}
 
   '@gerrit0/mini-shiki@3.23.0':
@@ -12885,6 +12993,26 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@testing-library/angular@19.4.1(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/router@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2))(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@angular/common': 21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2)
+      '@angular/core': 21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)
+      '@angular/platform-browser': 21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))
+      '@angular/router': 21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2)
+      '@testing-library/dom': 10.4.1
+      tslib: 2.8.1
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
   '@tootallnate/once@2.0.1': {}
 
   '@ts-morph/common@0.22.0':
@@ -12918,6 +13046,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.7
@@ -13237,6 +13367,14 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
     optional: true
 
+  '@utrecht/component-library-angular@3.0.2':
+    dependencies:
+      tslib: 2.6.3
+
+  '@utrecht/design-tokens@6.2.1':
+    dependencies:
+      '@fontsource-variable/noto-sans': 5.2.10
+
   '@vitejs/plugin-basic-ssl@2.1.4(vite@7.3.2(@types/node@20.19.9)(jiti@2.4.2)(less@4.4.2)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.9.0))':
     dependencies:
       vite: 7.3.2(@types/node@20.19.9)(jiti@2.4.2)(less@4.4.2)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.9.0)
@@ -13503,6 +13641,15 @@ snapshots:
       '@algolia/requester-fetch': 5.48.1
       '@algolia/requester-node-http': 5.48.1
 
+  angular-auth-oidc-client@21.0.2(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/router@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2))(rxjs@7.8.2):
+    dependencies:
+      '@angular/common': 21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2)
+      '@angular/core': 21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)
+      '@angular/router': 21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.2.9(@angular/common@21.2.9(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.2.9(@angular/compiler@21.2.9)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2)
+      rfc4648: 1.5.4
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
   angular-eslint@21.3.1(@angular/cli@21.2.7(@types/node@20.19.9)(chokidar@5.0.0))(chokidar@5.0.0)(eslint@9.39.4(jiti@2.4.2))(typescript-eslint@8.62.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
       '@angular-devkit/core': 21.2.7(chokidar@5.0.0)
@@ -13543,8 +13690,7 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  ansi-styles@5.2.0:
-    optional: true
+  ansi-styles@5.2.0: {}
 
   ansi-styles@6.2.3: {}
 
@@ -13562,6 +13708,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
   aria-query@5.3.2: {}
 
   array-flatten@1.1.1: {}
@@ -13602,6 +13752,8 @@ snapshots:
       postcss: 8.5.16
       postcss-value-parser: 4.2.0
 
+  axe-core@4.12.1: {}
+
   axios@1.16.0:
     dependencies:
       follow-redirects: 1.16.0(debug@4.4.3)
@@ -14329,6 +14481,8 @@ snapshots:
 
   depd@2.0.0: {}
 
+  dequal@2.0.3: {}
+
   destroy@1.2.0: {}
 
   detect-libc@2.1.2: {}
@@ -14348,6 +14502,8 @@ snapshots:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
+  dom-accessibility-api@0.5.16: {}
+
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -15256,6 +15412,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -15960,6 +16118,8 @@ snapshots:
     dependencies:
       p-locate: 6.0.0
 
+  lodash-es@4.18.1: {}
+
   lodash.debounce@4.0.8: {}
 
   lodash.memoize@4.1.2: {}
@@ -15997,6 +16157,8 @@ snapshots:
 
   lunr@2.3.9: {}
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -16116,6 +16278,8 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
+  min-indent@1.0.1: {}
+
   mini-css-extract-plugin@2.10.0(webpack@5.105.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.7)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       schema-utils: 4.3.3
@@ -17035,6 +17199,12 @@ snapshots:
 
   prettier@3.9.4: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   pretty-format@30.4.1:
     dependencies:
       '@jest/schemas': 30.4.1
@@ -17110,6 +17280,8 @@ snapshots:
       iconv-lite: 0.7.2
       unpipe: 1.0.0
 
+  react-is@17.0.2: {}
+
   react-is@18.3.1:
     optional: true
 
@@ -17144,6 +17316,11 @@ snapshots:
 
   readdirp@5.0.0: {}
 
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   reflect-metadata@0.2.2: {}
 
   regenerate-unicode-properties@10.2.2:
@@ -17217,6 +17394,8 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  rfc4648@1.5.4: {}
+
   rfdc@1.4.1: {}
 
   rolldown@1.0.0-rc.16:
@@ -17790,6 +17969,10 @@ snapshots:
 
   strip-final-newline@4.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@3.1.1: {}
 
   style-loader@3.3.4(webpack@5.105.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.7)(lightningcss@1.32.0)(postcss@8.5.6)):
@@ -18035,6 +18218,8 @@ snapshots:
 
   tslib@1.14.1: {}
 
+  tslib@2.6.3: {}
+
   tslib@2.8.1: {}
 
   tsyringe@4.10.0:
@@ -18266,6 +18451,16 @@ snapshots:
       terser: 5.48.0
       yaml: 2.9.0
 
+  vitest-axe@0.1.0(vitest@4.1.9):
+    dependencies:
+      aria-query: 5.3.2
+      axe-core: 4.12.1
+      chalk: 5.6.2
+      dom-accessibility-api: 0.5.16
+      lodash-es: 4.18.1
+      redent: 3.0.0
+      vitest: 4.1.9(@types/node@20.19.9)(@vitest/coverage-v8@4.1.9)(@vitest/ui@4.1.9)(jsdom@22.1.0)(vite@8.0.9(@types/node@20.19.9)(esbuild@0.27.7)(jiti@2.4.2)(less@4.5.1)(sass-embedded@1.100.0)(sass@1.97.3)(terser@5.48.0)(yaml@2.9.0))
+
   vitest@4.1.9(@types/node@20.19.9)(@vitest/coverage-v8@4.1.9)(@vitest/ui@4.1.9)(jsdom@22.1.0)(vite@8.0.9(@types/node@20.19.9)(esbuild@0.27.7)(jiti@2.4.2)(less@4.5.1)(sass-embedded@1.100.0)(sass@1.97.3)(terser@5.48.0)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.9

services/acl/Acl.Api/Program.cs

@@ -20,12 +20,32 @@ app.MapGet("/health", () => "Healthy");
 // The ACL's single operation, exposed as a service endpoint.
 app.MapPost("/zaken", async (OpenZaakRequest body, AclService acl, CancellationToken ct) =>
 {
-    var zaakUrl = await acl.OpenZaakAsync(new DomainRegistration(body.Bsn), ct);
+    var zaakUrl = await acl.OpenZaakAsync(new DomainRegistration(body.Bsn, body.Reference), ct);
     return Results.Ok(new { zaakUrl = zaakUrl.ToString() });
 });
 
+// Approve a zaak: set it to its zaaktype's eindstatus (S-09b). The domain hands over only the zaak
+// URL; the ACL owns the ZGW statustype resolution (§8.1).
+app.MapPost("/statussen", async (SetStatusRequest body, AclService acl, CancellationToken ct) =>
+{
+    await acl.ApproveZaakAsync(new Uri(body.ZaakUrl), ct);
+    return Results.NoContent();
+});
+
+// Read a zaak's public-safe reference (its identificatie). The Event Subscriber calls this to enrich
+// the read projection without reading ZGW itself (§8.1, #78).
+app.MapPost("/zaken/reference", async (ZaakReferenceRequest body, AclService acl, CancellationToken ct) =>
+{
+    var reference = await acl.GetZaakReferenceAsync(new Uri(body.ZaakUrl), ct);
+    return Results.Ok(new { reference });
+});
+
 app.Run();
 
-public sealed record OpenZaakRequest(string Bsn);
+public sealed record OpenZaakRequest(string Bsn, string Reference);
+
+public sealed record SetStatusRequest(string ZaakUrl);
+
+public sealed record ZaakReferenceRequest(string ZaakUrl);
 
 public partial class Program;

services/acl/Acl.Application/AclService.cs

@@ -13,8 +13,28 @@ public sealed class AclService(IZaakGateway gateway, AclDefaults defaults, ICloc
             defaults.VerantwoordelijkeOrganisatie,
             defaults.Vertrouwelijkheidaanduiding,
             defaults.ZaaktypeUrl,
-            clock.Today);
+            clock.Today,
+            registration.Reference);
 
         return gateway.OpenZaakAsync(request, ct);
     }
+
+    /// <summary>
+    /// Approve a zaak: set it to the eindstatus of the configured BIG zaaktype (ADR-0003 default). The
+    /// domain hands over only the zaak URL; the ACL owns which statustype means "approved" (§8.1).
+    /// </summary>
+    public Task ApproveZaakAsync(Uri zaakUrl, CancellationToken ct = default)
+    {
+        ArgumentNullException.ThrowIfNull(zaakUrl);
+
+        return gateway.SetZaakToEindstatusAsync(zaakUrl, defaults.ZaaktypeUrl, clock.Today, ct);
+    }
+
+    /// <summary>The zaak's reference (its ZGW identificatie), for the read projection (#78).</summary>
+    public Task<string> GetZaakReferenceAsync(Uri zaakUrl, CancellationToken ct = default)
+    {
+        ArgumentNullException.ThrowIfNull(zaakUrl);
+
+        return gateway.GetZaakIdentificatieAsync(zaakUrl, ct);
+    }
 }

services/acl/Acl.Application/DomainRegistration.cs

@@ -1,4 +1,5 @@
 namespace Acl.Application;
 
-/// <summary>Domain-language payload handed to the ACL. No ZGW concepts here.</summary>
-public sealed record DomainRegistration(string Bsn);
+/// <summary>Domain-language payload handed to the ACL. No ZGW concepts here. <see cref="Reference"/>
+/// is the registration's own id; the ACL records it as the zaak identificatie (adr-proposal #78).</summary>
+public sealed record DomainRegistration(string Bsn, string Reference);

services/acl/Acl.Application/IZaakGateway.cs

@@ -5,4 +5,15 @@ namespace Acl.Application;
 public interface IZaakGateway
 {
     Task<Uri> OpenZaakAsync(ZaakRequest request, CancellationToken ct = default);
+
+    /// <summary>
+    /// Set the given zaak to the <em>eindstatus</em> (final statustype) of the supplied zaaktype —
+    /// the ZGW translation of "approve". The gateway resolves which statustype is the eindstatus from
+    /// the catalogus and POSTs a status against the zaak, dated <paramref name="datumStatusGezet"/>.
+    /// </summary>
+    Task SetZaakToEindstatusAsync(Uri zaakUrl, Uri zaaktypeUrl, DateOnly datumStatusGezet, CancellationToken ct = default);
+
+    /// <summary>Read the zaak's <c>identificatie</c> — the public-safe reference the register shows.
+    /// The Event Subscriber calls this through the ACL rather than reading ZGW itself (§8.1, #78).</summary>
+    Task<string> GetZaakIdentificatieAsync(Uri zaakUrl, CancellationToken ct = default);
 }

services/acl/Acl.Application/ZaakRequest.cs

@@ -6,4 +6,5 @@ public sealed record ZaakRequest(
     string VerantwoordelijkeOrganisatie,
     string Vertrouwelijkheidaanduiding,
     Uri Zaaktype,
-    DateOnly Startdatum);
+    DateOnly Startdatum,
+    string Identificatie);

services/acl/Acl.Infrastructure/OpenZaakGateway.cs

@@ -20,7 +20,8 @@ public sealed class OpenZaakGateway(HttpClient http, OpenZaakOptions options) :
                 request.Zaaktype.ToString(),
                 request.VerantwoordelijkeOrganisatie,
                 request.Startdatum.ToString("yyyy-MM-dd"),
-                request.Vertrouwelijkheidaanduiding)),
+                request.Vertrouwelijkheidaanduiding,
+                request.Identificatie)),
         };
         message.Headers.Authorization =
             new AuthenticationHeaderValue("Bearer", ZgwToken.Mint(options.ClientId, options.Secret));
@@ -41,13 +42,144 @@ public sealed class OpenZaakGateway(HttpClient http, OpenZaakOptions options) :
         return new Uri(created.Url);
     }
 
+    public async Task SetZaakToEindstatusAsync(Uri zaakUrl, Uri zaaktypeUrl, DateOnly datumStatusGezet, CancellationToken ct = default)
+    {
+        ArgumentNullException.ThrowIfNull(zaakUrl);
+        ArgumentNullException.ThrowIfNull(zaaktypeUrl);
+
+        var eindstatus = await ResolveEindstatusAsync(zaaktypeUrl, ct);
+        var resultaattype = await ResolveResultaattypeAsync(zaaktypeUrl, ct);
+
+        // OpenZaak refuses to set a zaak's eindstatus unless the zaak has a resultaat
+        // ("resultaat-does-not-exist"), so record the resultaat first, then the status.
+        await PostAsync("/zaken/api/v1/resultaten",
+            new ResultaatDto(zaakUrl.ToString(), resultaattype.ToString()), "Setting the zaak resultaat", ct);
+
+        await PostAsync("/zaken/api/v1/statussen",
+            // datumStatusGezet is a ZGW date-time; set it at the start of the given day (UTC).
+            new StatusDto(zaakUrl.ToString(), eindstatus.ToString(),
+                datumStatusGezet.ToDateTime(TimeOnly.MinValue, DateTimeKind.Utc).ToString("yyyy-MM-ddTHH:mm:ssZ")),
+            "Setting the zaak status", ct);
+    }
+
+    public async Task<string> GetZaakIdentificatieAsync(Uri zaakUrl, CancellationToken ct = default)
+    {
+        ArgumentNullException.ThrowIfNull(zaakUrl);
+
+        using var message = new HttpRequestMessage(HttpMethod.Get, zaakUrl);
+        message.Headers.Authorization =
+            new AuthenticationHeaderValue("Bearer", ZgwToken.Mint(options.ClientId, options.Secret));
+        // The zaak is a geo resource; the Zaken API requires the CRS header even on GET.
+        message.Headers.Add("Accept-Crs", "EPSG:4326");
+
+        using var response = await http.SendAsync(message, ct);
+        await EnsureSuccessAsync(response, "Reading the zaak", ct);
+
+        var zaak = await response.Content.ReadFromJsonAsync<ZaakReadDto>(ct)
+            ?? throw new InvalidOperationException("OpenZaak returned an empty zaak response");
+        return zaak.Identificatie;
+    }
+
+    // POSTs a non-geo ZGW resource (resultaat/status — no CRS headers). Buffers the body so uwsgi gets
+    // a Content-Length instead of a chunked body (as with zaak-create).
+    private async Task PostAsync(string path, object dto, string action, CancellationToken ct)
+    {
+        using var message = new HttpRequestMessage(HttpMethod.Post, new Uri(options.BaseUrl, path))
+        {
+            Content = JsonContent.Create(dto),
+        };
+        message.Headers.Authorization =
+            new AuthenticationHeaderValue("Bearer", ZgwToken.Mint(options.ClientId, options.Secret));
+        await message.Content.LoadIntoBufferAsync(ct);
+
+        using var response = await http.SendAsync(message, ct);
+        await EnsureSuccessAsync(response, action, ct);
+    }
+
+    // EnsureSuccessStatusCode discards the response body; ZGW returns a JSON problem detail on 400 that
+    // is essential for diagnosing a rejected request, so surface it in the exception.
+    private static async Task EnsureSuccessAsync(HttpResponseMessage response, string action, CancellationToken ct)
+    {
+        if (response.IsSuccessStatusCode)
+            return;
+
+        var body = await response.Content.ReadAsStringAsync(ct);
+        throw new HttpRequestException($"{action} failed: {(int)response.StatusCode} {response.ReasonPhrase}. {body}");
+    }
+
+    /// <summary>Resolve the zaaktype's eindstatus (the terminal statustype) from the catalogus.</summary>
+    private async Task<Uri> ResolveEindstatusAsync(Uri zaaktypeUrl, CancellationToken ct)
+    {
+        var page = await GetCatalogusAsync<StatustypePage>("statustypen", zaaktypeUrl, "statustypen", ct);
+        var results = page.Results ?? [];
+
+        // OpenZaak flags the terminal statustype (highest volgnummer) as isEindstatus; fall back to the
+        // highest volgnummer if the flag is absent.
+        var eindstatus = results.FirstOrDefault(s => s.IsEindstatus)
+            ?? results.OrderByDescending(s => s.Volgnummer).FirstOrDefault()
+            ?? throw new InvalidOperationException($"No statustypen found for zaaktype {zaaktypeUrl}");
+        return new Uri(eindstatus.Url);
+    }
+
+    /// <summary>Resolve the zaaktype's resultaattype from the catalogus (the seed defines one).</summary>
+    private async Task<Uri> ResolveResultaattypeAsync(Uri zaaktypeUrl, CancellationToken ct)
+    {
+        var page = await GetCatalogusAsync<ResultaattypePage>("resultaattypen", zaaktypeUrl, "resultaattypen", ct);
+        var resultaattype = (page.Results ?? []).FirstOrDefault()
+            ?? throw new InvalidOperationException($"No resultaattypen found for zaaktype {zaaktypeUrl}");
+        return new Uri(resultaattype.Url);
+    }
+
+    // GETs a catalogus collection filtered by zaaktype (status=alles includes concept + published).
+    private async Task<T> GetCatalogusAsync<T>(string resource, Uri zaaktypeUrl, string label, CancellationToken ct)
+    {
+        var query = new Uri(options.BaseUrl,
+            $"/catalogi/api/v1/{resource}?status=alles&zaaktype=" + Uri.EscapeDataString(zaaktypeUrl.ToString()));
+        using var message = new HttpRequestMessage(HttpMethod.Get, query);
+        message.Headers.Authorization =
+            new AuthenticationHeaderValue("Bearer", ZgwToken.Mint(options.ClientId, options.Secret));
+
+        using var response = await http.SendAsync(message, ct);
+        await EnsureSuccessAsync(response, $"Querying {label}", ct);
+
+        return await response.Content.ReadFromJsonAsync<T>(ct)
+            ?? throw new InvalidOperationException($"OpenZaak returned an empty {label} response");
+    }
+
     private sealed record ZaakDto(
         [property: JsonPropertyName("bronorganisatie")] string Bronorganisatie,
         [property: JsonPropertyName("zaaktype")] string Zaaktype,
         [property: JsonPropertyName("verantwoordelijkeOrganisatie")] string VerantwoordelijkeOrganisatie,
         [property: JsonPropertyName("startdatum")] string Startdatum,
-        [property: JsonPropertyName("vertrouwelijkheidaanduiding")] string Vertrouwelijkheidaanduiding);
+        [property: JsonPropertyName("vertrouwelijkheidaanduiding")] string Vertrouwelijkheidaanduiding,
+        [property: JsonPropertyName("identificatie")] string Identificatie);
 
     private sealed record ZaakCreatedDto(
         [property: JsonPropertyName("url")] string Url);
+
+    private sealed record ZaakReadDto(
+        [property: JsonPropertyName("identificatie")] string Identificatie);
+
+    private sealed record StatusDto(
+        [property: JsonPropertyName("zaak")] string Zaak,
+        [property: JsonPropertyName("statustype")] string Statustype,
+        [property: JsonPropertyName("datumStatusGezet")] string DatumStatusGezet);
+
+    private sealed record StatustypePage(
+        [property: JsonPropertyName("results")] IReadOnlyList<StatustypeDto>? Results);
+
+    private sealed record StatustypeDto(
+        [property: JsonPropertyName("url")] string Url,
+        [property: JsonPropertyName("volgnummer")] int Volgnummer,
+        [property: JsonPropertyName("isEindstatus")] bool IsEindstatus);
+
+    private sealed record ResultaatDto(
+        [property: JsonPropertyName("zaak")] string Zaak,
+        [property: JsonPropertyName("resultaattype")] string Resultaattype);
+
+    private sealed record ResultaattypePage(
+        [property: JsonPropertyName("results")] IReadOnlyList<ResultaattypeDto>? Results);
+
+    private sealed record ResultaattypeDto(
+        [property: JsonPropertyName("url")] string Url);
 }

services/acl/Acl.IntegrationTests/OpenZaakFixture.cs

@@ -65,6 +65,43 @@ public sealed class OpenZaakFixture : IDisposable
         return JsonDocument.Parse(json).RootElement.Clone();
     }
 
+    /// <summary>GETs a non-geo ZGW resource (e.g. a status) by URL — no CRS headers.</summary>
+    public async Task<JsonElement> GetJsonAsync(Uri url, CancellationToken ct = default)
+    {
+        using var message = new HttpRequestMessage(HttpMethod.Get, url);
+        message.Headers.Authorization = new AuthenticationHeaderValue("Bearer", MintToken());
+
+        using var response = await Http.SendAsync(message, ct);
+        response.EnsureSuccessStatusCode();
+        var json = await response.Content.ReadAsStringAsync(ct);
+        return JsonDocument.Parse(json).RootElement.Clone();
+    }
+
+    /// <summary>The zaaktype's eindstatus (terminal statustype) URL — the one an approval sets.</summary>
+    public async Task<Uri> FindEindstatustypeAsync(Uri zaaktypeUrl, CancellationToken ct = default)
+    {
+        var query = new Uri(BaseUrl,
+            "/catalogi/api/v1/statustypen?status=alles&zaaktype=" + Uri.EscapeDataString(zaaktypeUrl.ToString()));
+        var page = await GetJsonAsync(query, ct);
+        var results = page.GetProperty("results");
+
+        Uri? fallback = null;
+        var highest = int.MinValue;
+        foreach (var st in results.EnumerateArray())
+        {
+            if (st.TryGetProperty("isEindstatus", out var eind) && eind.GetBoolean())
+                return new Uri(st.GetProperty("url").GetString()!);
+            var volgnummer = st.GetProperty("volgnummer").GetInt32();
+            if (volgnummer > highest)
+            {
+                highest = volgnummer;
+                fallback = new Uri(st.GetProperty("url").GetString()!);
+            }
+        }
+
+        return fallback ?? throw new InvalidOperationException($"No statustypen for zaaktype {zaaktypeUrl}");
+    }
+
     // A ZGW (vng-api-common) HS256 JWT, mirroring the seed's client. Minted here
     // rather than reusing Acl.Infrastructure's internal minter to keep that internal.
     private string MintToken()

services/acl/Acl.IntegrationTests/OpenZaakGatewayIntegrationTests.cs

@@ -22,12 +22,14 @@ public sealed class OpenZaakGatewayIntegrationTests(OpenZaakFixture stack)
             "seed it with OZ_PUBLISH=1 (`make integration` does this).");
 
         var gateway = new OpenZaakGateway(stack.Http, stack.Options);
+        var reference = Guid.NewGuid().ToString(); // zaak identificatie must be unique per bronorganisatie
         var request = new ZaakRequest(
             Bronorganisatie: "517439943",
             VerantwoordelijkeOrganisatie: "517439943",
             Vertrouwelijkheidaanduiding: "openbaar",
             Zaaktype: zaaktype!,
-            Startdatum: DateOnly.FromDateTime(DateTime.UtcNow));
+            Startdatum: DateOnly.FromDateTime(DateTime.UtcNow),
+            Identificatie: reference);
 
         var zaakUrl = await gateway.OpenZaakAsync(request);
 
@@ -36,10 +38,40 @@ public sealed class OpenZaakGatewayIntegrationTests(OpenZaakFixture stack)
             new Uri(stack.BaseUrl, "/zaken/api/v1/zaken/").ToString(),
             zaakUrl.ToString());
 
-        // ...and that zaak is really persisted with the default-filled fields.
+        // ...and that zaak is really persisted with the default-filled fields + the reference identificatie.
         var zaak = await stack.GetZaakAsync(zaakUrl);
         Assert.Equal(zaaktype.ToString(), zaak.GetProperty("zaaktype").GetString());
         Assert.Equal("517439943", zaak.GetProperty("bronorganisatie").GetString());
         Assert.Equal("openbaar", zaak.GetProperty("vertrouwelijkheidaanduiding").GetString());
+        Assert.Equal(reference, zaak.GetProperty("identificatie").GetString());
+    }
+
+    [Fact]
+    public async Task Setting_a_zaak_to_its_eindstatus_records_the_terminal_statustype()
+    {
+        var zaaktype = await stack.FindPublishedBigZaaktypeAsync();
+        Assert.True(zaaktype is not null,
+            "No published BIG-REGISTRATIE zaaktype found in OpenZaak — bring the stack up and " +
+            "seed it with OZ_PUBLISH=1 (`make integration` does this).");
+
+        var gateway = new OpenZaakGateway(stack.Http, stack.Options);
+        var zaakUrl = await gateway.OpenZaakAsync(new ZaakRequest(
+            Bronorganisatie: "517439943",
+            VerantwoordelijkeOrganisatie: "517439943",
+            Vertrouwelijkheidaanduiding: "openbaar",
+            Zaaktype: zaaktype!,
+            Startdatum: DateOnly.FromDateTime(DateTime.UtcNow),
+            Identificatie: Guid.NewGuid().ToString()));
+
+        await gateway.SetZaakToEindstatusAsync(zaakUrl, zaaktype!, DateOnly.FromDateTime(DateTime.UtcNow));
+
+        // The zaak now carries a current status, and it is the zaaktype's eindstatus.
+        var zaak = await stack.GetZaakAsync(zaakUrl);
+        var statusUrl = zaak.GetProperty("status").GetString();
+        Assert.False(string.IsNullOrEmpty(statusUrl), "the approved zaak has no current status");
+
+        var status = await stack.GetJsonAsync(new Uri(statusUrl!));
+        var eindstatustype = await stack.FindEindstatustypeAsync(zaaktype!);
+        Assert.Equal(eindstatustype.ToString(), status.GetProperty("statustype").GetString());
     }
 }

services/acl/Acl.Tests/AclServiceTests.cs

@@ -9,13 +9,37 @@ public class AclServiceTests
         public ZaakRequest? Captured;
         public Uri Result { get; } = new("http://openzaak/zaken/api/v1/zaken/abc");
 
+        public (Uri Zaak, Uri Zaaktype, DateOnly Datum)? Approved;
+
         public Task<Uri> OpenZaakAsync(ZaakRequest request, CancellationToken ct = default)
         {
             Captured = request;
             return Task.FromResult(Result);
         }
+
+        public Task SetZaakToEindstatusAsync(Uri zaakUrl, Uri zaaktypeUrl, DateOnly datumStatusGezet, CancellationToken ct = default)
+        {
+            Approved = (zaakUrl, zaaktypeUrl, datumStatusGezet);
+            return Task.CompletedTask;
+        }
+
+        public Uri? ReadReferenceFor;
+
+        public Task<string> GetZaakIdentificatieAsync(Uri zaakUrl, CancellationToken ct = default)
+        {
+            ReadReferenceFor = zaakUrl;
+            return Task.FromResult("REG-FROM-ZAAK");
+        }
     }
 
+    private static AclDefaults Defaults() => new()
+    {
+        Bronorganisatie = "517439943",
+        VerantwoordelijkeOrganisatie = "517439943",
+        Vertrouwelijkheidaanduiding = "openbaar",
+        ZaaktypeUrl = new("http://openzaak/catalogi/api/v1/zaaktypen/big"),
+    };
+
     private sealed class FixedClock(DateOnly today) : IClock
     {
         public DateOnly Today { get; } = today;
@@ -34,7 +58,7 @@ public class AclServiceTests
         };
         var service = new AclService(gateway, defaults, new FixedClock(new DateOnly(2026, 6, 4)));
 
-        var url = await service.OpenZaakAsync(new DomainRegistration("123456782"));
+        var url = await service.OpenZaakAsync(new DomainRegistration("123456782", "reg-77"));
 
         Assert.Equal(gateway.Result, url);
         var req = Assert.IsType<ZaakRequest>(gateway.Captured);
@@ -43,6 +67,8 @@ public class AclServiceTests
         Assert.Equal("openbaar", req.Vertrouwelijkheidaanduiding);
         Assert.Equal(defaults.ZaaktypeUrl, req.Zaaktype);
         Assert.Equal(new DateOnly(2026, 6, 4), req.Startdatum);
+        // The registration reference becomes the zaak identificatie (#78).
+        Assert.Equal("reg-77", req.Identificatie);
     }
 
     [Fact]
@@ -61,4 +87,53 @@ public class AclServiceTests
         await Assert.ThrowsAsync<ArgumentNullException>(() => service.OpenZaakAsync(null!));
         Assert.Null(gateway.Captured);
     }
+
+    [Fact]
+    public async Task Approving_a_zaak_sets_it_to_its_zaaktypes_eindstatus_dated_today()
+    {
+        var gateway = new FakeGateway();
+        var defaults = Defaults();
+        var service = new AclService(gateway, defaults, new FixedClock(new DateOnly(2026, 6, 4)));
+        var zaak = new Uri("http://openzaak/zaken/api/v1/zaken/abc");
+
+        await service.ApproveZaakAsync(zaak);
+
+        Assert.NotNull(gateway.Approved);
+        Assert.Equal(zaak, gateway.Approved!.Value.Zaak);
+        Assert.Equal(defaults.ZaaktypeUrl, gateway.Approved.Value.Zaaktype);
+        Assert.Equal(new DateOnly(2026, 6, 4), gateway.Approved.Value.Datum);
+    }
+
+    [Fact]
+    public async Task Approving_a_null_zaak_is_rejected_without_touching_the_gateway()
+    {
+        var gateway = new FakeGateway();
+        var service = new AclService(gateway, Defaults(), new FixedClock(new DateOnly(2026, 6, 4)));
+
+        await Assert.ThrowsAsync<ArgumentNullException>(() => service.ApproveZaakAsync(null!));
+        Assert.Null(gateway.Approved);
+    }
+
+    [Fact]
+    public async Task Reading_a_zaak_reference_returns_the_zaaks_identificatie()
+    {
+        var gateway = new FakeGateway();
+        var service = new AclService(gateway, Defaults(), new FixedClock(new DateOnly(2026, 6, 4)));
+        var zaak = new Uri("http://openzaak/zaken/api/v1/zaken/abc");
+
+        var reference = await service.GetZaakReferenceAsync(zaak);
+
+        Assert.Equal("REG-FROM-ZAAK", reference);
+        Assert.Equal(zaak, gateway.ReadReferenceFor);
+    }
+
+    [Fact]
+    public async Task Reading_a_null_zaak_reference_is_rejected()
+    {
+        var gateway = new FakeGateway();
+        var service = new AclService(gateway, Defaults(), new FixedClock(new DateOnly(2026, 6, 4)));
+
+        await Assert.ThrowsAsync<ArgumentNullException>(() => service.GetZaakReferenceAsync(null!));
+        Assert.Null(gateway.ReadReferenceFor);
+    }
 }

services/acl/Acl.Tests/OpenZaakGatewayTests.cs

@@ -22,7 +22,7 @@ public class OpenZaakGatewayTests
 
     private static ZaakRequest SampleRequest() => new(
         "517439943", "517439943", "openbaar",
-        new("http://openzaak/catalogi/api/v1/zaaktypen/big"), new DateOnly(2026, 6, 4));
+        new("http://openzaak/catalogi/api/v1/zaaktypen/big"), new DateOnly(2026, 6, 4), "REG-REF-1");
 
     private static StubHandler Created(out RequestCapture capture)
     {
@@ -67,6 +67,8 @@ public class OpenZaakGatewayTests
         Assert.Contains("\"vertrouwelijkheidaanduiding\":\"openbaar\"", capture.Body);
         Assert.Contains("\"startdatum\":\"2026-06-04\"", capture.Body);
         Assert.Contains("\"zaaktype\":\"http://openzaak/catalogi/api/v1/zaaktypen/big\"", capture.Body);
+        // The registration reference is set as the zaak identificatie (#78).
+        Assert.Contains("\"identificatie\":\"REG-REF-1\"", capture.Body);
     }
 
     [Fact]
@@ -131,8 +133,9 @@ public class OpenZaakGatewayTests
                 Content = new StringContent("null", Encoding.UTF8, "application/json"),
             }));
 
-        await Assert.ThrowsAsync<InvalidOperationException>(
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(
             () => Gateway(handler).OpenZaakAsync(SampleRequest()));
+        Assert.Contains("empty zaak response", ex.Message);
     }
 
     [Fact]
@@ -144,6 +147,284 @@ public class OpenZaakGatewayTests
             () => Gateway(handler).OpenZaakAsync(null!));
     }
 
+    // --- SetZaakToEindstatusAsync (approval / S-09b) ---
+
+    private const string ZaakUrl = "http://openzaak/zaken/api/v1/zaken/xyz";
+    private static readonly Uri Zaaktype = new("http://openzaak/catalogi/api/v1/zaaktypen/big");
+
+    private sealed class Recorder
+    {
+        public List<HttpRequestMessage> Requests { get; } = [];
+        public List<string?> Bodies { get; } = [];
+        public List<long?> ContentLengths { get; } = [];
+
+        public int IndexOf(string pathContains) =>
+            Requests.FindIndex(r => r.RequestUri!.ToString().Contains(pathContains));
+
+        // The (body, content-length, request) of the single request whose URL contains the segment.
+        public (string? Body, long? Length, HttpRequestMessage Request) Sent(string pathContains)
+        {
+            var i = IndexOf(pathContains);
+            return (Bodies[i], ContentLengths[i], Requests[i]);
+        }
+    }
+
+    // Per-route response config for the four calls the approval makes.
+    private sealed class OzRoutes
+    {
+        public string StatustypenJson { get; init; } = StatustypenPage(withEindstatusFlag: true);
+        public string ResultaattypenJson { get; init; } = """{"results":[{"url":"http://openzaak/catalogi/api/v1/resultaattypen/1"}]}""";
+        public HttpStatusCode StatustypenStatus { get; init; } = HttpStatusCode.OK;
+        public HttpStatusCode ResultaattypenStatus { get; init; } = HttpStatusCode.OK;
+        public HttpStatusCode ResultaatPostStatus { get; init; } = HttpStatusCode.Created;
+        public HttpStatusCode StatusPostStatus { get; init; } = HttpStatusCode.Created;
+    }
+
+    // Routes the approval's four calls by URL: GET /statustypen, GET /resultaattypen (catalogus),
+    // then POST /resultaten and POST /statussen (zaken).
+    private static StubHandler ApprovalStub(Recorder rec, OzRoutes routes) => new(async req =>
+    {
+        rec.Requests.Add(req);
+        // Capture the length BEFORE reading the body (ReadAsStringAsync buffers as a side effect).
+        rec.ContentLengths.Add(req.Content?.Headers.ContentLength);
+        rec.Bodies.Add(req.Content is null ? null : await req.Content.ReadAsStringAsync());
+
+        var url = req.RequestUri!.ToString();
+        if (req.Method == HttpMethod.Get && url.Contains("/statustypen"))
+            return Json(routes.StatustypenStatus, routes.StatustypenJson);
+        if (req.Method == HttpMethod.Get && url.Contains("/resultaattypen"))
+            return Json(routes.ResultaattypenStatus, routes.ResultaattypenJson);
+        if (url.Contains("/resultaten"))
+            return Json(routes.ResultaatPostStatus, """{"url":"http://openzaak/zaken/api/v1/resultaten/new"}""");
+        return Json(routes.StatusPostStatus, """{"url":"http://openzaak/zaken/api/v1/statussen/new"}""");
+    });
+
+    private static HttpResponseMessage Json(HttpStatusCode status, string body) =>
+        new(status) { Content = new StringContent(body, Encoding.UTF8, "application/json") };
+
+    // Two statustypen; the eindstatus is flagged on the *lower* volgnummer so the tests prove the
+    // isEindstatus flag is preferred over "highest volgnummer", not coincidentally equal to it.
+    private static string StatustypenPage(bool withEindstatusFlag) => JsonSerializer.Serialize(new
+    {
+        results = new object[]
+        {
+            new { url = "http://openzaak/catalogi/api/v1/statustypen/1", volgnummer = 1, isEindstatus = withEindstatusFlag },
+            new { url = "http://openzaak/catalogi/api/v1/statustypen/2", volgnummer = 2, isEindstatus = false },
+        },
+    });
+
+    [Fact]
+    public async Task Approving_sets_a_resultaat_then_posts_the_flagged_eindstatus_against_the_zaak()
+    {
+        var rec = new Recorder();
+
+        await Gateway(ApprovalStub(rec, new OzRoutes()))
+            .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4));
+
+        Assert.Equal(4, rec.Requests.Count);
+
+        // Both catalogus queries filter by the zaaktype and carry the bearer.
+        var statustypenGet = rec.Sent("/statustypen").Request;
+        Assert.Equal(HttpMethod.Get, statustypenGet.Method);
+        Assert.Contains(Uri.EscapeDataString(Zaaktype.ToString()), statustypenGet.RequestUri!.ToString());
+        Assert.Equal("Bearer", statustypenGet.Headers.Authorization!.Scheme);
+        Assert.Contains(Uri.EscapeDataString(Zaaktype.ToString()), rec.Sent("/resultaattypen").Request.RequestUri!.ToString());
+
+        // OpenZaak requires a resultaat before the eindstatus, so /resultaten precedes /statussen.
+        Assert.True(rec.IndexOf("/resultaten") < rec.IndexOf("/statussen"));
+
+        var resultaat = rec.Sent("/resultaten");
+        Assert.Equal("http://openzaak/zaken/api/v1/resultaten", resultaat.Request.RequestUri!.ToString());
+        Assert.Equal("Bearer", resultaat.Request.Headers.Authorization!.Scheme);
+        Assert.Contains("\"zaak\":\"" + ZaakUrl + "\"", resultaat.Body);
+        Assert.Contains("\"resultaattype\":\"http://openzaak/catalogi/api/v1/resultaattypen/1\"", resultaat.Body);
+        Assert.True(resultaat.Length > 0);
+
+        var status = rec.Sent("/statussen");
+        Assert.Equal("http://openzaak/zaken/api/v1/statussen", status.Request.RequestUri!.ToString());
+        Assert.Equal("Bearer", status.Request.Headers.Authorization!.Scheme);
+        Assert.Contains("\"zaak\":\"" + ZaakUrl + "\"", status.Body);
+        // The isEindstatus-flagged statustype (/1) is chosen — even though /2 has a higher volgnummer.
+        Assert.Contains("\"statustype\":\"http://openzaak/catalogi/api/v1/statustypen/1\"", status.Body);
+        Assert.Contains("\"datumStatusGezet\":\"2026-06-04T00:00:00Z\"", status.Body);
+        // Bodies are buffered (Content-Length set), so uwsgi doesn't get a chunked body.
+        Assert.True(status.Length > 0);
+    }
+
+    [Fact]
+    public async Task Approving_falls_back_to_the_highest_volgnummer_when_no_eindstatus_is_flagged()
+    {
+        var rec = new Recorder();
+
+        await Gateway(ApprovalStub(rec, new OzRoutes { StatustypenJson = StatustypenPage(withEindstatusFlag: false) }))
+            .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4));
+
+        // No isEindstatus flag → the highest volgnummer (/2) is chosen.
+        Assert.Contains("\"statustype\":\"http://openzaak/catalogi/api/v1/statustypen/2\"", rec.Sent("/statussen").Body);
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_the_zaaktype_has_no_statustypen()
+    {
+        var rec = new Recorder();
+
+        // A page with no `results` property (Results is null) — the eindstatus cannot be resolved.
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { StatustypenJson = "{}" }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("No statustypen found", ex.Message);
+        // It never posts anything when it cannot resolve the eindstatus.
+        Assert.Single(rec.Requests);
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_the_statustypen_response_is_empty()
+    {
+        var rec = new Recorder();
+
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { StatustypenJson = "null" }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("empty statustypen", ex.Message);
+        Assert.Single(rec.Requests);
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_the_statustypen_query_fails()
+    {
+        var rec = new Recorder();
+
+        var ex = await Assert.ThrowsAsync<HttpRequestException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { StatustypenStatus = HttpStatusCode.InternalServerError }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("Querying statustypen", ex.Message);
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_the_resultaattypen_query_fails()
+    {
+        var rec = new Recorder();
+
+        var ex = await Assert.ThrowsAsync<HttpRequestException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { ResultaattypenStatus = HttpStatusCode.InternalServerError }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("Querying resultaattypen", ex.Message);
+        Assert.Equal(-1, rec.IndexOf("/resultaten"));
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_the_zaaktype_has_no_resultaattype()
+    {
+        var rec = new Recorder();
+
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { ResultaattypenJson = "{}" }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("No resultaattypen found", ex.Message);
+        // Resolved the eindstatus + queried resultaattypen, but posted nothing.
+        Assert.Equal(-1, rec.IndexOf("/resultaten"));
+        Assert.Equal(-1, rec.IndexOf("/statussen"));
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_posting_the_resultaat_fails()
+    {
+        var rec = new Recorder();
+
+        var ex = await Assert.ThrowsAsync<HttpRequestException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { ResultaatPostStatus = HttpStatusCode.BadRequest }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("Setting the zaak resultaat", ex.Message);
+        // The status is never posted if the resultaat could not be recorded.
+        Assert.Equal(-1, rec.IndexOf("/statussen"));
+    }
+
+    [Fact]
+    public async Task Approving_throws_when_posting_the_status_fails()
+    {
+        var rec = new Recorder();
+
+        var ex = await Assert.ThrowsAsync<HttpRequestException>(() =>
+            Gateway(ApprovalStub(rec, new OzRoutes { StatusPostStatus = HttpStatusCode.BadRequest }))
+                .SetZaakToEindstatusAsync(new Uri(ZaakUrl), Zaaktype, new DateOnly(2026, 6, 4)));
+
+        Assert.Contains("Setting the zaak status", ex.Message);
+        // It got as far as the resultaat + the status POST (4 calls) before failing.
+        Assert.Equal(4, rec.Requests.Count);
+    }
+
+    [Fact]
+    public async Task Reading_a_zaak_returns_its_identificatie_with_bearer_and_crs()
+    {
+        RequestCapture? capture = null;
+        var handler = new StubHandler(req =>
+        {
+            capture = new RequestCapture { Seen = req };
+            return Task.FromResult(new HttpResponseMessage(HttpStatusCode.OK)
+            {
+                Content = JsonContent.Create(new { identificatie = "REG-XYZ", url = ZaakUrl }),
+            });
+        });
+
+        var reference = await Gateway(handler).GetZaakIdentificatieAsync(new Uri(ZaakUrl));
+
+        Assert.Equal("REG-XYZ", reference);
+        Assert.Equal(HttpMethod.Get, capture!.Seen!.Method);
+        Assert.Equal(ZaakUrl, capture.Seen.RequestUri!.ToString());
+        Assert.Equal("Bearer", capture.Seen.Headers.Authorization!.Scheme);
+        Assert.Equal("EPSG:4326", Assert.Single(capture.Seen.Headers.GetValues("Accept-Crs")));
+    }
+
+    [Fact]
+    public async Task Reading_a_zaak_throws_when_openzaak_rejects_it()
+    {
+        var handler = new StubHandler(_ =>
+            Task.FromResult(new HttpResponseMessage(HttpStatusCode.NotFound) { Content = new StringContent("nope") }));
+
+        var ex = await Assert.ThrowsAsync<HttpRequestException>(
+            () => Gateway(handler).GetZaakIdentificatieAsync(new Uri(ZaakUrl)));
+        Assert.Contains("Reading the zaak", ex.Message);
+    }
+
+    [Fact]
+    public async Task Reading_a_zaak_throws_when_openzaak_returns_an_empty_body()
+    {
+        var handler = new StubHandler(_ =>
+            Task.FromResult(new HttpResponseMessage(HttpStatusCode.OK)
+            {
+                Content = new StringContent("null", System.Text.Encoding.UTF8, "application/json"),
+            }));
+
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(
+            () => Gateway(handler).GetZaakIdentificatieAsync(new Uri(ZaakUrl)));
+        Assert.Contains("empty zaak response", ex.Message);
+    }
+
+    [Fact]
+    public async Task Reading_a_null_zaak_is_rejected()
+    {
+        var handler = new StubHandler(_ => throw new InvalidOperationException("should not be sent"));
+
+        await Assert.ThrowsAsync<ArgumentNullException>(() => Gateway(handler).GetZaakIdentificatieAsync(null!));
+    }
+
+    [Fact]
+    public async Task Approving_rejects_a_null_zaak_or_zaaktype()
+    {
+        var handler = new StubHandler(_ => throw new InvalidOperationException("should not be sent"));
+
+        await Assert.ThrowsAsync<ArgumentNullException>(() =>
+            Gateway(handler).SetZaakToEindstatusAsync(null!, Zaaktype, new DateOnly(2026, 6, 4)));
+        await Assert.ThrowsAsync<ArgumentNullException>(() =>
+            Gateway(handler).SetZaakToEindstatusAsync(new Uri(ZaakUrl), null!, new DateOnly(2026, 6, 4)));
+    }
+
     // ZGW tokens are base64url with padding stripped (ZgwToken.B64Url); restore it to decode.
     private static string DecodeSegment(string segment)
     {

services/bff/Bff.Api/DownstreamClients.cs

@@ -6,11 +6,12 @@ namespace Bff.Api;
 public sealed record SubmitAccepted(string RegistrationId, string Status);
 
 /// <summary>A projection row as the projection-api serves it. <c>Bsn</c>/<c>NaamPlaceholder</c> are
-/// read but never surfaced by the openbaar endpoint (public-safe filtering, ADR-0010/S-09).</summary>
-public sealed record ProjectionEntry(string Id, string Status, string? Bsn, string? NaamPlaceholder);
+/// read but never surfaced by the openbaar endpoint (public-safe filtering, ADR-0010/S-09).
+/// <c>Reference</c> is the public-safe citizen reference (the zaak identificatie, #78).</summary>
+public sealed record ProjectionEntry(string Id, string Status, string? Reference, string? Bsn, string? NaamPlaceholder);
 
 /// <summary>A public-safe openbaar register row — only non-sensitive fields leave the BFF.</summary>
-public sealed record OpenbaarEntry(string Id, string Status);
+public sealed record OpenbaarEntry(string Id, string Status, string? Reference);
 
 /// <summary>Port to the Domain Service (§8.3: the BFF is the portals' only backend; it fans out).</summary>
 public interface IDomainClient

services/bff/Bff.Api/OpenbaarProjection.cs

@@ -11,8 +11,10 @@ public static class OpenbaarProjection
     {
         var filtered = string.IsNullOrWhiteSpace(q)
             ? entries
-            : entries.Where(e => e.Id.Contains(q, StringComparison.OrdinalIgnoreCase));
+            : entries.Where(e =>
+                e.Id.Contains(q, StringComparison.OrdinalIgnoreCase) ||
+                (e.Reference?.Contains(q, StringComparison.OrdinalIgnoreCase) ?? false));
 
-        return [.. filtered.Select(e => new OpenbaarEntry(e.Id, e.Status))];
+        return [.. filtered.Select(e => new OpenbaarEntry(e.Id, e.Status, e.Reference))];
     }
 }

services/bff/Bff.Tests/OpenbaarEndpointTests.cs

@@ -10,7 +10,7 @@ public class OpenbaarEndpointTests
     public async Task Serves_public_safe_rows_anonymously()
     {
         using var factory = new BffFactory();
-        factory.Projection.Entries.Add(new ProjectionEntry("abc-111", "INGEDIEND", "123456782", "Jan"));
+        factory.Projection.Entries.Add(new ProjectionEntry("abc-111", "INGEDIEND", "REG-abc", "123456782", "Jan"));
 
         // No Authorization header — the openbaar register is a public lookup (ADR-0010/S-09).
         var response = await factory.CreateClient().GetAsync("/openbaar/register");
@@ -19,7 +19,9 @@ public class OpenbaarEndpointTests
         var body = await response.Content.ReadAsStringAsync();
         Assert.Contains("abc-111", body);
         Assert.Contains("INGEDIEND", body);
-        // The bsn must never appear in a public response.
+        // The public reference is surfaced (matches the submit confirmation, #78)...
+        Assert.Contains("REG-abc", body);
+        // ...but the bsn must never appear in a public response.
         Assert.DoesNotContain("123456782", body);
     }
 
@@ -27,8 +29,8 @@ public class OpenbaarEndpointTests
     public async Task Filters_by_the_query_parameter()
     {
         using var factory = new BffFactory();
-        factory.Projection.Entries.Add(new ProjectionEntry("abc-111", "INGEDIEND", null, null));
-        factory.Projection.Entries.Add(new ProjectionEntry("def-222", "INGEDIEND", null, null));
+        factory.Projection.Entries.Add(new ProjectionEntry("abc-111", "INGEDIEND", "REG-abc", null, null));
+        factory.Projection.Entries.Add(new ProjectionEntry("def-222", "INGEDIEND", "REG-def", null, null));
 
         var rows = await factory.CreateClient()
             .GetFromJsonAsync<List<OpenbaarEntry>>("/openbaar/register?q=abc");

services/bff/Bff.Tests/OpenbaarProjectionTests.cs

@@ -6,8 +6,8 @@ public class OpenbaarProjectionTests
 {
     private static readonly ProjectionEntry[] Sample =
     [
-        new("abc-111", "INGEDIEND", "123456782", "Jan"),
-        new("def-222", "INGEDIEND", "987654321", "Piet"),
+        new("abc-111", "INGEDIEND", Reference: "REG-A", Bsn: "123456782", NaamPlaceholder: "Jan"),
+        new("def-222", "INGESCHREVEN", Reference: "REG-B", Bsn: "987654321", NaamPlaceholder: "Piet"),
     ];
 
     [Fact]
@@ -18,31 +18,47 @@ public class OpenbaarProjectionTests
         Assert.Equal(2, view.Count);
         Assert.Equal("abc-111", view[0].Id);
         Assert.Equal("INGEDIEND", view[0].Status);
+        // The public reference (zaak identificatie) is surfaced so it matches the submit confirmation (#78).
+        Assert.Equal("REG-A", view[0].Reference);
     }
 
     [Fact]
-    public void Public_view_exposes_only_id_and_status()
+    public void Public_view_exposes_only_id_status_and_reference()
     {
-        // OpenbaarEntry structurally carries only Id + Status — bsn/naam can never leak.
+        // OpenbaarEntry structurally carries only public-safe fields — bsn/naam can never leak.
         var props = typeof(OpenbaarEntry).GetProperties().Select(p => p.Name).ToArray();
-        Assert.Equal(["Id", "Status"], props);
+        Assert.Equal(["Id", "Status", "Reference"], props);
     }
 
     [Theory]
-    [InlineData("abc", 1)]
-    [InlineData("ABC", 1)]
-    [InlineData("2", 1)]
-    [InlineData("zzz", 0)]
+    [InlineData("abc", 1)]   // by id
+    [InlineData("ABC", 1)]   // by id, case-insensitive
+    [InlineData("def", 1)]   // by id
+    [InlineData("zzz", 0)]   // no match
     public void Filters_by_id_containing_the_query_case_insensitively(string q, int expected)
-    {
-        var view = OpenbaarProjection.PublicView(Sample, q);
+        => Assert.Equal(expected, OpenbaarProjection.PublicView(Sample, q).Count);
 
-        Assert.Equal(expected, view.Count);
-    }
+    [Theory]
+    [InlineData("REG-A", 1)] // by reference — the citizen's confirmation reference
+    [InlineData("reg-a", 1)] // by reference, case-insensitive
+    [InlineData("REG", 2)]   // both share the prefix
+    public void Filters_by_reference_containing_the_query_case_insensitively(string q, int expected)
+        => Assert.Equal(expected, OpenbaarProjection.PublicView(Sample, q).Count);
 
     [Fact]
     public void Blank_query_is_treated_as_no_filter()
     {
         Assert.Equal(2, OpenbaarProjection.PublicView(Sample, "   ").Count);
     }
+
+    [Fact]
+    public void A_row_without_a_reference_never_matches_a_query()
+    {
+        // Older rows can have a null reference (the column is additive, #78/ADR-0012). A search must
+        // simply not match them — it must not throw and must not treat "no reference" as a match.
+        var entries = new[] { new ProjectionEntry("xyz-999", "INGEDIEND", Reference: null, Bsn: null, NaamPlaceholder: null) };
+
+        Assert.Empty(OpenbaarProjection.PublicView(entries, "REG"));
+        Assert.Equal("xyz-999", Assert.Single(OpenbaarProjection.PublicView(entries, "xyz")).Id);
+    }
 }

services/bff/openapi.json

@@ -67,7 +67,8 @@
       "OpenbaarEntry": {
         "required": [
           "id",
-          "status"
+          "status",
+          "reference"
         ],
         "type": "object",
         "properties": {
@@ -76,6 +77,12 @@
           },
           "status": {
             "type": "string"
+          },
+          "reference": {
+            "type": [
+              "null",
+              "string"
+            ]
           }
         }
       },

services/domain/Big.Api/Program.cs

@@ -23,6 +23,7 @@ builder.Services.AddTransient<IExternalWorkerClient>(sp => sp.GetRequiredService
 builder.Services.AddHttpClient<IAclClient, AclHttpClient>();
 
 builder.Services.AddScoped<SubmitRegistration>();
+builder.Services.AddScoped<ApproveRegistration>();
 builder.Services.AddScoped<OpenZaakWorker>();
 builder.Services.AddScoped<OpenZaakJobProcessor>();
 
@@ -42,6 +43,18 @@ app.MapPost("/registrations", async (SubmitRegistrationRequest body, SubmitRegis
     return Results.Accepted($"/registrations/{id}", new RegistrationResponse(id.ToString(), RegistrationStatus.Ingediend.ToString(), null));
 });
 
+// Temporary admin endpoint (S-09b): approve a registration — the behandelaar's decision, until the
+// behandel-portal exists (S-12). The zaak's final status is set via the ACL, which flows back over
+// NRC to the projection, making the entry publicly visible as INGESCHREVEN. Idempotent.
+app.MapPost("/registrations/{id}/approve", async (string id, ApproveRegistration approve, CancellationToken ct) =>
+{
+    if (!Guid.TryParse(id, out var guid))
+        return Results.NotFound();
+
+    await approve.HandleAsync(new ApproveRegistrationCommand(new RegistrationId(guid)), ct);
+    return Results.NoContent();
+});
+
 // Read a registration. Its zaak URL appears once the worker has opened the zaak (eventually).
 app.MapGet("/registrations/{id}", async (string id, IRegistrationStore store, CancellationToken ct) =>
 {

services/domain/Big.Application/ApproveRegistration.cs

@@ -0,0 +1,36 @@
+using Big.Domain;
+
+namespace Big.Application;
+
+/// <summary>A behandelaar's decision to approve a registration, in domain language.</summary>
+public sealed record ApproveRegistrationCommand(RegistrationId RegistrationId);
+
+/// <summary>
+/// The approve use case (S-09b): set the registration's zaak to its final status via the ACL (§8.1),
+/// then advance the aggregate to INGESCHREVEN. Idempotent — a redelivered or repeated approval of an
+/// already-approved registration is a no-op, so the ACL is not asked to set the status twice. The
+/// zaak status is the projection's source of truth (it flows back over NRC); the aggregate transition
+/// keeps the domain's own view consistent.
+/// </summary>
+public sealed class ApproveRegistration(IRegistrationStore store, IAclClient acl)
+{
+    public async Task HandleAsync(ApproveRegistrationCommand command, CancellationToken ct = default)
+    {
+        ArgumentNullException.ThrowIfNull(command);
+
+        var registration = await store.GetAsync(command.RegistrationId, ct)
+            ?? throw new InvalidOperationException($"No registration {command.RegistrationId} to approve.");
+
+        // A repeated approval is a no-op: don't set the zaak status a second time.
+        if (registration.Status == RegistrationStatus.Ingeschreven)
+            return;
+
+        if (registration.ZaakUrl is null)
+            throw new InvalidOperationException(
+                $"Registration {command.RegistrationId} has no zaak yet; it cannot be approved.");
+
+        await acl.ApproveZaakAsync(registration.ZaakUrl, ct);
+        registration.Approve();
+        await store.SaveAsync(registration, ct);
+    }
+}

services/domain/Big.Application/OpenZaakWorker.cs

@@ -28,7 +28,7 @@ public sealed class OpenZaakWorker(IRegistrationStore store, IAclClient acl)
         if (registration.ZaakUrl is not null)
             return registration.ZaakUrl;
 
-        var zaakUrl = await acl.OpenZaakAsync(registration.Bsn, ct);
+        var zaakUrl = await acl.OpenZaakAsync(registration.Bsn, registration.Id.ToString(), ct);
         registration.AttachZaak(zaakUrl);
         await store.SaveAsync(registration, ct);
         return zaakUrl;

services/domain/Big.Application/Ports.cs

@@ -24,7 +24,16 @@ public interface IWorkflowClient
 /// </summary>
 public interface IAclClient
 {
-    Task<Uri> OpenZaakAsync(string bsn, CancellationToken ct = default);
+    /// <summary>Open a zaak for the registration. <paramref name="reference"/> is the registration's
+    /// own reference (its id); the ACL records it as the zaak's identificatie so the openbaar register
+    /// can show the same reference the zorgprofessional was given (S-09b follow-up, adr-proposal #78).</summary>
+    Task<Uri> OpenZaakAsync(string bsn, string reference, CancellationToken ct = default);
+
+    /// <summary>
+    /// Record the approval on the given zaak. The ACL translates this to the ZGW concept — setting
+    /// the zaak's final status — which OpenZaak notifies over NRC; the domain never names statustypen.
+    /// </summary>
+    Task ApproveZaakAsync(Uri zaakUrl, CancellationToken ct = default);
 }
 
 /// <summary>

services/domain/Big.Domain/Registration.cs

@@ -64,4 +64,23 @@ public sealed class Registration
 
         ZaakUrl = zaakUrl;
     }
+
+    /// <summary>
+    /// Approve the registration — the behandelaar's decision to enter it in the register. Advances
+    /// <see cref="RegistrationStatus.Ingediend"/> → <see cref="RegistrationStatus.Ingeschreven"/>.
+    /// Requires an opened zaak (the approval sets that zaak's status via the ACL), and only a
+    /// submitted registration can be approved: re-approving is rejected as an invalid transition.
+    /// </summary>
+    public void Approve()
+    {
+        if (ZaakUrl is null)
+            throw new InvalidOperationException(
+                $"Registration {Id} has no zaak yet; it cannot be approved before its zaak is opened.");
+
+        if (Status != RegistrationStatus.Ingediend)
+            throw new InvalidOperationException(
+                $"Registration {Id} is {Status}; only an INGEDIEND registration can be approved.");
+
+        Status = RegistrationStatus.Ingeschreven;
+    }
 }

services/domain/Big.Domain/RegistrationStatus.cs

@@ -1,10 +1,13 @@
 namespace Big.Domain;
 
 /// <summary>The lifecycle states a <see cref="Registration"/> moves through. The walking
-/// skeleton knows only <see cref="Ingediend"/>; withdrawal, beoordeling and herregistratie
-/// states arrive in their own slices (Iteration 2+).</summary>
+/// skeleton knows <see cref="Ingediend"/> and the terminal <see cref="Ingeschreven"/>; withdrawal,
+/// beoordeling and herregistratie states arrive in their own slices (Iteration 2+).</summary>
 public enum RegistrationStatus
 {
     /// <summary>Submitted by the zorgprofessional; the registratie process has been started.</summary>
     Ingediend,
+
+    /// <summary>Approved: entered in the register. Terminal in the walking skeleton (S-09b).</summary>
+    Ingeschreven,
 }

services/domain/Big.Infrastructure/AclHttpClient.cs

@@ -11,10 +11,10 @@ namespace Big.Infrastructure;
 /// </summary>
 public sealed class AclHttpClient(HttpClient http, AclOptions options) : IAclClient
 {
-    public async Task<Uri> OpenZaakAsync(string bsn, CancellationToken ct = default)
+    public async Task<Uri> OpenZaakAsync(string bsn, string reference, CancellationToken ct = default)
     {
         using var response = await http.PostAsJsonAsync(
-            new Uri(options.BaseUrl, "zaken"), new OpenZaakRequest(bsn), ct);
+            new Uri(options.BaseUrl, "zaken"), new OpenZaakRequest(bsn, reference), ct);
         response.EnsureSuccessStatusCode();
 
         var opened = await response.Content.ReadFromJsonAsync<OpenZaakResponse>(ct)
@@ -22,7 +22,20 @@ public sealed class AclHttpClient(HttpClient http, AclOptions options) : IAclCli
         return new Uri(opened.ZaakUrl);
     }
 
-    private sealed record OpenZaakRequest([property: JsonPropertyName("bsn")] string Bsn);
+    public async Task ApproveZaakAsync(Uri zaakUrl, CancellationToken ct = default)
+    {
+        ArgumentNullException.ThrowIfNull(zaakUrl);
+
+        using var response = await http.PostAsJsonAsync(
+            new Uri(options.BaseUrl, "statussen"), new SetStatusRequest(zaakUrl.ToString()), ct);
+        response.EnsureSuccessStatusCode();
+    }
+
+    private sealed record OpenZaakRequest(
+        [property: JsonPropertyName("bsn")] string Bsn,
+        [property: JsonPropertyName("reference")] string Reference);
 
     private sealed record OpenZaakResponse([property: JsonPropertyName("zaakUrl")] string ZaakUrl);
+
+    private sealed record SetStatusRequest([property: JsonPropertyName("zaakUrl")] string ZaakUrl);
 }

services/domain/Big.Tests/AclHttpClientTests.cs

@@ -15,12 +15,13 @@ public class AclHttpClientTests
         var client = Client(capture.Responds(HttpStatusCode.OK,
             """{"zaakUrl":"http://openzaak/zaken/api/v1/zaken/abc"}"""));
 
-        var url = await client.OpenZaakAsync("123456782");
+        var url = await client.OpenZaakAsync("123456782", "reg-42");
 
         Assert.Equal("http://openzaak/zaken/api/v1/zaken/abc", url.ToString());
         Assert.Equal(HttpMethod.Post, capture.Seen!.Method);
         Assert.Equal("http://acl/zaken", capture.Seen.RequestUri!.ToString());
         Assert.Contains("\"bsn\":\"123456782\"", capture.Body);
+        Assert.Contains("\"reference\":\"reg-42\"", capture.Body);
     }
 
     [Fact]
@@ -29,7 +30,7 @@ public class AclHttpClientTests
         var capture = new RequestCapture();
         var client = Client(capture.Responds(HttpStatusCode.BadGateway));
 
-        await Assert.ThrowsAsync<HttpRequestException>(() => client.OpenZaakAsync("123456782"));
+        await Assert.ThrowsAsync<HttpRequestException>(() => client.OpenZaakAsync("123456782", "reg-1"));
     }
 
     [Fact]
@@ -38,7 +39,40 @@ public class AclHttpClientTests
         var capture = new RequestCapture();
         var client = Client(capture.Responds(HttpStatusCode.OK, "null"));
 
-        var ex = await Assert.ThrowsAsync<InvalidOperationException>(() => client.OpenZaakAsync("123456782"));
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(() => client.OpenZaakAsync("123456782", "reg-1"));
         Assert.Contains("empty", ex.Message, StringComparison.OrdinalIgnoreCase);
     }
+
+    [Fact]
+    public async Task Approves_a_zaak_by_posting_its_url_to_statussen()
+    {
+        var capture = new RequestCapture();
+        var client = Client(capture.Responds(HttpStatusCode.NoContent));
+
+        await client.ApproveZaakAsync(new Uri("http://openzaak/zaken/api/v1/zaken/abc"));
+
+        Assert.Equal(HttpMethod.Post, capture.Seen!.Method);
+        Assert.Equal("http://acl/statussen", capture.Seen.RequestUri!.ToString());
+        Assert.Contains("\"zaakUrl\":\"http://openzaak/zaken/api/v1/zaken/abc\"", capture.Body);
+    }
+
+    [Fact]
+    public async Task Approve_throws_when_the_acl_rejects_the_request()
+    {
+        var capture = new RequestCapture();
+        var client = Client(capture.Responds(HttpStatusCode.BadGateway));
+
+        await Assert.ThrowsAsync<HttpRequestException>(
+            () => client.ApproveZaakAsync(new Uri("http://openzaak/zaken/api/v1/zaken/abc")));
+    }
+
+    [Fact]
+    public async Task Approve_rejects_a_null_zaak_url_without_sending_a_request()
+    {
+        var capture = new RequestCapture();
+        var client = Client(capture.Responds(HttpStatusCode.NoContent));
+
+        await Assert.ThrowsAsync<ArgumentNullException>(() => client.ApproveZaakAsync(null!));
+        Assert.Null(capture.Seen);
+    }
 }

services/domain/Big.Tests/ApproveRegistrationTests.cs

@@ -0,0 +1,89 @@
+using Big.Application;
+using Big.Domain;
+
+namespace Big.Tests;
+
+public class ApproveRegistrationTests
+{
+    private static Registration WithZaak(string bsn = "123456782")
+    {
+        var registration = Registration.Submit(bsn);
+        registration.AttachZaak(FakeAclClient.DefaultZaakUrl);
+        return registration;
+    }
+
+    [Fact]
+    public async Task Approving_sets_the_zaak_status_via_the_acl_and_marks_the_registration_ingeschreven()
+    {
+        var store = new FakeRegistrationStore();
+        var acl = new FakeAclClient();
+        var registration = WithZaak();
+        store.Seed(registration);
+        var handler = new ApproveRegistration(store, acl);
+
+        await handler.HandleAsync(new ApproveRegistrationCommand(registration.Id));
+
+        var saved = await store.GetAsync(registration.Id);
+        Assert.Equal(RegistrationStatus.Ingeschreven, saved!.Status);
+        Assert.Equal(FakeAclClient.DefaultZaakUrl, acl.ApprovedZaakUrl);
+        Assert.Equal(1, acl.ApproveCallCount);
+        // The approved aggregate is persisted (not just mutated in memory).
+        Assert.Equal(1, store.SaveCount);
+    }
+
+    [Fact]
+    public async Task Rejects_a_null_command_without_touching_the_store_or_acl()
+    {
+        var store = new FakeRegistrationStore();
+        var acl = new FakeAclClient();
+        var handler = new ApproveRegistration(store, acl);
+
+        await Assert.ThrowsAsync<ArgumentNullException>(() => handler.HandleAsync(null!));
+        Assert.Equal(0, acl.ApproveCallCount);
+    }
+
+    [Fact]
+    public async Task Approving_an_unknown_registration_throws_and_does_not_call_the_acl()
+    {
+        var store = new FakeRegistrationStore();
+        var acl = new FakeAclClient();
+        var handler = new ApproveRegistration(store, acl);
+
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(
+            () => handler.HandleAsync(new ApproveRegistrationCommand(RegistrationId.New())));
+        Assert.Contains("No registration", ex.Message);
+        Assert.Equal(0, acl.ApproveCallCount);
+    }
+
+    [Fact]
+    public async Task Approving_before_the_zaak_is_opened_throws_without_calling_the_acl()
+    {
+        var store = new FakeRegistrationStore();
+        var acl = new FakeAclClient();
+        var registration = Registration.Submit("123456782"); // no zaak yet
+        store.Seed(registration);
+        var handler = new ApproveRegistration(store, acl);
+
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(
+            () => handler.HandleAsync(new ApproveRegistrationCommand(registration.Id)));
+        Assert.Contains("no zaak", ex.Message);
+        Assert.Equal(0, acl.ApproveCallCount);
+    }
+
+    [Fact]
+    public async Task Re_approving_an_already_ingeschreven_registration_is_idempotent()
+    {
+        var store = new FakeRegistrationStore();
+        var acl = new FakeAclClient();
+        var registration = WithZaak();
+        store.Seed(registration);
+        var handler = new ApproveRegistration(store, acl);
+
+        await handler.HandleAsync(new ApproveRegistrationCommand(registration.Id));
+        await handler.HandleAsync(new ApproveRegistrationCommand(registration.Id));
+
+        // The second approval is a no-op: the ACL is not asked to set the status again.
+        Assert.Equal(1, acl.ApproveCallCount);
+        Assert.Equal(RegistrationStatus.Ingeschreven, (await store.GetAsync(registration.Id))!.Status);
+    }
+}

services/domain/Big.Tests/Fakes.cs

@@ -50,12 +50,24 @@ internal sealed class FakeAclClient(Uri? zaakUrl = null) : IAclClient
     private readonly Uri _zaakUrl = zaakUrl ?? DefaultZaakUrl;
 
     public string? OpenedForBsn { get; private set; }
+    public string? OpenedWithReference { get; private set; }
     public int CallCount { get; private set; }
 
-    public Task<Uri> OpenZaakAsync(string bsn, CancellationToken ct = default)
+    public Uri? ApprovedZaakUrl { get; private set; }
+    public int ApproveCallCount { get; private set; }
+
+    public Task<Uri> OpenZaakAsync(string bsn, string reference, CancellationToken ct = default)
     {
         CallCount++;
         OpenedForBsn = bsn;
+        OpenedWithReference = reference;
         return Task.FromResult(_zaakUrl);
     }
+
+    public Task ApproveZaakAsync(Uri zaakUrl, CancellationToken ct = default)
+    {
+        ApproveCallCount++;
+        ApprovedZaakUrl = zaakUrl;
+        return Task.CompletedTask;
+    }
 }

services/domain/Big.Tests/OpenZaakWorkerTests.cs

@@ -25,6 +25,9 @@ public class OpenZaakWorkerTests
 
         Assert.Equal(FakeAclClient.DefaultZaakUrl, zaakUrl);
         Assert.Equal("123456782", acl.OpenedForBsn);
+        // The registration's own id is handed to the ACL as the zaak reference (identificatie),
+        // so the openbaar register can show the reference the zorgprofessional received (#78).
+        Assert.Equal(registration.Id.ToString(), acl.OpenedWithReference);
         var saved = await store.GetAsync(registration.Id);
         Assert.Equal(FakeAclClient.DefaultZaakUrl, saved!.ZaakUrl);
         Assert.Equal(1, store.SaveCount);

services/domain/Big.Tests/RegistrationTests.cs

@@ -87,4 +87,38 @@ public class RegistrationTests
         Assert.Contains("/zaken/abc", ex.Message);
         Assert.Contains("/zaken/other", ex.Message);
     }
+
+    [Fact]
+    public void Approving_a_registration_with_a_zaak_sets_it_ingeschreven()
+    {
+        var registration = Registration.Submit("123456782");
+        registration.AttachZaak(new Uri("http://openzaak/zaken/api/v1/zaken/abc"));
+
+        registration.Approve();
+
+        Assert.Equal(RegistrationStatus.Ingeschreven, registration.Status);
+    }
+
+    [Fact]
+    public void Approving_before_the_zaak_is_opened_is_rejected()
+    {
+        var registration = Registration.Submit("123456782");
+
+        var ex = Assert.Throws<InvalidOperationException>(() => registration.Approve());
+
+        Assert.Contains("no zaak", ex.Message, StringComparison.OrdinalIgnoreCase);
+        Assert.Equal(RegistrationStatus.Ingediend, registration.Status);
+    }
+
+    [Fact]
+    public void Approving_an_already_ingeschreven_registration_is_rejected()
+    {
+        var registration = Registration.Submit("123456782");
+        registration.AttachZaak(new Uri("http://openzaak/zaken/api/v1/zaken/abc"));
+        registration.Approve();
+
+        var ex = Assert.Throws<InvalidOperationException>(() => registration.Approve());
+        Assert.Contains("only an INGEDIEND", ex.Message);
+        Assert.Equal(RegistrationStatus.Ingeschreven, registration.Status);
+    }
 }