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

Author: vatsalparikh

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

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+export function renderDeleteDevicesSection(
+  journeyEl: HTMLDivElement,
+  storeDevicesBeforeSession: () => Promise<string>,
+  deleteDevicesInSession: () => Promise<string>,
+  deleteAllDevices: () => Promise<string>,
+): void {
+  const getDevicesButton = document.createElement('button');
+  getDevicesButton.type = 'button';
+  getDevicesButton.id = 'getDevicesButton';
+  getDevicesButton.innerText = 'Get Registered Devices';
+
+  const deleteDevicesButton = document.createElement('button');
+  deleteDevicesButton.type = 'button';
+  deleteDevicesButton.id = 'deleteDevicesButton';
+  deleteDevicesButton.innerText = 'Delete Devices From This Session';
+
+  const deleteAllDevicesButton = document.createElement('button');
+  deleteAllDevicesButton.type = 'button';
+  deleteAllDevicesButton.id = 'deleteAllDevicesButton';
+  deleteAllDevicesButton.innerText = 'Delete All Registered Devices';
+
+  const deviceStatus = document.createElement('pre');
+  deviceStatus.id = 'deviceStatus';
+  deviceStatus.style.minHeight = '1.5em';
+
+  journeyEl.appendChild(getDevicesButton);
+  journeyEl.appendChild(deleteDevicesButton);
+  journeyEl.appendChild(deleteAllDevicesButton);
+  journeyEl.appendChild(deviceStatus);
+
+  async function setDeviceStatus(
+    progressStatus: string,
+    action: () => Promise<string>,
+    errorPrefix: string,
+  ): Promise<void> {
+    try {
+      deviceStatus.innerText = progressStatus;
+
+      const successMessage = await action();
+      deviceStatus.innerText = successMessage;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      deviceStatus.innerText = `${errorPrefix}: ${message}`;
+    }
+  }
+
+  getDevicesButton.addEventListener('click', async () => {
+    await setDeviceStatus(
+      'Retrieving existing WebAuthn devices...',
+      storeDevicesBeforeSession,
+      'Get existing devices failed',
+    );
+  });
+
+  deleteDevicesButton.addEventListener('click', async () => {
+    await setDeviceStatus(
+      'Deleting WebAuthn devices in this session...',
+      deleteDevicesInSession,
+      'Delete failed',
+    );
+  });
+
+  deleteAllDevicesButton.addEventListener('click', async () => {
+    await setDeviceStatus(
+      'Deleting all registered WebAuthn devices...',
+      deleteAllDevices,
+      'Delete failed',
+    );
+  });
+}

e2e/journey-app/components/webauthn.ts

