feat(journey-app): delete webauthn device from AM using device client

Author: vatsalparikh

e2e/journey-app/components/webauthn-step.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+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(): Promise<boolean> {
+    try {
+      if (webAuthnStepType === WebAuthnStepType.Authentication) {
+        console.log('trying authentication');
+        await WebAuthn.authenticate(step);
+        return true;
+      }
+
+      if (webAuthnStepType === WebAuthnStepType.Registration) {
+        console.log('trying registration');
+        await WebAuthn.register(step);
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  return handleWebAuthn();
+}

e2e/journey-app/components/webauthn.ts

@@ -15,15 +15,13 @@ import { renderCallbacks } from './callback-map.js';
 import { renderDeleteDevicesSection } from './components/delete-device.js';
 import { renderQRCodeStep } from './components/qr-code.js';
 import { renderRecoveryCodesStep } from './components/recovery-codes.js';
-import { deleteWebAuthnDevice } from './services/delete-webauthn-devices.js';
-import { webauthnComponent } from './components/webauthn.js';
+import { deleteWebAuthnDevice } from './services/delete-webauthn-device.js';
+import { webauthnComponent } from './components/webauthn-step.js';
 import { serverConfigs } from './server-configs.js';
 
 const qs = window.location.search;
 const searchParams = new URLSearchParams(qs);
 
-const WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM = 'webauthnCredentialId';
-
 const config = serverConfigs[searchParams.get('clientId') || 'basic'];
 
 const journeyName = searchParams.get('journey') ?? 'UsernamePassword';
@@ -65,27 +63,9 @@ if (searchParams.get('middleware') === 'true') {
   const formEl = document.getElementById('form') as HTMLFormElement;
   const journeyEl = document.getElementById('journey') as HTMLDivElement;
 
-  const getCredentialIdFromUrl = (): string | null => {
-    const params = new URLSearchParams(window.location.search);
-    const value = params.get(WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM);
-    return value && value.length > 0 ? value : null;
-  };
-
-  const setCredentialIdInUrl = (credentialId: string | null): void => {
-    const url = new URL(window.location.href);
-    if (credentialId) {
-      url.searchParams.set(WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM, credentialId);
-    } else {
-      url.searchParams.delete(WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM);
-    }
-    window.history.replaceState({}, document.title, url.toString());
-  };
-
-  let registrationCredentialId: string | null = getCredentialIdFromUrl();
-
   let journeyClient: JourneyClient;
   try {
-    journeyClient = await journey({ config, requestMiddleware });
+    journeyClient = await journey({ config: config, requestMiddleware });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     console.error('Failed to initialize journey client:', message);
@@ -134,13 +114,8 @@ if (searchParams.get('middleware') === 'true') {
       webAuthnStep === WebAuthnStepType.Authentication ||
       webAuthnStep === WebAuthnStepType.Registration
     ) {
-      const webAuthnResponse = await webauthnComponent(journeyEl, step, 0);
-      if (webAuthnResponse.success) {
-        if (webAuthnResponse.credentialId) {
-          registrationCredentialId = webAuthnResponse.credentialId;
-          setCredentialIdInUrl(registrationCredentialId);
-          console.log('[WebAuthn] stored registration credentialId:', registrationCredentialId);
-        }
+      const webAuthnSuccess = await webauthnComponent(journeyEl, step, 0);
+      if (webAuthnSuccess) {
         submitForm();
         return;
       } else {
@@ -180,9 +155,7 @@ if (searchParams.get('middleware') === 'true') {
     completeHeader.innerText = 'Complete';
     journeyEl.appendChild(completeHeader);
 
-    renderDeleteDevicesSection(journeyEl, () =>
-      deleteWebAuthnDevice(config, registrationCredentialId),
-    );
+    renderDeleteDevicesSection(journeyEl, () => deleteWebAuthnDevice(config));
 
     const sessionLabelEl = document.createElement('span');
     sessionLabelEl.id = 'sessionLabel';

e2e/journey-app/main.ts

@@ -82,10 +82,12 @@ async function getUserIdFromSession(baseUrl: string, realmUrlPath: string): Prom
  *
  * This queries devices via device-client and deletes the matching device.
  */
-export async function deleteWebAuthnDevice(
-  config: JourneyClientConfig,
-  credentialId: string | null,
-): Promise<string> {
+export async function deleteWebAuthnDevice(config: JourneyClientConfig): Promise<string> {
+  const WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM = 'webauthnCredentialId';
+
+  const params = new URLSearchParams(window.location.search);
+  const credentialId = params.get(WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM);
+
   if (!credentialId) {
     return 'No credential id found. Register a WebAuthn device first.';
   }

…-app/services/delete-webauthn-devices.ts …y-app/services/delete-webauthn-device.tse2e/journey-app/services/delete-webauthn-devices.ts renamed to e2e/journey-app/services/delete-webauthn-device.ts e2e/journey-app/services/delete-webauthn-devices.ts renamed to e2e/journey-app/services/delete-webauthn-device.ts

@@ -0,0 +1,73 @@
+# WebAuthn E2E Testing Pattern
+
+This document explains how the WebAuthn device deletion test works in the journey suites, where it integrates with the journey app, and how this pattern can be used by other apps
+
+## What The Test Does
+
+1. A virtual authenticator can register a WebAuthn credential during a journey.
+2. The registered credential can be used to authenticate in a later journey.
+3. The credential id captured from the browser can be passed into the journey app.
+4. The journey app can use that credential id to delete the matching registered device.
+
+## Virtual Authenticator Setup In The Test
+
+1. Chromium is required for CDP WebAuthn support.
+2. The virtual authenticator is configured as a platform authenticator.
+3. Resident key and user verification are enabled.
+4. Presence and verification are automatically simulated for repeatable automation.
+
+## Journey Prereqs
+
+The journeys used here are `TEST_WebAuthn-Registration` and `TEST_WebAuthnAuthentication`. To use the registration journey, a user must already exist. The user logs in, and then regsiteres a platform authenticator. Autthentication journey logs the user in based on their biometrics and does not require a username or password.
+
+## Test Flow
+
+The test is organized with `test.step(...)` so each phase shows what artifact it produces for the next phase.
+
+### 1. Register a WebAuthn device and capture the device credential id
+
+The test starts with an empty virtual authenticator and then drives the registration journey:
+
+1. Navigate to `TEST_WebAuthn-Registration`.
+2. Fill username and password.
+3. Submit the form.
+4. Wait for a successful post-login state.
+5. Read credentials from the virtual authenticator through CDP.
+
+The important artifact from this step is the registered credential id. The test converts it to base64url because that is the form used when passing the id through the URL.
+
+### 2. Pass the registered credential id into the journey-app integration
+
+The next step updates the current URL with the `webauthnCredentialId` query parameter and switches the journey to `TEST_WebAuthnAuthentication`.
+
+This is the integration between the test and the journey app:
+
+1. The browser creates the credential.
+2. The test captures the credential id.
+3. The journey app later reads that credential id from the query param when deleting a device.
+
+### 3. Authenticate with the registered WebAuthn device
+
+The test logs out, navigates to the authentication journey, and signs in again to prove that the newly registered WebAuthn credential is valid.
+
+Authentication depends on the registered WebAuthn credential being present in the browser's virtual authenticator. It does not depend on the `webauthnCredentialId` query parameter.
+
+### 4. Delete the registered device through the journey-app integration
+
+After authentication succeeds, the test clicks the delete button rendered by the journey app and waits for the status message.
+
+The assertion checks that the status message for deleted device contains the same credential id captured from the virtual authenticator. That confirms the deletion flow acted on the same device that the browser originally registered.
+
+## App Integration Points
+
+1. The app accepts the credential id.
+2. The app resolves the signed-in user.
+3. The app finds and deletes the matching device using device-client API.
+4. What success UI the app renders after deletion.
+
+## Testing Pattern
+
+1. The underlying pattern here is credential id based webauthn validation. Virtual authenticator can generate unique credendial ids for each registration, and this helps to easily track the device during deletion.
+2. Credential ids are passed around with query params, which makes it easy to replicate tests without any dependency on external storage.
+3. The test provides freedom to choose how to resolve the uuid depending on the app, so the app can decide whether to retrieve the uuid through OIDC, session, or another way.
+4. The test lets the app decide how to handle app-specific UI, so this pattern is framework agnostic and can be used by any app that supports Playwright, whether it's React, Vue, or Svelte.