test: add-virtual-authenticator-tests

.zed/tasks.json

@@ -0,0 +1,90 @@
+// Project tasks configuration. See https://zed.dev/docs/tasks for documentation.
+[
+  {
+    "label": "nx build",
+    "command": "pnpm",
+    "args": ["nx", "affected", "-t build", "--parallel=3"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "use_new_terminal": false,
+    "allow_concurrent_runs": true,
+    "reveal": "no_focus"
+  },
+  {
+    "label": "nx lint",
+    "command": "pnpm",
+    "args": ["nx", "affected", "-t lint", "--parallel=3"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "use_new_terminal": false,
+    "allow_concurrent_runs": true,
+    "reveal": "no_focus"
+  },
+  {
+    "label": "nx test",
+    "command": "pnpm",
+    "args": ["nx", "affected", "-t test", "--parallel=3"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "use_new_terminal": false,
+    "allow_concurrent_runs": true,
+    "reveal": "no_focus"
+  },
+  {
+    "label": "nx watch davinci-watch",
+    "command": "pnpm",
+    "args": ["watch", "@forgerock/davinci-app"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "use_new_terminal": true,
+    "allow_concurrent_runs": true,
+    "reveal": "always"
+  },
+  {
+    "label": "nx watch oidc-e2e",
+    "command": "pnpm",
+    "args": ["watch", "@forgerock/oidc-app"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "use_new_terminal": true,
+    "allow_concurrent_runs": true,
+    "reveal": "no_focus"
+  },
+  {
+    "label": "nx watch protect-watch",
+    "command": "pnpm",
+    "args": ["watch", "@forgerock/protect-app"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "use_new_terminal": true,
+    "allow_concurrent_runs": true,
+    "reveal": "no_focus"
+  },
+  {
+    "label": "nx typecheck repo",
+    "command": "pnpm",
+    "args": ["nx", "affected -t typecheck"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "reveal": "no_focus"
+  },
+  {
+    "label": "oidc e2e ui",
+    "command": "pnpm",
+    "args": ["nx", "e2e", "@forgerock/oidc-suites", "--ui", "--skipNxCache"],
+    "cwd": "$ZED_WORKTREE_ROOT"
+  },
+  {
+    "label": "protect-app e2e ui",
+    "command": "pnpm",
+    "args": ["nx", "e2e", "@forgerock/protect-suites", "--ui", "--skipNxCache"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "reveal": "no_focus"
+  },
+  {
+    "label": "local release repo",
+    "command": "pnpm",
+    "args": ["release-local"],
+    "cwd": "$ZED_WORKTREE_ROOT",
+    "reveal": "no_focus"
+  },
+  {
+    "label": "journey e2e ui",
+    "command": "pnpm",
+    "args": ["nx", "e2e", "@forgerock/journey-suites", "--ui", "--skipNxCache"],
+    "cwd": "$ZED_WORKTREE_ROOT"
+  }
+]

e2e/journey-app/components/webauthn.ts

@@ -0,0 +1,31 @@
+import { JourneyStep } from '@forgerock/journey-client/types';
+import { WebAuthn, WebAuthnStepType } from '@forgerock/journey-client/webauthn';
+
+export function webauthnComponent(journeyEl: HTMLDivElement, step: JourneyStep, idx: number) {
+  const container = document.createElement('div');
+  container.id = `webauthn-container-${idx}`;
+  const info = document.createElement('p');
+  info.innerText = 'Please complete the WebAuthn challenge using your authenticator.';
+  container.appendChild(info);
+  journeyEl.appendChild(container);
+
+  const webAuthnStepType = WebAuthn.getWebAuthnStepType(step);
+
+  async function handleWebAuthn() {
+    try {
+      if (webAuthnStepType === WebAuthnStepType.Authentication) {
+        console.log('trying authentication');
+        await WebAuthn.authenticate(step);
+        console.log('trying registration');
+      } else if (WebAuthnStepType.Registration === webAuthnStepType) {
+        await WebAuthn.register(step);
+      } else {
+        return Promise.resolve(undefined);
+      }
+    } catch (error) {
+      console.error('WebAuthn error:', error);
+    }
+  }
+
+  return handleWebAuthn();
+}

e2e/journey-app/main.ts

@@ -9,19 +9,22 @@ import './style.css';
 import { journey } from '@forgerock/journey-client';
 
 import type {
-  RequestMiddleware,
   NameCallback,
   PasswordCallback,
+  RequestMiddleware,
 } from '@forgerock/journey-client/types';
 
-import textComponent from './components/text.js';
 import passwordComponent from './components/password.js';
+import textComponent from './components/text.js';
 import { serverConfigs } from './server-configs.js';
+import { webauthnComponent } from './components/webauthn.js';
+import { WebAuthn, WebAuthnStepType } from '@forgerock/journey-client/webauthn';
 
 const qs = window.location.search;
 const searchParams = new URLSearchParams(qs);
 
-const config = serverConfigs[searchParams.get('clientId') || 'basic'];
+const journeyName = searchParams.get('clientId') || 'UsernamePassword';
+const config = serverConfigs[journeyName];
 
 const requestMiddleware: RequestMiddleware[] = [
   (req, action, next) => {
@@ -48,7 +51,7 @@ const requestMiddleware: RequestMiddleware[] = [
   const formEl = document.getElementById('form') as HTMLFormElement;
   const journeyEl = document.getElementById('journey') as HTMLDivElement;
 
-  let step = await journeyClient.start();
+  let step = await journeyClient.start({ ...config, journey: journeyName });
 
   function renderComplete() {
     if (step?.type !== 'LoginSuccess') {
@@ -103,9 +106,30 @@ const requestMiddleware: RequestMiddleware[] = [
     header.innerText = formName || '';
     journeyEl.appendChild(header);
 
-    const callbacks = step.callbacks;
+    const webAuthnStep = WebAuthn.getWebAuthnStepType(step);
+
+    if (
+      webAuthnStep === WebAuthnStepType.Authentication ||
+      webAuthnStep === WebAuthnStepType.Registration
+    ) {
+      await webauthnComponent(journeyEl, step, 0);
+      step = await journeyClient.next(step);
+      if (step?.type === 'Step') {
+        await renderForm();
+      } else if (step?.type === 'LoginSuccess') {
+        console.log('Basic login successful');
+        renderComplete();
+      } else if (step?.type === 'LoginFailure') {
+        renderForm();
+        renderError();
+      } else {
+        console.error('Unknown node status', step);
+      }
+      return; // prevent the rest of the function from running
+    }
 
-    callbacks.forEach((callback, idx) => {
+    const callbacks = step.callbacks;
+    callbacks.forEach(async (callback, idx) => {
       if (callback.getType() === 'NameCallback') {
         const cb = callback as NameCallback;
         textComponent(
@@ -146,7 +170,7 @@ const requestMiddleware: RequestMiddleware[] = [
      * Recursively render the form with the new state
      */
     if (step?.type === 'Step') {
-      renderForm();
+      await renderForm();
     } else if (step?.type === 'LoginSuccess') {
       console.log('Basic login successful');
       renderComplete();

e2e/journey-app/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@forgerock/journey-client": "workspace:*",
     "@forgerock/oidc-client": "workspace:*",
-    "@forgerock/sdk-logger": "workspace:*"
+    "@forgerock/sdk-logger": "workspace:*",
+    "@forgerock/sdk-types": "workspace:*"
   }
 }

e2e/journey-app/server-configs.ts

@@ -7,7 +7,37 @@
 import type { JourneyClientConfig } from '@forgerock/journey-client/types';
 
 export const serverConfigs: Record<string, JourneyClientConfig> = {
-  basic: {
+  UsernamePassword: {
+    serverConfig: {
+      baseUrl: 'https://openam-sdks.forgeblocks.com/am/',
+    },
+    realmPath: '/alpha',
+  },
+  ['TEST_WebAuthn-Registration']: {
+    serverConfig: {
+      baseUrl: 'https://openam-sdks.forgeblocks.com/am/',
+    },
+    realmPath: '/alpha',
+  },
+  ['TEST_WebAuthnAuthentication_UsernamePassword']: {
+    serverConfig: {
+      baseUrl: 'https://openam-sdks.forgeblocks.com/am/',
+    },
+    realmPath: '/alpha',
+  },
+  ['TEST_WebAuthnAuthentication']: {
+    serverConfig: {
+      baseUrl: 'https://openam-sdks.forgeblocks.com/am/',
+    },
+    realmPath: '/alpha',
+  },
+  ['TEST_WebAuthn-Registration-UsernameToDevice']: {
+    serverConfig: {
+      baseUrl: 'https://openam-sdks.forgeblocks.com/am/',
+    },
+    realmPath: '/alpha',
+  },
+  ['TEST_WebAuthnAuthentication_Usernameless']: {
     serverConfig: {
       baseUrl: 'https://openam-sdks.forgeblocks.com/am/',
     },

e2e/journey-app/tsconfig.app.json

@@ -18,6 +18,9 @@
     {
       "path": "../../packages/oidc-client/tsconfig.lib.json"
     },
+    {
+      "path": "../../packages/sdk-types/tsconfig.lib.json"
+    },
     {
       "path": "../../packages/journey-client/tsconfig.lib.json"
     }

e2e/journey-app/tsconfig.json

@@ -20,6 +20,9 @@
     {
       "path": "../../packages/oidc-client"
     },
+    {
+      "path": "../../packages/sdk-types"
+    },
     {
       "path": "../../packages/journey-client"
     },

e2e/journey-suites/playwright.config.ts

@@ -26,7 +26,7 @@ const config: PlaywrightTestConfig = {
   webServer: [
     process.env.CI == 'false'
       ? {
-          command: 'pnpm watch @forgerock/journey-app',
+          command: 'pnpm nx vite:watch-deps @forgerock/journey-app',
           port: 5829,
           ignoreHTTPSErrors: true,
           reuseExistingServer: !process.env.CI,

e2e/journey-suites/src/webauthn-username-password.test.ts

@@ -0,0 +1,119 @@
+import { test, expect } from '@playwright/test';
+import type { CDPSession } from 'playwright';
+import { asyncEvents } from './utils/async-events.js';
+import { password, username } from './utils/demo-user.js';
+
+test.use({ browserName: 'chromium' }); // ensure CDP/WebAuthn is available
+
+test('Register and authenticate with webauthn device (username + password journey)', async ({
+  page,
+  context,
+}) => {
+  let cdp: CDPSession | undefined;
+  let authenticatorId: string | undefined;
+  let webauthnEnabled = false;
+  let recordedCredentialIds: string[] = [];
+
+  await test.step('Configure virtual authenticator', async () => {
+    cdp = await context.newCDPSession(page);
+    await cdp.send('WebAuthn.enable');
+    webauthnEnabled = true;
+
+    // A "platform" authenticator (aka internal) with UV+RK enabled is the usual default for passkeys.
+    const response = await cdp.send('WebAuthn.addVirtualAuthenticator', {
+      options: {
+        protocol: 'ctap2',
+        transport: 'internal', // platform authenticator
+        hasResidentKey: true, // allow discoverable credentials (passkeys)
+        hasUserVerification: true, // device supports UV
+        isUserVerified: true, // simulate successful UV (PIN/biometric)
+        automaticPresenceSimulation: true, // auto "touch"/presence
+      },
+    });
+    authenticatorId = response.authenticatorId;
+  });
+
+  const { navigate } = asyncEvents(page);
+
+  try {
+    // First, register a credential we can use later
+    await test.step('Navigate to registration journey', async () => {
+      await navigate('/?clientId=TEST_WebAuthn-Registration');
+      await expect(page).toHaveURL('http://localhost:5829/?clientId=TEST_WebAuthn-Registration');
+    });
+
+    await test.step('Complete primary credentials', async () => {
+      await page.getByLabel('User Name').fill(username);
+      await page.getByLabel('Password').fill(password);
+      await page.getByRole('button', { name: 'Submit' }).click();
+    });
+
+    await test.step('Register WebAuthn credential', async () => {
+      // With the virtual authenticator present and presence auto-simulated,
+      // registration will complete without any OS prompts.
+      await expect(page.getByRole('button', { name: 'Logout' })).toBeVisible();
+    });
+
+    await test.step('Capture virtual authenticator credentials', async () => {
+      if (!cdp || !authenticatorId) {
+        throw new Error('Expected CDP session and authenticator to be configured');
+      }
+      const { credentials } = await cdp.send('WebAuthn.getCredentials', { authenticatorId });
+      recordedCredentialIds = (credentials || []).map((item) => item.credentialId);
+      expect(recordedCredentialIds.length).toBeGreaterThan(0);
+    });
+
+    await test.step('Logout after registration', async () => {
+      await page.getByRole('button', { name: 'Logout' }).click();
+      await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+    });
+
+    // Now authenticate via Username -> Password -> WebAuthn
+    await test.step('Navigate to username+password authentication journey', async () => {
+      await navigate('/?clientId=TEST_WebAuthnAuthentication_UsernamePassword');
+      await expect(page).toHaveURL(
+        'http://localhost:5829/?clientId=TEST_WebAuthnAuthentication_UsernamePassword',
+      );
+    });
+
+    await test.step('Complete username credential', async () => {
+      await page.getByLabel('User Name').fill(username);
+      await page.getByRole('button', { name: 'Submit' }).click();
+    });
+
+    await test.step('Complete password credential', async () => {
+      await page.getByLabel('Password').fill(password);
+      await page.getByRole('button', { name: 'Submit' }).click();
+    });
+
+    await test.step('Authenticate WebAuthn credential', async () => {
+      if (!cdp || !authenticatorId) {
+        throw new Error('Expected CDP session and authenticator to be configured');
+      }
+      // Server has UV set to Discouraged; providing UV is fine.
+      await cdp.send('WebAuthn.setUserVerified', { authenticatorId, isUserVerified: true });
+      // With the virtual authenticator present and presence auto-simulated,
+      // authentication will complete without any OS prompts.
+      await expect(page.getByRole('button', { name: 'Logout' })).toBeVisible();
+    });
+
+    await test.step('Logout after authentication', async () => {
+      await page.getByRole('button', { name: 'Logout' }).click();
+      await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+    });
+  } finally {
+    if (!cdp) {
+      return;
+    }
+
+    const activeCdp = cdp;
+    await test.step('Remove virtual authenticator', async () => {
+      if (authenticatorId) {
+        await activeCdp.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId });
+      }
+      if (webauthnEnabled) {
+        await activeCdp.send('WebAuthn.disable');
+      }
+    });
+  }
+});