@@ -0,0 +1,40 @@
+/*
+ * 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;
+      } else if (WebAuthnStepType.Registration === webAuthnStepType) {
+        console.log('trying registration');
+        await WebAuthn.register(step);
+        return true;
+      } else {
+        return false;
+      }
+    } catch {
+      return false;
+    }
+  }
+
+  return handleWebAuthn();
+}

e2e/journey-app/main.ts

@@ -1,18 +1,30 @@
 /*
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2025-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 './style.css';
 
 import { journey } from '@forgerock/journey-client';
+import { WebAuthn, WebAuthnStepType } from '@forgerock/journey-client/webauthn';
 
-import type { JourneyClient, RequestMiddleware } from '@forgerock/journey-client/types';
+import type {
+  JourneyClient,
+  JourneyClientConfig,
+  RequestMiddleware,
+} from '@forgerock/journey-client/types';
 
 import { renderCallbacks } from './callback-map.js';
+import { renderDeleteDevicesSection } from './components/webauthn-devices.js';
 import { renderQRCodeStep } from './components/qr-code.js';
 import { renderRecoveryCodesStep } from './components/recovery-codes.js';
+import {
+  deleteAllDevices,
+  deleteDevicesInSession,
+  storeDevicesBeforeSession,
+} from './services/delete-webauthn-devices.js';
+import { webauthnComponent } from './components/webauthn.js';
 import { serverConfigs } from './server-configs.js';
 
 const qs = window.location.search;
@@ -61,7 +73,12 @@ if (searchParams.get('middleware') === 'true') {
 
   let journeyClient: JourneyClient;
   try {
-    journeyClient = await journey({ config: config, requestMiddleware });
+    const journeyConfig: JourneyClientConfig = {
+      serverConfig: {
+        wellknown: config.serverConfig.wellknown,
+      },
+    };
+    journeyClient = await journey({ config: journeyConfig, requestMiddleware });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     console.error('Failed to initialize journey client:', message);
@@ -70,34 +87,6 @@ if (searchParams.get('middleware') === 'true') {
   }
   let step = await journeyClient.start({ journey: journeyName });
 
-  function renderComplete() {
-    if (step?.type !== 'LoginSuccess') {
-      throw new Error('Expected step to be defined and of type LoginSuccess');
-    }
-
-    const session = step.getSessionToken();
-
-    console.log(`Session Token: ${session || 'none'}`);
-
-    journeyEl.innerHTML = `
-      <h2 id="completeHeader">Complete</h2>
-      <span id="sessionLabel">Session:</span>
-      <pre id="sessionToken" id="sessionToken">${session}</pre>
-      <button type="button" id="logoutButton">Logout</button>
-    `;
-
-    const loginBtn = document.getElementById('logoutButton') as HTMLButtonElement;
-    loginBtn.addEventListener('click', async () => {
-      await journeyClient.terminate();
-
-      console.log('Logout successful');
-
-      step = await journeyClient.start({ journey: journeyName });
-
-      renderForm();
-    });
-  }
-
   function renderError() {
     if (step?.type !== 'LoginFailure') {
       throw new Error('Expected step to be defined and of type LoginFailure');
@@ -117,6 +106,7 @@ if (searchParams.get('middleware') === 'true') {
   // Represents the main render function for app
   async function renderForm() {
     journeyEl.innerHTML = '';
+    errorEl.textContent = '';
 
     if (step?.type !== 'Step') {
       throw new Error('Expected step to be defined and of type Step');
@@ -130,6 +120,23 @@ if (searchParams.get('middleware') === 'true') {
 
     const submitForm = () => formEl.requestSubmit();
 
+    // Handle WebAuthn steps first so we can hide the Submit button while processing,
+    // auto-submit on success, and show an error on failure.
+    const webAuthnStep = WebAuthn.getWebAuthnStepType(step);
+    const isWebAuthn =
+      webAuthnStep === WebAuthnStepType.Authentication ||
+      webAuthnStep === WebAuthnStepType.Registration;
+    if (isWebAuthn) {
+      const webauthnSucceeded = await webauthnComponent(journeyEl, step, 0);
+      if (webauthnSucceeded) {
+        submitForm();
+        return;
+      } else {
+        errorEl.textContent =
+          'WebAuthn failed or was cancelled. Please try again or use a different method.';
+      }
+    }
+
     const stepRendered =
       renderQRCodeStep(journeyEl, step) || renderRecoveryCodesStep(journeyEl, step);
 
@@ -145,6 +152,57 @@ if (searchParams.get('middleware') === 'true') {
     journeyEl.appendChild(submitBtn);
   }
 
+  function renderComplete() {
+    if (step?.type !== 'LoginSuccess') {
+      throw new Error('Expected step to be defined and of type LoginSuccess');
+    }
+
+    const session = step.getSessionToken();
+
+    console.log(`Session Token: ${session || 'none'}`);
+
+    journeyEl.replaceChildren();
+
+    const completeHeader = document.createElement('h2');
+    completeHeader.id = 'completeHeader';
+    completeHeader.innerText = 'Complete';
+    journeyEl.appendChild(completeHeader);
+
+    renderDeleteDevicesSection(
+      journeyEl,
+      () => storeDevicesBeforeSession(config),
+      () => deleteDevicesInSession(config),
+      () => deleteAllDevices(config),
+    );
+
+    const sessionLabelEl = document.createElement('span');
+    sessionLabelEl.id = 'sessionLabel';
+    sessionLabelEl.innerText = 'Session:';
+
+    const sessionTokenEl = document.createElement('pre');
+    sessionTokenEl.id = 'sessionToken';
+    sessionTokenEl.textContent = session || 'none';
+
+    const logoutBtn = document.createElement('button');
+    logoutBtn.type = 'button';
+    logoutBtn.id = 'logoutButton';
+    logoutBtn.innerText = 'Logout';
+
+    journeyEl.appendChild(sessionLabelEl);
+    journeyEl.appendChild(sessionTokenEl);
+    journeyEl.appendChild(logoutBtn);
+
+    logoutBtn.addEventListener('click', async () => {
+      await journeyClient.terminate();
+
+      console.log('Logout successful');
+
+      step = await journeyClient.start({ journey: journeyName });
+
+      renderForm();
+    });
+  }
+
   formEl.addEventListener('submit', async (event) => {
     event.preventDefault();
 

e2e/journey-app/package.json

@@ -14,7 +14,8 @@
     "@forgerock/journey-client": "workspace:*",
     "@forgerock/oidc-client": "workspace:*",
     "@forgerock/protect": "workspace:*",
-    "@forgerock/sdk-logger": "workspace:*"
+    "@forgerock/sdk-logger": "workspace:*",
+    "@forgerock/device-client": "workspace:*"
   },
   "nx": {
     "tags": ["scope:e2e"]

e2e/journey-app/server-configs.ts

@@ -4,24 +4,32 @@
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.
  */
-import type { JourneyClientConfig } from '@forgerock/journey-client/types';
+import type { OidcConfig } from '@forgerock/oidc-client/types';
 
 /**
  * Server configurations for E2E tests.
  *
  * All configuration (baseUrl, authenticate/sessions paths) is automatically
  * derived from the well-known response via `convertWellknown()`.
  */
-export const serverConfigs: Record<string, JourneyClientConfig> = {
+export const serverConfigs: Record<string, OidcConfig> = {
   basic: {
+    clientId: 'WebOAuthClient',
+    redirectUri: '',
+    scope: 'openid profile email',
     serverConfig: {
       wellknown: 'http://localhost:9443/am/oauth2/realms/root/.well-known/openid-configuration',
     },
+    responseType: 'code',
   },
   tenant: {
+    clientId: 'WebOAuthClient',
+    redirectUri: '',
+    scope: 'openid profile email',
     serverConfig: {
       wellknown:
         'https://openam-sdks.forgeblocks.com/am/oauth2/realms/root/realms/alpha/.well-known/openid-configuration',
     },
+    responseType: 'code',
   },
 };