Merge pull request 'feat(portal-self-service): NL DS + DigiD self-service submit form (closes #67)' (#71) from feat/67-self-service-form into main

Reviewed-on: #71

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# .NET sources use 4-space indent (dotnet format enforces this). The 2-space default
+# above is for the frontend (TS/HTML/CSS/JSON); C# keeps the .NET convention.
+[*.cs]
+indent_size = 4
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitea/workflows/ci.yaml

@@ -43,6 +43,20 @@ jobs:
           dotnet-version: '10.0.x'
       - run: make unit
 
+  # Frontend (Nx/Angular) lane: install with pnpm, then Nx lint + test + build.
+  frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: https://github.com/actions/checkout@v4
+      - uses: https://github.com/pnpm/action-setup@v4
+        with:
+          version: 11
+      - uses: https://github.com/actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+      - run: make frontend
+
   mutation:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -35,3 +35,20 @@ site/
 # OS
 .DS_Store
 Thumbs.db
+
+# ── Frontend (Nx / Angular / pnpm) ──
+node_modules/
+dist/
+tmp/
+out-tsc/
+/coverage
+.angular/
+.nx/cache
+.nx/workspace-data
+.nx/self-healing
+.nx/migrate-runs
+.nx/polygraph
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
+
+.angular

.prettierignore

@@ -0,0 +1,8 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data
+.angular
+
+.nx/self-healing

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

BACKLOG.md

@@ -151,17 +151,16 @@ The skeleton proves the spine end-to-end: a registration, a workflow, a zaak in
 
 ### S-08 · Self-Service portal (Angular, NL DS) — submit a registration
 
-**Outcome:** The self-service Angular app, in the Nx monorepo, lets a zorgprofessional log in via mock DigiD and submit a registration. NL Design System styling. Generated API client.
+> **S-08 was split** (CLAUDE.md §13; issue #9 closed) into the sub-slices below — it bundled the
+> Nx bootstrap, the generated client, the NL DS + DigiD form, and a full-stack Playwright e2e, well
+> past 1–2 days. Each sub-slice is independently demoable and CI-green.
 
-**Acceptance:**
+- **S-08a (#65)** · Nx monorepo + Angular tooling + CI Node lane. Placeholder `self-service` app; `nx lint/test/build` green in a new CI Node lane.
+- **S-08b (#66)** · Generated api-client lib from `services/bff/openapi.json` (never hand-written, §10) + a mocked-BFF unit test.
+- **S-08c (#67)** · Self-service submit form — NL Design System `libs/ui`, DigiD OIDC `libs/auth`, component tests (Angular Testing Library), axe WCAG 2.1 AA on the submit page.
+- **S-08d (#68)** · Playwright happy-path e2e (login → submit → success) against the full stack + compose serving + CI e2e lane.
 
-- E2E test (Playwright): full happy path, login → submit → success page.
+**Out of scope (whole of S-08):** document upload, status tracking page.
-- Component tests (Testing Library) for the form.
-- Accessibility audit (axe-core) passes WCAG 2.1 AA on the submit page.
-
-**Touches:** `apps/self-service/`, `libs/ui/`, `libs/auth/`, `libs/api-client/`, tests.
-
-**Out of scope:** document upload, status tracking page.
 
 ### S-09 · Openbaar Register portal — public lookup
 

Makefile

@@ -43,11 +43,16 @@ export DOCKER_HOST := unix://$(PODMAN_SOCK)
 endif
 endif
 
-.PHONY: ci lint build unit mutation integration verify verify-up verify-acl verify-nrc verify-projection verify-notifications smoke up down local local-down changelog openzaak-up openzaak-smoke openzaak-seed openzaak-down stack-up stack-smoke stack-down keycloak-up keycloak-smoke keycloak-down flowable-up flowable-smoke flowable-down help
+.PHONY: ci lint build unit mutation frontend integration verify verify-up verify-acl verify-nrc verify-projection verify-bff verify-domain verify-notifications smoke up down local local-down changelog openzaak-up openzaak-smoke openzaak-seed openzaak-down stack-up stack-smoke stack-down keycloak-up keycloak-smoke keycloak-down flowable-up flowable-smoke flowable-down help
 
-## ci: run the full pipeline — lint, build, unit, mutation, verify (mirrors Gitea Actions)
+## ci: run the full pipeline — lint, build, unit, mutation, frontend, verify (mirrors Gitea Actions)
 ## `verify` is the live-stack stage (full stack up once → ACL + notification checks).
-ci: lint build unit mutation verify
+ci: lint build unit mutation frontend verify
+
+## frontend: install deps and run the Nx lint/test/build for the portals (pnpm + Node required)
+frontend:
+	pnpm install --frozen-lockfile
+	pnpm nx run-many -t lint test build
 
 ## lint: verify formatting (no changes)
 lint:

apps/self-service/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/self-service/project.json

@@ -0,0 +1,80 @@
+{
+  "name": "self-service",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/self-service/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular/build:application",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/self-service",
+        "browser": "apps/self-service/src/main.ts",
+        "tsConfig": "apps/self-service/tsconfig.app.json",
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "apps/self-service/public"
+          }
+        ],
+        "styles": ["apps/self-service/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": "self-service:build:production"
+        },
+        "development": {
+          "buildTarget": "self-service: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": "self-service:build",
+        "staticFilePath": "dist/apps/self-service/browser",
+        "spa": true
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+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),
+    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',
+      redirectUrl: typeof window !== 'undefined' ? window.location.origin : '/',
+      secureApiOrigin: 'http://localhost:8080',
+    }),
+  ],
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { provideRouter } from '@angular/router';
+import { render, screen } 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 RegistrationPage owns the heading).
+    expect(container.querySelector('router-outlet')).toBeTruthy();
+    expect(screen).toBeTruthy();
+  });
+});

