create-nuxt-base 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.2.2](https://github.com/lenneTech/nuxt-base-starter/compare/v2.2.1...v2.2.2) (2026-02-04)
+
 ### [2.2.1](https://github.com/lenneTech/nuxt-base-starter/compare/v2.2.0...v2.2.1) (2026-02-04)
 
 

package/nuxt-base-template/package-lock.json

@@ -33,20 +33,21 @@
         "@tailwindcss/vite": "4.1.18",
         "@types/node": "25.0.6",
         "@types/qrcode": "1.5.6",
-        "@vitejs/plugin-vue": "^6.0.3",
-        "@vue/test-utils": "^2.4.6",
+        "@vitejs/plugin-vue": "6.0.3",
+        "@vue/test-utils": "2.4.6",
         "dayjs-nuxt": "2.1.11",
-        "happy-dom": "^20.3.7",
+        "happy-dom": "20.3.7",
         "jsdom": "27.4.0",
-        "lint-staged": "^16.2.7",
+        "lint-staged": "16.2.7",
+        "mongodb": "7.1.0",
         "nuxt": "4.2.2",
         "oxfmt": "latest",
         "oxlint": "latest",
         "rimraf": "6.1.2",
-        "simple-git-hooks": "^2.13.1",
+        "simple-git-hooks": "2.13.1",
         "tailwindcss": "4.1.18",
         "typescript": "5.9.3",
-        "vitest": "^3.2.4"
+        "vitest": "3.2.4"
       },
       "engines": {
         "node": ">=22",
@@ -1860,7 +1861,9 @@
       }
     },
     "node_modules/@isaacs/brace-expansion": {
-      "version": "5.0.0",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.1.tgz",
+      "integrity": "sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==",
       "license": "MIT",
       "dependencies": {
         "@isaacs/balanced-match": "^4.0.1"
@@ -2433,6 +2436,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@mongodb-js/saslprep": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.4.5.tgz",
+      "integrity": "sha512-k64Lbyb7ycCSXHSLzxVdb2xsKGPMvYZfCICXvDsI8Z65CeWQzTEKS4YmGbnqw+U9RBvLPTsB6UCmwkgsDTGWIw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "sparse-bitfield": "^3.0.3"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.1",
       "license": "MIT",
@@ -7216,6 +7229,13 @@
       "version": "0.0.21",
       "license": "MIT"
     },
+    "node_modules/@types/webidl-conversions": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
+      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/@types/whatwg-mimetype": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -7223,6 +7243,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/whatwg-url": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-13.0.0.tgz",
+      "integrity": "sha512-N8WXpbE6Wgri7KUSvrmQcqrMllKZ9uxkYWMt+mCSGwNc0Hsw9VQTW7ApqI4XNrx6/SaM2QQJCzMPDEXE058s+Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/webidl-conversions": "*"
+      }
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -8499,6 +8529,16 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/bson": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/bson/-/bson-7.2.0.tgz",
+      "integrity": "sha512-YCEo7KjMlbNlyHhz7zAZNDpIpQbd+wOEHJYezv0nMYTn4x31eIUM2yomNNubclAt63dObUzKHWsBLJ9QcZNSnQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "6.0.3",
       "funding": [
@@ -9957,7 +9997,9 @@
       }
     },
     "node_modules/fast-xml-parser": {
-      "version": "5.3.3",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.4.tgz",
+      "integrity": "sha512-EFd6afGmXlCx8H8WTZHhAoDaWaGyuIBoZJ2mknrNxug+aZKjkp0a0dlars9Izl+jF+7Gu1/5f/2h68cQpe0IiA==",
       "dev": true,
       "funding": [
         {
@@ -11929,6 +11971,13 @@
       "version": "2.0.0",
       "license": "MIT"
     },
+    "node_modules/memory-pager": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
+      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "license": "MIT"
@@ -12083,6 +12132,105 @@
       "version": "4.6.7",
       "license": "MIT"
     },
+    "node_modules/mongodb": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-7.1.0.tgz",
+      "integrity": "sha512-kMfnKunbolQYwCIyrkxNJFB4Ypy91pYqua5NargS/f8ODNSJxT03ZU3n1JqL4mCzbSih8tvmMEMLpKTT7x5gCg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@mongodb-js/saslprep": "^1.3.0",
+        "bson": "^7.1.1",
+        "mongodb-connection-string-url": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@aws-sdk/credential-providers": "^3.806.0",
+        "@mongodb-js/zstd": "^7.0.0",
+        "gcp-metadata": "^7.0.1",
+        "kerberos": "^7.0.0",
+        "mongodb-client-encryption": ">=7.0.0 <7.1.0",
+        "snappy": "^7.3.2",
+        "socks": "^2.8.6"
+      },
+      "peerDependenciesMeta": {
+        "@aws-sdk/credential-providers": {
+          "optional": true
+        },
+        "@mongodb-js/zstd": {
+          "optional": true
+        },
+        "gcp-metadata": {
+          "optional": true
+        },
+        "kerberos": {
+          "optional": true
+        },
+        "mongodb-client-encryption": {
+          "optional": true
+        },
+        "snappy": {
+          "optional": true
+        },
+        "socks": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mongodb-connection-string-url": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-7.0.1.tgz",
+      "integrity": "sha512-h0AZ9A7IDVwwHyMxmdMXKy+9oNlF0zFoahHiX3vQ8e3KFcSP3VmsmfvtRSuLPxmyv2vjIDxqty8smTgie/SNRQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/whatwg-url": "^13.0.0",
+        "whatwg-url": "^14.1.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/mongodb-connection-string-url/node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/mongodb-connection-string-url/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/mongodb-connection-string-url/node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.24.11",
       "license": "MIT",
@@ -14625,7 +14773,7 @@
     },
     "node_modules/punycode": {
       "version": "2.3.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -15578,6 +15726,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sparse-bitfield": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
+      "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "memory-pager": "^1.0.2"
+      }
+    },
     "node_modules/speakingurl": {
       "version": "14.0.1",
       "license": "BSD-3-Clause",
@@ -15885,9 +16043,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.6.tgz",
-      "integrity": "sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.7.tgz",
+      "integrity": "sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",

package/nuxt-base-template/package.json

@@ -69,20 +69,21 @@
     "@tailwindcss/vite": "4.1.18",
     "@types/node": "25.0.6",
     "@types/qrcode": "1.5.6",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/test-utils": "^2.4.6",
+    "@vitejs/plugin-vue": "6.0.3",
+    "@vue/test-utils": "2.4.6",
     "dayjs-nuxt": "2.1.11",
-    "happy-dom": "^20.3.7",
+    "happy-dom": "20.3.7",
     "jsdom": "27.4.0",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "16.2.7",
+    "mongodb": "7.1.0",
     "nuxt": "4.2.2",
     "oxfmt": "latest",
     "oxlint": "latest",
     "rimraf": "6.1.2",
-    "simple-git-hooks": "^2.13.1",
+    "simple-git-hooks": "2.13.1",
     "tailwindcss": "4.1.18",
     "typescript": "5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "3.2.4"
   },
   "engines": {
     "node": ">=22",

package/nuxt-base-template/tests/e2e/auth-feature-order.spec.ts

@@ -0,0 +1,379 @@
+import { expect, test } from '@nuxt/test-utils/playwright';
+import type { Page } from '@playwright/test';
+import * as fs from 'node:fs';
+import {
+  extractTOTPSecret,
+  fillInput,
+  generateTestUser,
+  generateTOTP,
+  gotoAndWaitForHydration,
+  waitForURLAndHydration,
+} from '@lenne.tech/nuxt-extensions/testing';
+
+/**
+ * Authentication E2E Tests - Feature Ordering & Error Translations
+ *
+ * Tests:
+ * - Test 1: Register → 2FA → Passkey (without logout) - order independence
+ * - Test 2: Register → Passkey → 2FA (without logout) - order independence
+ * - Test 3: Error Translations (German error messages, i18n endpoint)
+ *
+ * Automatically detects backend configuration via /iam/features.
+ *
+ * Requirements:
+ * - API: nest-server-starter OR nest-server running on port 3000
+ *        (stdout redirected to /tmp/nest-server.log or NEST_SERVER_LOG)
+ * - Frontend: nuxt-base-starter running on port 3001
+ *
+ * See auth-lifecycle.spec.ts for full documentation on backend options,
+ * configuration scenarios, and how to run against all 4 configurations.
+ *
+ * Run: npx playwright test tests/e2e/auth-feature-order.spec.ts
+ */
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface Features {
+  emailVerification: boolean;
+  enabled: boolean;
+  jwt: boolean;
+  passkey: boolean;
+  signUpChecks: boolean;
+  twoFactor: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const API_BASE = 'http://localhost:3000';
+const FRONTEND_BASE = 'http://localhost:3001';
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+/**
+ * Extract email verification token from backend server logs.
+ * The nest-server logs: [EMAIL VERIFICATION] User: <email>, URL: ...?token=<jwt>
+ */
+function getVerificationTokenFromLog(email: string): string | null {
+  const logPath = process.env.NEST_SERVER_LOG || '/tmp/nest-server.log';
+  try {
+    const log = fs.readFileSync(logPath, 'utf-8');
+    const regex = new RegExp(`\\[EMAIL VERIFICATION\\] User: ${email.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}, URL: .+?token=([^&\\s]+)`);
+    const match = log.match(regex);
+    return match?.[1] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Register a new user via UI.
+ * Adapts to current configuration (terms checkbox, email verification).
+ */
+async function registerUser(
+  page: Page,
+  user: { email: string; password: string; name: string },
+  features: Features,
+): Promise<void> {
+  await gotoAndWaitForHydration(page, '/auth/register');
+  await page.locator('input[name="name"]').waitFor({ state: 'visible', timeout: 10000 });
+
+  await fillInput(page, 'input[name="name"]', user.name);
+  await fillInput(page, 'input[name="email"]', user.email);
+  await fillInput(page, 'input[name="password"]', user.password);
+  await fillInput(page, 'input[name="confirmPassword"]', user.password);
+
+  // Accept terms if signUpChecks is enabled
+  if (features.signUpChecks) {
+    const termsCheckbox = page.getByRole('checkbox', { name: /akzeptiere die AGB/i });
+    await termsCheckbox.waitFor({ state: 'visible', timeout: 5000 });
+    await termsCheckbox.check();
+  }
+
+  await page.getByRole('button', { name: 'Konto erstellen' }).click();
+
+  if (features.emailVerification) {
+    // Wait for redirect to verify-email page
+    await waitForURLAndHydration(page, /\/auth\/verify-email/, { timeout: 15000 });
+
+    // Extract token from backend logs and verify email
+    let token: string | null = null;
+    for (let i = 0; i < 10; i++) {
+      token = getVerificationTokenFromLog(user.email);
+      if (token) break;
+      await new Promise(resolve => setTimeout(resolve, 500));
+    }
+    expect(token, 'Verification token not found in server logs').not.toBeNull();
+
+    await gotoAndWaitForHydration(page, `/auth/verify-email?token=${token}`);
+    await expect(page.getByRole('heading', { name: 'E-Mail bestätigt' })).toBeVisible({ timeout: 15000 });
+
+    // Login after verification
+    await page.getByRole('link', { name: 'Jetzt anmelden' }).click();
+    await waitForURLAndHydration(page, /\/auth\/login/, { timeout: 10000 });
+    await loginWithEmail(page, user.email, user.password);
+    await waitForURLAndHydration(page, /\/app/, { timeout: 15000 });
+  } else {
+    // Wait for passkey prompt and dismiss it
+    const laterButton = page.getByRole('button', { name: 'Später einrichten' });
+    await laterButton.waitFor({ state: 'visible', timeout: 10000 });
+    await laterButton.click();
+    await waitForURLAndHydration(page, /\/app/, { timeout: 15000 });
+  }
+}
+
+/**
+ * Login with email and password via UI
+ */
+async function loginWithEmail(page: Page, email: string, password: string): Promise<void> {
+  await gotoAndWaitForHydration(page, '/auth/login');
+  await page.locator('input[name="email"]').waitFor({ state: 'visible', timeout: 10000 });
+  await fillInput(page, 'input[name="email"]', email);
+  await fillInput(page, 'input[name="password"]', password);
+  await page.getByRole('button', { name: 'Anmelden', exact: true }).click();
+}
+
+/**
+ * Enable 2FA and return the TOTP secret.
+ * Uses network interception to extract the TOTP URI (QR code is SVG via v-html).
+ */
+async function enable2FA(page: Page, password: string): Promise<string> {
+  await gotoAndWaitForHydration(page, '/app/settings/security');
+
+  const enableButton = page.getByRole('button', { name: '2FA aktivieren' });
+  await enableButton.waitFor({ state: 'visible', timeout: 10000 });
+
+  const passwordInput = page.locator('input[type="password"]');
+  await passwordInput.click();
+  await page.keyboard.type(password, { delay: 5 });
+
+  // Intercept the 2FA enable response to extract TOTP URI
+  const responsePromise = page.waitForResponse(
+    resp => resp.url().includes('/two-factor/enable') && resp.status() === 200,
+  );
+
+  await enableButton.click();
+
+  const response = await responsePromise;
+  const responseBody = await response.json();
+  const totpUri = responseBody.totpURI || responseBody.data?.totpURI;
+  expect(totpUri, '2FA enable response should contain totpURI').toBeTruthy();
+
+  const secret = extractTOTPSecret(totpUri);
+  expect(secret).not.toBeNull();
+
+  // Wait for QR code SVG to render
+  await page.locator('.bg-white svg').waitFor({ state: 'visible', timeout: 10000 });
+
+  // Verify TOTP
+  const totpCode = generateTOTP(secret!);
+  await fillInput(page, 'input[placeholder="000000"]', totpCode);
+  await page.getByRole('button', { name: 'Verifizieren' }).click();
+
+  // Close backup codes dialog
+  await expect(page.getByRole('heading', { name: 'Backup-Codes' })).toBeVisible({ timeout: 10000 });
+  await page.keyboard.press('Escape');
+
+  return secret!;
+}
+
+/**
+ * Cleanup Virtual Authenticator
+ */
+async function cleanupAuthenticator(cdpSession: any, authenticatorId: string): Promise<void> {
+  try {
+    await cdpSession.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId });
+    await cdpSession.send('WebAuthn.disable');
+  } catch {
+    // Ignore cleanup errors
+  }
+}
+
+// =============================================================================
+// API Availability & Feature Detection
+// =============================================================================
+
+let apiAvailable = false;
+let features: Features | null = null;
+
+test.beforeAll(async ({ request }) => {
+  let frontendAvailable = false;
+
+  try {
+    const apiResponse = await request.get(`${API_BASE}/`);
+    apiAvailable = apiResponse.ok();
+  } catch {
+    apiAvailable = false;
+  }
+
+  try {
+    const frontendResponse = await request.get(`${FRONTEND_BASE}/`);
+    frontendAvailable = frontendResponse.ok();
+  } catch {
+    frontendAvailable = false;
+  }
+
+  if (!apiAvailable || !frontendAvailable) {
+    console.error('');
+    console.error('╔══════════════════════════════════════════════════════════════╗');
+    console.error('║  E2E TESTS REQUIRE RUNNING SERVERS                           ║');
+    console.error('╠══════════════════════════════════════════════════════════════╣');
+    console.error(`║  ${apiAvailable ? '✓' : '✗'} API Server (localhost:3000)     ║`);
+    console.error(`║  ${frontendAvailable ? '✓' : '✗'} Frontend (localhost:3001)  ║`);
+    console.error('╚══════════════════════════════════════════════════════════════╝');
+    apiAvailable = false;
+    return;
+  }
+
+  apiAvailable = true;
+
+  // Detect backend configuration
+  try {
+    const featuresResponse = await request.get(`${API_BASE}/iam/features`);
+    features = await featuresResponse.json() as Features;
+  } catch {
+    features = {
+      emailVerification: true,
+      enabled: true,
+      jwt: false,
+      passkey: true,
+      signUpChecks: true,
+      twoFactor: true,
+    };
+  }
+});
+
+// =============================================================================
+// Test 1: Register -> 2FA -> Passkey (without logout)
+// =============================================================================
+
+test.describe.serial('Test 1: Register -> 2FA -> Passkey (no logout)', () => {
+  const testUser = generateTestUser('2fa-then-passkey');
+
+  test('Register, enable 2FA, then add Passkey without logout', async ({ page, context }) => {
+    test.skip(!apiAvailable, 'Servers not running');
+
+    // Register (adapts to config)
+    await registerUser(page, testUser, features!);
+
+    // Enable 2FA
+    await enable2FA(page, testUser.password);
+
+    // Add Passkey
+    const cdpSession = await context.newCDPSession(page);
+    await cdpSession.send('WebAuthn.enable');
+
+    const { authenticatorId } = await cdpSession.send(
+      'WebAuthn.addVirtualAuthenticator',
+      {
+        options: {
+          protocol: 'ctap2',
+          transport: 'internal',
+          hasResidentKey: true,
+          hasUserVerification: true,
+          isUserVerified: true,
+        },
+      },
+    );
+
+    try {
+      await gotoAndWaitForHydration(page, '/app/settings/security');
+      await page.getByRole('button', { name: 'Passkey hinzufügen' }).click();
+      await page.getByPlaceholder('Name für den Passkey').fill('After-2FA-Passkey');
+      await page.getByRole('button', { name: 'Hinzufügen' }).click();
+
+      await expect(page.getByText('After-2FA-Passkey')).toBeVisible({ timeout: 15000 });
+      await expect(page.getByText('2FA ist aktiviert')).toBeVisible();
+    } finally {
+      await cleanupAuthenticator(cdpSession, authenticatorId);
+    }
+  });
+});
+
+// =============================================================================
+// Test 2: Register -> Passkey -> 2FA (without logout)
+// =============================================================================
+
+test.describe.serial('Test 2: Register -> Passkey -> 2FA (no logout)', () => {
+  const testUser = generateTestUser('passkey-then-2fa');
+
+  test('Register, add Passkey, then enable 2FA without logout', async ({ page, context }) => {
+    test.skip(!apiAvailable, 'Servers not running');
+
+    // Register (adapts to config)
+    await registerUser(page, testUser, features!);
+
+    // Add Passkey first
+    const cdpSession = await context.newCDPSession(page);
+    await cdpSession.send('WebAuthn.enable');
+
+    const { authenticatorId } = await cdpSession.send(
+      'WebAuthn.addVirtualAuthenticator',
+      {
+        options: {
+          protocol: 'ctap2',
+          transport: 'internal',
+          hasResidentKey: true,
+          hasUserVerification: true,
+          isUserVerified: true,
+        },
+      },
+    );
+
+    try {
+      await gotoAndWaitForHydration(page, '/app/settings/security');
+      await page.getByRole('button', { name: 'Passkey hinzufügen' }).click();
+      await page.getByPlaceholder('Name für den Passkey').fill('Before-2FA-Passkey');
+      await page.getByRole('button', { name: 'Hinzufügen' }).click();
+
+      await expect(page.getByText('Before-2FA-Passkey')).toBeVisible({ timeout: 15000 });
+
+      // Enable 2FA
+      await enable2FA(page, testUser.password);
+
+      // Verify both are active
+      await gotoAndWaitForHydration(page, '/app/settings/security');
+      await expect(page.getByText('2FA ist aktiviert')).toBeVisible();
+      await expect(page.getByText('Before-2FA-Passkey')).toBeVisible();
+    } finally {
+      await cleanupAuthenticator(cdpSession, authenticatorId);
+    }
+  });
+});
+
+// =============================================================================
+// Test 3: Error Translations
+// =============================================================================
+
+test.describe('Test 3: Error Translations', () => {
+  test('3.1 Invalid credentials shows German error message', async ({ page }) => {
+    test.skip(!apiAvailable, 'Servers not running');
+
+    await loginWithEmail(page, 'invalid@test.com', 'WrongPassword123!');
+
+    const toast = page.locator('li[role="alert"]');
+    await expect(toast).toBeVisible({ timeout: 10000 });
+    await expect(toast).toContainText('Ungültige Anmeldedaten');
+  });
+
+  test('3.2 Error translations are loaded from backend', async ({ page }) => {
+    test.skip(!apiAvailable, 'Servers not running');
+
+    await gotoAndWaitForHydration(page, '/auth/login');
+
+    const response = await page.request.get(`${FRONTEND_BASE}/api/i18n/errors/de`);
+    expect([200, 304]).toContain(response.status());
+
+    if (response.status() === 200) {
+      const data = await response.json();
+      expect(data).toHaveProperty('errors');
+      expect(data.errors).toHaveProperty('LTNS_0010');
+      console.info(`  Error translations loaded: ${Object.keys(data.errors).length} codes`);
+    }
+  });
+});