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,24 +63,6 @@ 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 });
@@ -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

@@ -10,6 +10,8 @@ import type { CDPSession } from '@playwright/test';
 import { asyncEvents } from './utils/async-events.js';
 import { username, password } from './utils/demo-user.js';
 
+const WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM = 'webauthnCredentialId';
+
 test.use({ browserName: 'chromium' });
 
 function toBase64Url(value: string): string {
@@ -75,6 +77,10 @@ test.describe('WebAuthn register, authenticate, and delete device', () => {
 
     // assert registered credentialId in query param matches virtual authenticator credentialId
     const registrationUrl = new URL(page.url());
+    registrationUrl.searchParams.set(
+      WEBAUTHN_CREDENTIAL_ID_QUERY_PARAM,
+      toBase64Url(virtualCredentialId),
+    );
     const registrationUrlValues = Array.from(registrationUrl.searchParams.values());
     expect(registrationUrlValues).toContain(toBase64Url(virtualCredentialId));