test: add full MFA flow E2E using a virtual authenticator

Chromium's CDP WebAuthn virtual authenticator drives the entire flow without
hardware: enroll a passkey, password login, get redirected to the challenge
page, verify with the passkey, confirm both factors are satisfied and the
profile page renders the MFA badges. Runs in a new chromium-mfa Playwright
project (tagged @mfa-enabled) against a server started with the mfa profile;
the default projects exclude the tag since their specs assume MFA is off.
The webServer profiles are now overridable via SPRING_PROFILES.

Author: devondragon

playwright/playwright.config.ts

@@ -84,38 +84,55 @@ export default defineConfig({
     timeout: 10000,
   },
 
-  /* Configure projects for major browsers */
+  /* Configure projects for major browsers.
+   *
+   * Tests tagged @mfa-enabled need the server running with the mfa profile and are excluded from
+   * the default projects (whose specs assume MFA is off). Run them with:
+   *   SPRING_PROFILES=local,playwright-test,mfa npx playwright test --project=chromium-mfa
+   */
   projects: [
     {
       name: 'chromium',
+      grepInvert: /@mfa-enabled/,
       use: { ...devices['Desktop Chrome'] },
     },
 
     {
       name: 'firefox',
+      grepInvert: /@mfa-enabled/,
       use: { ...devices['Desktop Firefox'] },
     },
 
     {
       name: 'webkit',
+      grepInvert: /@mfa-enabled/,
       use: { ...devices['Desktop Safari'] },
     },
 
     /* Test against mobile viewports */
     {
       name: 'Mobile Chrome',
+      grepInvert: /@mfa-enabled/,
       use: { ...devices['Pixel 5'] },
     },
 
     {
       name: 'Mobile Safari',
+      grepInvert: /@mfa-enabled/,
       use: { ...devices['iPhone 12'] },
     },
+
+    /* MFA flow tests: Chromium only (CDP virtual authenticator), MFA-enabled server required */
+    {
+      name: 'chromium-mfa',
+      grep: /@mfa-enabled/,
+      use: { ...devices['Desktop Chrome'] },
+    },
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'cd .. && ./gradlew bootRun --args="--spring.profiles.active=local,playwright-test"',
+    command: `cd .. && ./gradlew bootRun --args="--spring.profiles.active=${process.env.SPRING_PROFILES || 'local,playwright-test'}"`,
     url: 'http://localhost:8080',
     reuseExistingServer: !process.env.CI,
     timeout: 120000,

playwright/tests/mfa/mfa-flow.spec.ts

@@ -0,0 +1,78 @@
+import { test, expect, generateTestUser, createAndLoginUser } from '../../src/fixtures';
+
+/**
+ * Full MFA flow E2E test using Chromium's CDP WebAuthn virtual authenticator.
+ *
+ * Requires the app to run with MFA enabled:
+ *   SPRING_PROFILES=local,playwright-test,mfa npx playwright test --project=chromium-mfa
+ * (or start the server yourself with those profiles; the mfa profile must come last so its
+ * overrides win).
+ *
+ * Tagged @mfa-enabled so the default projects skip it — their specs assume MFA is off.
+ */
+test.describe('MFA Full Flow @mfa-enabled', () => {
+  test('password login requires passkey verification before reaching protected pages', async ({
+    page,
+    testApiClient,
+    cleanupEmails,
+  }) => {
+    const user = generateTestUser('mfa-e2e');
+    cleanupEmails.push(user.email);
+
+    // Set up a virtual authenticator before any WebAuthn ceremony. automaticPresenceSimulation
+    // auto-approves create()/get() prompts so no human touch is needed.
+    const cdp = await page.context().newCDPSession(page);
+    await cdp.send('WebAuthn.enable');
+    await cdp.send('WebAuthn.addVirtualAuthenticator', {
+      options: {
+        protocol: 'ctap2',
+        transport: 'internal',
+        hasResidentKey: true,
+        hasUserVerification: true,
+        isUserVerified: true,
+        automaticPresenceSimulation: true,
+      },
+    });
+
+    // Password login leaves the user partially authenticated: PASSWORD satisfied, WEBAUTHN missing.
+    await createAndLoginUser(page, testApiClient, user);
+
+    const partialStatus = await (await page.request.get('/user/mfa/status')).json();
+    expect(partialStatus.data.satisfiedFactors).toContain('PASSWORD');
+    expect(partialStatus.data.missingFactors).toContain('WEBAUTHN');
+    expect(partialStatus.data.fullyAuthenticated).toBe(false);
+
+    // Any protected page redirects to the challenge page (and must not redirect-loop).
+    await page.goto('/user/update-user.html');
+    await expect(page).toHaveURL(/\/user\/mfa\/webauthn-challenge\.html/);
+    await expect(page.locator('#verifyPasskeyBtn')).toBeVisible();
+
+    // Enroll the user's first passkey. The mfa profile unprotects the enrollment endpoints so a
+    // partially-authenticated user can register; the virtual authenticator answers the ceremony.
+    await page.evaluate(async () => {
+      const { registerPasskey } = await import('/js/user/webauthn-register.js');
+      await registerPasskey('e2e-virtual-passkey');
+    });
+
+    // Complete the challenge with the freshly enrolled passkey.
+    await page.locator('#verifyPasskeyBtn').click();
+    await page.waitForURL((url) => !url.pathname.includes('webauthn-challenge'), {
+      timeout: 15000,
+    });
+
+    // Both factors satisfied now.
+    const fullStatus = await (await page.request.get('/user/mfa/status')).json();
+    expect(fullStatus.data.fullyAuthenticated).toBe(true);
+    expect(fullStatus.data.missingFactors).toEqual([]);
+
+    // Protected pages are reachable again.
+    await page.goto('/user/update-user.html');
+    await expect(page).toHaveURL(/\/user\/update-user\.html/);
+
+    // And the profile page renders the MFA badges from the status endpoint's data envelope.
+    const badges = page.locator('#mfaStatusBadges');
+    await expect(badges).toContainText('MFA Active');
+    await expect(badges).toContainText('Fully Authenticated');
+    await expect(badges).not.toContainText('Additional Factor Required');
+  });
+});