apps/self-service/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 = 'self-service';
+}

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

@@ -0,0 +1,22 @@
+<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>
+      <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,58 @@
+import { signal } from '@angular/core';
+import { fireEvent, render, screen } from '@testing-library/angular';
+import { of } 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('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,33 @@
+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);
+
+  submit(): void {
+    this.submitting.set(true);
+    this.bff.postSelfServiceRegistrations().subscribe((accepted: SubmitAccepted) => {
+      this.reference.set(accepted.registrationId);
+      this.submitted.set(true);
+      this.submitting.set(false);
+    });
+  }
+}

apps/self-service/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="nl">
+  <head>
+    <meta charset="utf-8" />
+    <title>self-service</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/self-service/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

apps/self-service/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/self-service/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/self-service/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/self-service/tsconfig.spec.json

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

docs/demo-script.md

@@ -5,6 +5,50 @@ copy-pasteable walkthrough against a local `make up` stack.
 
 ---
 
+## 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
+(standalone + signals), lint/test/build green in a CI Node lane. The login + submit form follow in
+S-08c.
+
+```bash
+# From a fresh clone (Node 24 + pnpm 11):
+pnpm install                       # native builds are pre-approved in pnpm-workspace.yaml
+pnpm nx test self-service          # Vitest component test
+pnpm nx build self-service         # production build
+pnpm nx serve self-service         # → http://localhost:4200  (placeholder page)
+# Or the CI-equivalent one-shot:
+make frontend                      # install + nx lint/test/build
+```
+
+> Nx manages only `apps/`+`libs/`; the .NET services stay on `dotnet`/the Makefile. NL Design System
+> and the real form arrive in S-08c (#67); see `docs/frontend-decisions.md`.
+
+---
+
 ## S-07 — BFF: the portals' single backend
 
 **Outcome:** the BFF validates Keycloak `digid` tokens on the self-service submit (forwarding the

docs/frontend-decisions.md

@@ -0,0 +1,74 @@
+# Frontend decisions
+
+A running log of frontend tooling and component decisions (CLAUDE.md §10). One entry per
+decision; record *why*, and note any deviation from NL Design System.
+
+---
+
+## Workspace & tooling (S-08a, #65)
+
+The portals live in an **Nx monorepo at the repository root**, alongside the .NET `services/`.
+
+- **Package manager: pnpm.** Native build scripts are approved explicitly in `pnpm-workspace.yaml`
+  under `allowBuilds` (pnpm 11 fails the install otherwise). Node 24, pnpm 11.
+- **Angular, standalone components + signals, no NgModules** (§10). Apps are generated with
+  `@nx/angular:application`.
+- **Unit tests: Vitest** via Angular's built-in `@angular/build:unit-test` (the `vitest-angular`
+  runner). **Angular Testing Library** is added for component tests when the first real components
+  land (S-08c); the S-08a placeholder uses a plain `TestBed` render assertion.
+- **Lint: ESLint** (flat config, `@nx/eslint`).
+- **Nx is scoped to `apps/` + `libs/` only.** The `@nx/docker` and `@nx/dotnet` plugins are **not**
+  installed — the .NET services are built by `dotnet`/the Makefile, and `@nx/docker` would otherwise
+  infer every `services/*/Dockerfile` as an unnamed Nx project and break the project graph.
+- **No Nx Cloud.** `nxCloudId` is stripped from `nx.json`; remote caching would depend on an
+  external service, and the repo is Gitea-only (§8.7). Nx's "configure-ai-agents" additions
+  (`.claude/settings.json`, a CLAUDE.md section referencing a GitHub marketplace) are **not**
+  committed for the same reason.
+- **CI:** a `frontend` job (`make frontend` → `pnpm install --frozen-lockfile` + `nx run-many -t
+  lint test build`) runs on pnpm + Node, with pinned action URLs (§15).
+
+**NL Design System:** not yet introduced — the S-08a app is a placeholder. NL DS components arrive
+with the submit form (S-08c, #67); any deviation from NL DS will be recorded here.
+
+---
+
+## API client generator (S-08b, #66)
+
+`libs/api-client` is **generated from `services/bff/openapi.json`** — never hand-written (§10).
+
+- **Generator: orval** (`client: 'angular'`), a **node-based** generator (no Java, unlike
+  `openapi-generator`), so it runs in the pnpm/Node CI lane. It emits an injectable
+  `BffApiV1Service` using Angular's `HttpClient` — which means the DigiD bearer token can be attached
+  by an **`HttpInterceptor`** (S-08c), the idiomatic Angular approach; a fetch-based SDK would bypass
+  the interceptor pipeline.
+- **Config:** `libs/api-client/orval.config.ts` (single-file output into `src/lib/generated/`,
+  `clean: true`, prettier). **Regenerate with `nx run api-client:generate`** after the BFF spec
+  changes; the output is deterministic (idempotent), and `src/lib/generated/` is never hand-edited.
+- **Tested** against a mocked BFF via `HttpClientTesting` (`libs/api-client/src/lib/bff-api.spec.ts`).
+- 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.

eslint.config.mjs

@@ -0,0 +1,48 @@
+import nx from '@nx/eslint-plugin';
+
+export default [
+  ...nx.configs['flat/base'],
+  ...nx.configs['flat/typescript'],
+  ...nx.configs['flat/javascript'],
+  {
+    ignores: [
+      '**/dist',
+      '**/vite.config.*.timestamp*',
+      '**/vitest.config.*.timestamp*',
+    ],
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    rules: {
+      '@nx/enforce-module-boundaries': [
+        'error',
+        {
+          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: '*',
+              onlyDependOnLibsWithTags: ['*'],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: [
+      '**/*.ts',
+      '**/*.tsx',
+      '**/*.cts',
+      '**/*.mts',
+      '**/*.js',
+      '**/*.jsx',
+      '**/*.cjs',
+      '**/*.mjs',
+    ],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/api-client/README.md

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

libs/api-client/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/api-client/orval.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'orval';
+
+// Generates the BFF client (Angular HttpClient service + models) from the committed
+// OpenAPI contract. Never hand-edit the generated output — re-run `nx run api-client:generate`
+// after the BFF spec changes (CLAUDE.md §10; docs/frontend-decisions.md).
+export default defineConfig({
+  bff: {
+    input: '../../services/bff/openapi.json',
+    output: {
+      target: './src/lib/generated/bff-api.ts',
+      client: 'angular',
+      mode: 'single',
+      clean: true,
+      prettier: true,
+    },
+  },
+});

libs/api-client/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "api-client",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/api-client/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "generate": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "orval --config orval.config.ts",
+        "cwd": "libs/api-client"
+      }
+    }
+  }
+}

libs/api-client/src/index.ts

@@ -0,0 +1,3 @@
+// The BFF API client is generated from services/bff/openapi.json (orval); never hand-edit
+// src/lib/generated. Re-run `nx run api-client:generate` after the BFF spec changes.
+export * from './lib/generated/bff-api';

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

@@ -0,0 +1,50 @@
+import { provideHttpClient } from '@angular/common/http';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import {
+  BffApiV1Service,
+  type OpenbaarEntry,
+  type SubmitAccepted,
+} from '../index';
+
+describe('BffApiV1Service (generated from services/bff/openapi.json)', () => {
+  let service: BffApiV1Service;
+  let http: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+    service = TestBed.inject(BffApiV1Service);
+    http = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => http.verify());
+
+  it('submits a registration via POST /self-service/registrations', () => {
+    let result: SubmitAccepted | undefined;
+    service.postSelfServiceRegistrations().subscribe((r) => (result = r));
+
+    const req = http.expectOne('/self-service/registrations');
+    expect(req.request.method).toBe('POST');
+    req.flush({ registrationId: 'reg-1', status: 'Ingediend' });
+
+    expect(result?.registrationId).toBe('reg-1');
+    expect(result?.status).toBe('Ingediend');
+  });
+
+  it('reads the openbaar register via GET /openbaar/register with the query', () => {
+    let rows: OpenbaarEntry[] | undefined;
+    service.getOpenbaarRegister({ q: 'abc' }).subscribe((r) => (rows = r));
+
+    const req = http.expectOne((r) => r.url === '/openbaar/register');
+    expect(req.request.method).toBe('GET');
+    expect(req.request.params.get('q')).toBe('abc');
+    req.flush([{ id: 'abc-111', status: 'INGEDIEND' }]);
+
+    expect(rows?.[0].id).toBe('abc-111');
+  });
+});

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

@@ -0,0 +1,216 @@
+/**
+ * Generated by orval v8.19.0 🍺
+ * Do not edit manually.
+ * Bff.Api | v1
+ * OpenAPI spec version: 1.0.0
+ */
+import {
+  HttpClient,
+  HttpHeaders,
+  HttpResponse as AngularHttpResponse
+} from '@angular/common/http';
+import type {
+  HttpContext,
+  HttpEvent,
+  HttpParams
+} from '@angular/common/http';
+
+import {
+  Injectable,
+  inject
+} from '@angular/core';
+
+import {
+  Observable
+} from 'rxjs';
+
+export interface OpenbaarEntry {
+  id: string;
+  status: string;
+}
+
+export interface SubmitAccepted {
+  registrationId: string;
+  status: string;
+}
+
+export type GetOpenbaarRegisterParams = {
+q?: string;
+};
+
+interface HttpClientOptions {
+  readonly headers?: HttpHeaders | Record<string, string | string[]>;
+  readonly context?: HttpContext;
+  readonly params?:
+        | HttpParams
+      | Record<string, string | number | boolean | Array<string | number | boolean>>;
+  readonly reportProgress?: boolean;
+  readonly withCredentials?: boolean;
+  readonly credentials?: RequestCredentials;
+  readonly keepalive?: boolean;
+  readonly priority?: RequestPriority;
+  readonly cache?: RequestCache;
+  readonly mode?: RequestMode;
+  readonly redirect?: RequestRedirect;
+  readonly referrer?: string;
+  readonly integrity?: string;
+  readonly referrerPolicy?: ReferrerPolicy;
+  readonly transferCache?: {includeHeaders?: string[]} | boolean;
+  readonly timeout?: number;
+}
+
+type HttpClientBodyOptions = HttpClientOptions & {
+  readonly observe?: 'body';
+};
+
+type HttpClientEventOptions = HttpClientOptions & {
+  readonly observe: 'events';
+};
+
+type HttpClientResponseOptions = HttpClientOptions & {
+  readonly observe: 'response';
+};
+
+type HttpClientObserveOptions = HttpClientOptions & {
+  readonly observe?: 'body' | 'events' | 'response';
+};
+
+type AngularHttpParamValue = string | number | boolean | Array<string | number | boolean>;
+type AngularHttpParamValueWithNullable = AngularHttpParamValue | null;
+
+function filterParams(
+  params: Record<string, unknown>,
+  requiredNullableKeys?: ReadonlySet<string>,
+  preserveRequiredNullables?: false,
+  passthroughKeys?: undefined,
+): Record<string, AngularHttpParamValue>;
+function filterParams(
+  params: Record<string, unknown>,
+  requiredNullableKeys: ReadonlySet<string> | undefined,
+  preserveRequiredNullables: true,
+  passthroughKeys?: undefined,
+): Record<string, AngularHttpParamValueWithNullable>;
+function filterParams(
+  params: Record<string, unknown>,
+  requiredNullableKeys: ReadonlySet<string> | undefined,
+  preserveRequiredNullables: boolean | undefined,
+  passthroughKeys: ReadonlySet<string>,
+): Record<string, unknown>;
+function filterParams(
+  params: Record<string, unknown>,
+  requiredNullableKeys: ReadonlySet<string> = new Set(),
+  preserveRequiredNullables = false,
+  passthroughKeys: ReadonlySet<string> = new Set(),
+): Record<string, unknown> {
+  const filteredParams: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(params)) {
+    if (passthroughKeys.has(key)) {
+      if (value !== undefined) {
+        filteredParams[key] = value;
+      }
+      continue;
+    }
+    if (Array.isArray(value)) {
+      const filtered = value.filter(
+        (item) =>
+          item != null &&
+          (typeof item === 'string' ||
+            typeof item === 'number' ||
+            typeof item === 'boolean'),
+      ) as Array<string | number | boolean>;
+      if (filtered.length) {
+        filteredParams[key] = filtered;
+      }
+    } else if (
+      preserveRequiredNullables &&
+      value === null &&
+      requiredNullableKeys.has(key)
+    ) {
+      filteredParams[key] = null;
+    } else if (
+      value != null &&
+      (typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean')
+    ) {
+      filteredParams[key] = value;
+    }
+  }
+  return filteredParams;
+}
+
+
+
+
+
+@Injectable({ providedIn: 'root' })
+export class BffApiV1Service {
+  private readonly http = inject(HttpClient);
+ postSelfServiceRegistrations<TData = SubmitAccepted>( options?: HttpClientBodyOptions): Observable<TData>;
+ postSelfServiceRegistrations<TData = SubmitAccepted>( options?: HttpClientEventOptions): Observable<HttpEvent<TData>>;
+ postSelfServiceRegistrations<TData = SubmitAccepted>( options?: HttpClientResponseOptions): Observable<AngularHttpResponse<TData>>;
+  postSelfServiceRegistrations<TData = SubmitAccepted>(
+     options?: HttpClientObserveOptions): Observable<TData | HttpEvent<TData> | AngularHttpResponse<TData>> {
+    if (options?.observe === 'events') {
+      return this.http.post<TData>(
+      `/self-service/registrations`,
+      undefined,{
+        ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'events',
+      }
+    );
+    }
+
+    if (options?.observe === 'response') {
+      return this.http.post<TData>(
+      `/self-service/registrations`,
+      undefined,{
+        ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'response',
+      }
+    );
+    }
+
+    return this.http.post<TData>(
+      `/self-service/registrations`,
+      undefined,{
+        ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'body',
+      }
+    );
+  }
+
+ getOpenbaarRegister<TData = OpenbaarEntry[]>(params?: GetOpenbaarRegisterParams, options?: HttpClientBodyOptions): Observable<TData>;
+ getOpenbaarRegister<TData = OpenbaarEntry[]>(params?: GetOpenbaarRegisterParams, options?: HttpClientEventOptions): Observable<HttpEvent<TData>>;
+ getOpenbaarRegister<TData = OpenbaarEntry[]>(params?: GetOpenbaarRegisterParams, options?: HttpClientResponseOptions): Observable<AngularHttpResponse<TData>>;
+  getOpenbaarRegister<TData = OpenbaarEntry[]>(
+    params?: GetOpenbaarRegisterParams, options?: HttpClientObserveOptions): Observable<TData | HttpEvent<TData> | AngularHttpResponse<TData>> {
+    const filteredParams = filterParams({...params, ...options?.params}, new Set<string>([]));
+
+    if (options?.observe === 'events') {
+      return this.http.get<TData>(
+      `/openbaar/register`,{
+    ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'events',
+        params: filteredParams,}
+    );
+    }
+
+    if (options?.observe === 'response') {
+      return this.http.get<TData>(
+      `/openbaar/register`,{
+    ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'response',
+        params: filteredParams,}
+    );
+    }
+
+    return this.http.get<TData>(
+      `/openbaar/register`,{
+    ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'body',
+        params: filteredParams,}
+    );
+  }
+
+};

libs/api-client/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/api-client/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/api-client/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/api-client/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/api-client/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/api-client',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //   plugins: () => [ nxViteTsPaths() ],
+  // },
+  test: {
+    name: 'api-client',
+    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/api-client',
+      provider: 'v8' as const,
+    },
+  },
+}));

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,50 @@
+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;
+  /** The BFF origin whose requests get the bearer token attached (secure route). */
+  secureApiOrigin: 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.secureApiOrigin],
+          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,
+    },
+  },
+}));

