ci(e2e): run Playwright from the prebuilt image instead of downloading browsers (refs #73)

The verify-e2e lane downloaded ~150 MB of Chromium (npx playwright install) on
every verify-stack run. Use the official mcr.microsoft.com/playwright image with
browsers pre-baked; npm install still pins @playwright/test from tests/e2e, and
the image tag is kept in lockstep with that version. Verified the exact
create + docker cp + start flow launches the baked browser with no download.

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/

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
 # 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/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/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

@@ -7,16 +7,36 @@ import { provideRouter } from '@angular/router';
 import { authInterceptor, provideDigiadAuth } from 'auth';
 import { appRoutes } from './app.routes';
 
-export const appConfig: ApplicationConfig = {
+/** Environment-specific settings fetched from /config.json at startup (see main.ts). */
-  providers: [
+export interface RuntimeConfig {
-    provideBrowserGlobalErrorListeners(),
+  /** The Keycloak `digid` realm issuer as the browser reaches it (dev: localhost; compose: keycloak:8080). */
-    provideRouter(appRoutes),
+  authority: string;
-    provideHttpClient(withInterceptors([authInterceptor()])),
+}
-    // Dev defaults (host ports). The compose-served app overrides these for the stack (S-08d).
+
-    provideDigiadAuth({
+/**
-      authority: 'http://localhost:8180/realms/digid',
+ * Route prefixes whose requests carry the DigiD token. These MUST match the **relative** URLs the
-      redirectUrl: typeof window !== 'undefined' ? window.location.origin : '/',
+ * api-client actually calls (same-origin via the nginx proxy) — the interceptor matches on `req.url`,
-      secureApiOrigin: 'http://localhost:8080',
+ * 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/registration/registration-page.html

@@ -8,6 +8,11 @@
       </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"

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

@@ -1,6 +1,6 @@
 import { signal } from '@angular/core';
 import { fireEvent, render, screen } from '@testing-library/angular';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 import { AuthService } from 'auth';
 import { BffApiV1Service } from 'api-client';
 import { axe } from 'vitest-axe';
@@ -43,6 +43,19 @@ describe('RegistrationPage', () => {
     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.

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

@@ -21,13 +21,22 @@ export class RegistrationPage {
   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.bff.postSelfServiceRegistrations().subscribe((accepted: SubmitAccepted) => {
+    this.failed.set(false);
-      this.reference.set(accepted.registrationId);
+    this.bff.postSelfServiceRegistrations().subscribe({
-      this.submitted.set(true);
+      next: (accepted: SubmitAccepted) => {
-      this.submitting.set(false);
+        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/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));

docs/demo-script.md

@@ -5,6 +5,28 @@ 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

docs/frontend-decisions.md

@@ -72,3 +72,34 @@ with the submit form (S-08c, #67); any deviation from NL DS will be recorded her
 - **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.

infra/docker-compose.yml

@@ -433,6 +433,31 @@ 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]
+
 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/auth/src/lib/digid-auth.providers.ts

@@ -1,5 +1,10 @@
 import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
-import { authInterceptor, LogLevel, provideAuth } from 'angular-auth-oidc-client';
+import {
+  authInterceptor,
+  LogLevel,
+  provideAuth,
+  withAppInitializerAuthCheck,
+} from 'angular-auth-oidc-client';
 import { AuthService } from './auth.service';
 import { DigiadAuthService } from './digid-auth.service';
 
@@ -8,8 +13,13 @@ export interface DigiadAuthOptions {
   authority: string;
   /** Where Keycloak redirects back to after login (usually the app origin). */
   redirectUrl: string;
-  /** The BFF origin whose requests get the bearer token attached (secure route). */
+  /**
-  secureApiOrigin: 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[];
 }
 
 /**
@@ -19,20 +29,25 @@ export interface DigiadAuthOptions {
  */
 export function provideDigiadAuth(options: DigiadAuthOptions): EnvironmentProviders {
   return makeEnvironmentProviders([
-    provideAuth({
+    provideAuth(
-      config: {
+      {
-        authority: options.authority,
+        config: {
-        redirectUrl: options.redirectUrl,
+          authority: options.authority,
-        postLogoutRedirectUri: options.redirectUrl,
+          redirectUrl: options.redirectUrl,
-        clientId: 'big-portal',
+          postLogoutRedirectUri: options.redirectUrl,
-        scope: 'openid profile',
+          clientId: 'big-portal',
-        responseType: 'code',
+          scope: 'openid profile',
-        silentRenew: true,
+          responseType: 'code',
-        useRefreshToken: true,
+          silentRenew: true,
-        secureRoutes: [options.secureApiOrigin],
+          useRefreshToken: true,
-        logLevel: LogLevel.Warn,
+          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 },
   ]);
 }

libs/ui/src/index.ts

@@ -5,13 +5,7 @@
 // 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).
-// The component classes are re-exported too so the AOT compiler can resolve the template
+// Re-export the whole Utrecht package: importing UtrechtComponentsModule pulls every component it
-// directives (utrecht-article, utrecht-button, …) through this barrel.
+// exports into the compiler's scope, so the AOT build needs all of them resolvable through this
-export {
+// barrel (a partial re-export fails with NG3004 for the first unused component).
-  UtrechtArticle,
+export * from '@utrecht/component-library-angular';
-  UtrechtButtonAttr,
-  UtrechtComponentsModule,
-  UtrechtDocument,
-  UtrechtHeading1,
-  UtrechtParagraph,
-} from '@utrecht/component-library-angular';

tests/e2e/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "e2e",
+  "private": true,
+  "description": "Playwright walking-skeleton e2e (S-08d) — run inside the compose network by infra/run-e2e-check.sh.",
+  "devDependencies": {
+    "@playwright/test": "1.61.1"
+  }
+}

tests/e2e/playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// The e2e runs inside the compose network (infra/run-e2e-check.sh); baseURL defaults to the
+// self-service service. Keep timeouts generous — the first navigation triggers the DigiD flow.
+const baseURL = process.env.SELF_SERVICE_URL ?? 'http://self-service';
+
+export default defineConfig({
+  testDir: '.',
+  timeout: 90_000,
+  expect: { timeout: 15_000 },
+  retries: 1,
+  reporter: [['list']],
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+    // The portal is served over plain HTTP on a non-localhost origin (http://self-service) inside the
+    // compose network, so it is NOT a secure context — and Web Crypto (`crypto.subtle`) is undefined
+    // there. angular-auth-oidc-client needs SubtleCrypto to build the PKCE code challenge, so
+    // `authorize()` throws and the login redirect never fires (the login form never appears). In
+    // production the portal runs behind HTTPS, where this works. Rather than terminate TLS in the
+    // throwaway e2e stack, tell Chromium to treat this origin as secure — which faithfully emulates
+    // the production HTTPS context. This flag is only honoured by the full Chromium build (new
+    // headless), not Playwright's default headless-shell, so pin `channel: 'chromium'`.
+    channel: 'chromium',
+    launchOptions: { args: [`--unsafely-treat-insecure-origin-as-secure=${baseURL}`] },
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+});

tests/e2e/registration.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+// Walking-skeleton happy path (S-08d): a zorgprofessional logs in via mock DigiD and submits a
+// registration through the self-service portal → BFF → domain. The confirmation shows the reference.
+test('DigiD login → submit → confirmation', async ({ page }) => {
+  // Visiting the guarded page redirects to the Keycloak (mock DigiD) login.
+  await page.goto('/');
+
+  // Keycloak's default login form (stable ids across themes).
+  await page.locator('#username').fill('jan-burger');
+  await page.locator('#password').fill('test123');
+  await page.locator('#kc-login').click();
+
+  // Back on the portal, authenticated.
+  await expect(page.getByRole('heading', { name: /Zelfservice/i })).toBeVisible();
+
+  await page.getByRole('button', { name: /indienen/i }).click();
+
+  // The BFF accepted it and the page shows the confirmation.
+  await expect(page.getByText(/ontvangen/i)).toBeVisible();
+});