mkdocs.yml

@@ -33,6 +33,7 @@ nav:
       - "ADR-0009: External-task job worker": architecture/adr-0009-external-task-job-worker.md
       - "ADR-0010: BFF OIDC validation": architecture/adr-0010-bff-oidc.md
   - Working in Gitea: gitea-workflow.md
+  - Frontend decisions: frontend-decisions.md
   - Demo script: demo-script.md
   - Runbooks:
       - CI: runbooks/ci.md

nx.json

@@ -0,0 +1,120 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
+    "production": [
+      "default",
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/eslint.config.mjs",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/test-setup.[jt]s"
+    ],
+    "sharedGlobals": []
+  },
+  "targetDefaults": {
+    "@angular/build:application": {
+      "cache": true,
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
+    },
+    "@nx/eslint:lint": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^default",
+        "{workspaceRoot}/.eslintrc.json",
+        "{workspaceRoot}/.eslintignore",
+        "{workspaceRoot}/eslint.config.mjs",
+        "{workspaceRoot}/tools/eslint-rules/**/*"
+      ]
+    },
+    "@nx/esbuild:esbuild": {
+      "cache": true,
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
+    },
+    "@nx/js:tsc": {
+      "cache": true,
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
+    },
+    "@nx/vitest:test": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^production"
+      ]
+    },
+    "@angular/build:unit-test": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^production"
+      ]
+    }
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/eslint/plugin",
+      "options": {
+        "targetName": "lint"
+      }
+    },
+    {
+      "plugin": "@nx/vite/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "serveTargetName": "serve",
+        "devTargetName": "dev",
+        "previewTargetName": "preview",
+        "serveStaticTargetName": "serve-static",
+        "typecheckTargetName": "typecheck",
+        "buildDepsTargetName": "build-deps",
+        "watchDepsTargetName": "watch-deps"
+      }
+    },
+    {
+      "plugin": "@nx/vitest",
+      "options": {
+        "testTargetName": "test"
+      }
+    }
+  ],
+  "generators": {
+    "@nx/angular:application": {
+      "e2eTestRunner": "playwright",
+      "linter": "eslint",
+      "style": "css",
+      "unitTestRunner": "vitest-analog"
+    },
+    "@nx/angular:library": {
+      "linter": "eslint",
+      "unitTestRunner": "vitest-analog"
+    },
+    "@nx/angular:component": {
+      "style": "css"
+    }
+  },
+  "analytics": false
+}

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "register-referentie",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {},
+  "private": true,
+  "dependencies": {
+    "@angular-devkit/build-angular": "21.2.7",
+    "@angular/common": "21.2.9",
+    "@angular/compiler": "21.2.9",
+    "@angular/core": "21.2.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"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "2.2.0",
+    "@analogjs/vitest-angular": "2.2.0",
+    "@angular-devkit/core": "21.2.7",
+    "@angular-devkit/schematics": "21.2.7",
+    "@angular/build": "21.2.7",
+    "@angular/cli": "21.2.7",
+    "@angular/compiler-cli": "21.2.9",
+    "@angular/language-service": "21.2.9",
+    "@eslint/js": "^9.8.0",
+    "@nx/angular": "23.0.1",
+    "@nx/devkit": "23.0.1",
+    "@nx/esbuild": "23.0.1",
+    "@nx/eslint": "23.0.1",
+    "@nx/eslint-plugin": "23.0.1",
+    "@nx/js": "23.0.1",
+    "@nx/vite": "23.0.1",
+    "@nx/vitest": "23.0.1",
+    "@nx/web": "23.0.1",
+    "@nx/workspace": "23.0.1",
+    "@oxc-project/runtime": "^0.115.0",
+    "@schematics/angular": "21.2.7",
+    "@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",
+    "jiti": "2.4.2",
+    "jsdom": "~22.1.0",
+    "jsonc-eslint-parser": "^2.1.0",
+    "nx": "23.0.1",
+    "orval": "^8.19.0",
+    "prettier": "^3.8.1",
+    "ts-node": "10.9.1",
+    "tslib": "^2.3.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.40.0",
+    "vite": "8.0.9",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "~4.1.0",
+    "vitest-axe": "^0.1.0"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,10 @@
+packages: []
+allowBuilds:
+  '@parcel/watcher': true
+  less: true
+  esbuild: true
+  '@swc/core': true
+  nx: true
+  unrs-resolver: true
+  lmdb: true
+  msgpackr-extract: true

tsconfig.base.json

@@ -0,0 +1,24 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "esnext",
+    "lib": ["es2020", "dom"],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "api-client": ["./libs/api-client/src/index.ts"],
+      "ui": ["./libs/ui/src/index.ts"],
+      "auth": ["./libs/auth/src/index.ts"]
+    }
+  },
+  "exclude": ["node_modules", "tmp"]
+}

vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    projects: [
+      '**/vite.config.{mjs,js,ts,mts}',
+      '**/vitest.config.{mjs,js,ts,mts}',
+    ],
+  },
+});

vitest.workspace.ts

@@ -0,0 +1,4 @@
+export default [
+  '**/vite.config.{mjs,js,ts,mts}',
+  '**/vitest.config.{mjs,js,ts,mts}',
+];