IS-11327 LWA: WebAuthn ceremony errors as HAAPI step AppErrors

src/identity-server/templates/core/fragments/api-driven-ui/theme.vm

@@ -0,0 +1,53 @@
+#*
+ * Copyright (C) 2026 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ *#
+
+{
+    logo: {
+        path: '$!logo_path',
+        isInsideWell: #if ($logo_inside) true #else false #end,
+    },
+#if ($show_symbol)
+    #macro(symbolPath $jsonKey $pathVariable)
+        #if($pathVariable)'$jsonKey': '$!pathVariable',#end
+    #end
+
+    pageSymbols: {
+        ## Map of plugin implementation type to symbol path.
+        ## Used as a fallback if an exact match for the page symbol is not found in 'views'.
+        plugins: {
+            #* Authenticators *#
+            #symbolPath("bankid" $page_symbol_authenticate_bankid)
+            #symbolPath("duo" $page_symbol_authenticate_pair_device)
+            #symbolPath("email" $page_symbol_authenticate_email)
+            #symbolPath("html-form" $page_symbol_authenticate_htmlform)
+            #symbolPath("openid-wallet" $page_symbol_openid_wallet)
+            #symbolPath("passkeys" $page_symbol_authenticate_passkeys)
+            #symbolPath("sms" $page_symbol_authenticate_sms)
+            #symbolPath("totp" $page_symbol_authenticate_totp)
+            #symbolPath("webauthn" $page_symbol_authenticate_webauthn)
+
+            #* Authentication ACtions *#
+            #symbolPath("opt-in-mfa" $page_symbol_authenticate_opt_in_mfa)
+            #symbolPath("require-active-account" $page_symbol_authenticate_htmlform)
+            #symbolPath("reset-password" $page_symbol_authenticate_htmlform)
+            #symbolPath("signup" $page_symbol_authenticate_htmlform)
+
+            #* Consentors *#
+            #symbolPath("bankid-signing-consentor" $page_symbol_authenticate_bankid)
+        },
+        ## Map of view/template name to symbol path.
+        views: {
+            ## Nothing to add for now
+        },
+        default: '$!page_symbol',
+    }
+#end
+}

src/identity-server/templates/core/views/api-driven-ui/index.vm

@@ -41,38 +41,7 @@
             clientId: '$_apiDrivenClientInfo.clientId',
             tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
         },
-        theme: {
-            logo: {
-                path: '$!logo_path',
-                isInsideWell: #if ($logo_inside) true #else false #end,
-            },
-        #if ($show_symbol)
-            pageSymbols: {
-                ## Free form mapping of page symbols names to full paths.
-                #macro(pageSymbolPath $jsonKey $variable)
-                    #if($variable)$jsonKey: '$!variable',#end
-                #end
-                paths: {
-                    #pageSymbolPath("authenticate_desktop" $page_symbol_authenticate_desktop)
-                    #pageSymbolPath("authenticate_mobile" $page_symbol_authenticate_mobile)
-                    #pageSymbolPath("authenticate_email" $page_symbol_authenticate_email)
-                    #pageSymbolPath("authenticate_card" $page_symbol_authenticate_card)
-                    #pageSymbolPath("authenticate_sms" $page_symbol_authenticate_sms)
-                    #pageSymbolPath("authenticate_pair_device" $page_symbol_authenticate_pair_device)
-                    #pageSymbolPath("authenticate_htmlform" $page_symbol_authenticate_htmlform)
-                    #pageSymbolPath("authenticate_totp" $page_symbol_authenticate_totp)
-                    #pageSymbolPath("authenticate_bankid" $page_symbol_authenticate_bankid)
-                    #pageSymbolPath("authenticate_webauthn" $page_symbol_authenticate_webauthn)
-                    #pageSymbolPath("authenticate_opt_in_mfa" $page_symbol_authenticate_opt_in_mfa)
-                    #pageSymbolPath("authenticate_passkeys" $page_symbol_authenticate_passkeys)
-                    #pageSymbolPath("authenticate_openid_wallet" $page_symbol_openid_wallet)
-                    #pageSymbolPath("error_generic" $page_symbol_error_generic)
-                },
-                ## Added in case the UI needs to build paths for other page symbols.
-                basePath: '$!page_symbol_path',
-            },
-        #end
-        },
+        theme: #parse("fragments/api-driven-ui/theme")
     };
 </script>
 <div id="root"></div>

src/login-web-app/configure-idsvr-dev.sh

@@ -57,4 +57,4 @@ API_DRIVEN_UI_DIR=$OVERRIDES_DIR/views/api-driven-ui
 
 mkdir -p $API_DRIVEN_UI_DIR
 
-cp ./loader-dev.vm.html $API_DRIVEN_UI_DIR/index.vm
+cp ./loader-dev.vm $API_DRIVEN_UI_DIR/index.vm

src/login-web-app/index.html

@@ -28,13 +28,7 @@
       }
 
       // Set the configuration object expected by the application
-      window.__CONFIG__ = {
-        initialUrl: arg('initialUrl'),
-        haapi: {
-          clientId: arg('haapi_clientId'),
-          tokenEndpoint: arg('haapi_tokenEndpoint'),
-        },
-      };
+      window.__CONFIG__ = JSON.parse(arg('configuration'));
 
       // Change the current URL to match the original request to Identity Server, so that it looks like the
       // application was loaded directly by the server's template

src/login-web-app/loader-dev.vm.html → src/login-web-app/loader-dev.vm

@@ -18,11 +18,27 @@
   </head>
   <body>
     <script>
+      const configuration = {
+        initialUrl: '$_apiDrivenInitialUrl',
+        haapi: {
+          clientId: '$_apiDrivenClientInfo.clientId',
+          tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
+        },
+        theme: {
+          logo: {
+            path: '$!logo_path',
+            isInsideWell: #if ($logo_inside) true #else false #end,
+          },
+          #if ($show_symbol)
+          pageSymbols: {
+              default: '$!page_symbol',
+          }
+          #end
+        },
+      };
       const query = new URLSearchParams({
         originalUrl: window.location.href,
-        initialUrl: '$_apiDrivenInitialUrl',
-        haapi_clientId: '$_apiDrivenClientInfo.clientId',
-        haapi_tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
+        configuration: JSON.stringify(configuration),
       });
 
       const redirect = new URL('/', window.location.href);

src/login-web-app/src/App.tsx

@@ -10,18 +10,24 @@
  */
 
 import { Layout } from './shared/ui/Layout';
+import { AppConfig } from './shared/feature/app-config/AppConfig';
 import { ErrorBoundary } from './shared/feature/error-handling/ErrorBoundary';
 import { HaapiStepperStepUI } from './haapi-stepper/feature/steps/HaapiStepperStepUI';
 import { HaapiStepper } from './haapi-stepper/feature/stepper/HaapiStepper';
+import { HaapiStepperErrorNotifier } from './haapi-stepper/feature/stepper/HaapiStepperErrorNotifier';
 
 export function App() {
   return (
-    <ErrorBoundary>
-      <HaapiStepper>
-        <Layout>
-          <HaapiStepperStepUI />
-        </Layout>
-      </HaapiStepper>
-    </ErrorBoundary>
+    <AppConfig>
+      <ErrorBoundary>
+        <HaapiStepper>
+          <Layout>
+            <HaapiStepperErrorNotifier>
+              <HaapiStepperStepUI />
+            </HaapiStepperErrorNotifier>
+          </Layout>
+        </HaapiStepper>
+      </ErrorBoundary>
+    </AppConfig>
   );
 }

src/login-web-app/src/haapi-stepper/data-access/bootstrap-configuration.ts

@@ -14,6 +14,12 @@ import { HaapiConfiguration } from '@curity/identityserver-haapi-web-driver';
 export interface BootstrapConfiguration {
   initialUrl: string;
   haapi: HaapiConfiguration;
+  theme: {
+    logo: {
+      path: string;
+      isInsideWell: boolean;
+    };
+  };
 }
 
 // @ts-expect-error window.__CONFIG__ is not declared on the Window type

src/login-web-app/src/haapi-stepper/data-access/types/haapi-action.types.ts

@@ -184,30 +184,27 @@ export interface HaapiExternalBrowserArguments {
   href: string;
 }
 
-/**
- * Client operation WebAuthn registration action
- */
-export interface HaapiWebAuthnRegistrationClientOperationAction extends HaapiClientOperationAction {
-  model: HaapiWebAuthnRegistrationClientOperationModel;
-}
+export type HaapiWebAuthnRegistrationClientOperationAction =
+  | HaapiWebAuthnPasskeysRegistrationAction
+  | HaapiWebAuthnAnyDeviceRegistrationAction;
 
 export interface HaapiWebAuthnRegistrationClientOperationModel extends HaapiBaseClientOperationModel {
   name: HAAPI_ACTION_CLIENT_OPERATIONS.WEBAUTHN_REGISTRATION;
   arguments: HaapiWebAuthnRegistrationArgs;
   continueActions: [HaapiFormAction];
 }
 
-export type HaapiWebAuthnPasskeysRegistrationAction = Omit<HaapiWebAuthnRegistrationClientOperationAction, 'model'> & {
+export interface HaapiWebAuthnPasskeysRegistrationAction extends HaapiClientOperationAction {
   model: Omit<HaapiWebAuthnRegistrationClientOperationModel, 'arguments'> & {
     arguments: HaapiWebAuthnPasskeysArgs;
   };
-};
+}
 
-export type HaapiWebAuthnAnyDeviceRegistrationAction = Omit<HaapiWebAuthnRegistrationClientOperationAction, 'model'> & {
+export interface HaapiWebAuthnAnyDeviceRegistrationAction extends HaapiClientOperationAction {
   model: Omit<HaapiWebAuthnRegistrationClientOperationModel, 'arguments'> & {
     arguments: HaapiWebAuthnAnyDeviceArgs;
   };
-};
+}
 
 /**
  * Discriminated union of `webauthn-registration` action arguments.
@@ -223,10 +220,15 @@ export interface HaapiWebAuthnPasskeysArgs {
   credentialCreationOptions: HaapiPublicKeyCredentialCreationOptions;
 }
 
-export interface HaapiWebAuthnAnyDeviceArgs {
-  platformCredentialCreationOptions?: HaapiPublicKeyCredentialCreationOptions;
-  crossPlatformCredentialCreationOptions?: HaapiPublicKeyCredentialCreationOptions;
-}
+export type HaapiWebAuthnAnyDeviceArgs =
+  | {
+      platformCredentialCreationOptions: HaapiPublicKeyCredentialCreationOptions;
+      crossPlatformCredentialCreationOptions?: HaapiPublicKeyCredentialCreationOptions;
+    }
+  | {
+      platformCredentialCreationOptions?: undefined;
+      crossPlatformCredentialCreationOptions: HaapiPublicKeyCredentialCreationOptions;
+    };
 
 /**
  * Continue-action payload key for the `webauthn-registration` operation. The value matches the

src/login-web-app/src/haapi-stepper/feature/actions/client-operation/operations/client-operations.ts

@@ -14,10 +14,9 @@ import {
   HAAPI_ACTION_TYPES,
   HaapiAction,
 } from '../../../../data-access/types/haapi-action.types';
-import { HaapiLink } from '../../../../data-access/types/haapi-step.types';
+import { HaapiLink, HaapiStep } from '../../../../data-access/types/haapi-step.types';
 import { RefObject } from 'react';
 import { HaapiStepperAction, HaapiStepperLink } from '../../../stepper/haapi-stepper.types';
-import { HaapiFetchFormAction } from '../../../../data-access/types/haapi-fetch.types';
 import { isBankIdClientOperation, runBankIdAuthentication } from './bankid';
 import { isExternalBrowserFlowClientOperation, runExternalBrowserFlow } from './external-browser-flow';
 import {
@@ -26,51 +25,37 @@ import {
   runWebAuthnAuthentication,
   runWebAuthnRegistration,
 } from './webauthn';
+import { ClientOperationResult } from './typings';
 
 export function isClientOperation(
   action: HaapiAction | HaapiStepperAction | HaapiLink | HaapiStepperLink
 ): action is HaapiClientOperationAction {
   return 'template' in action && action.template === HAAPI_ACTION_TYPES.CLIENT_OPERATION;
 }
 
-/**
- * Performs a client operation, returning a continuation action and values if further action is required, or null if
- * no further action is required or if the operation was aborted.
- */
 export async function performClientOperation(
   action: HaapiClientOperationAction,
-  pendingOperation: RefObject<AbortController | NodeJS.Timeout | null>
-): Promise<HaapiFetchFormAction | null> {
+  pendingOperation: RefObject<AbortController | NodeJS.Timeout | null>,
+  currentStep: HaapiStep | null
+): Promise<ClientOperationResult> {
   const abortController = new AbortController();
   pendingOperation.current = abortController;
+  const signal = abortController.signal;
 
-  try {
-    if (isExternalBrowserFlowClientOperation(action)) {
-      return await runExternalBrowserFlow(action, 2500, abortController.signal);
-    }
-
-    if (isWebAuthnRegistrationClientOperation(action)) {
-      return await runWebAuthnRegistration(action, abortController.signal);
-    }
+  if (isWebAuthnRegistrationClientOperation(action)) {
+    return runWebAuthnRegistration(action, signal, currentStep);
+  }
 
-    if (isWebAuthnAuthenticationClientOperation(action)) {
-      return await runWebAuthnAuthentication(action, abortController.signal);
-    }
+  if (isWebAuthnAuthenticationClientOperation(action)) {
+    return runWebAuthnAuthentication(action, signal, currentStep);
+  }
 
-    if (isBankIdClientOperation(action)) {
-      return await runBankIdAuthentication(action);
-    }
-  } catch (err) {
-    /**
-     * If the operation was aborted by the caller, convert to null - i.e. no further action - instead of error
-     * Note that the cancellation is triggered by code on this file and a 'reason' is not provided, so we can rely on
-     * the error being the default AbortError.
-     */
-    if (abortController.signal.aborted && err instanceof DOMException && err.name === 'AbortError') {
-      return null;
-    }
+  if (isExternalBrowserFlowClientOperation(action)) {
+    return runExternalBrowserFlow(action, 2500, signal).then(clientOperationData => ({ clientOperationData }));
+  }
 
-    throw err;
+  if (isBankIdClientOperation(action)) {
+    return runBankIdAuthentication(action).then(clientOperationData => ({ clientOperationData }));
   }
 
   throw new Error(`Unsupported client operation: ${action.model.name}`);

src/login-web-app/src/haapi-stepper/feature/actions/client-operation/operations/helpers.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2026 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ */
+
+import { HAAPI_PROBLEM_STEPS, HaapiUserMessage } from '../../../../data-access/types/haapi-step.types';
+import { HaapiStepperError } from '../../../stepper/haapi-stepper.types';
+import { formatErrorStepData } from '../../../stepper/data-formatters/problem-step';
+
+/**
+ * Synthesises a {@link HaapiStepperError} for a client-operation failure (IS-11327).
+ *
+ * Client-operation failures (WebAuthn ceremony cancel / timeout / parse error / unsupported
+ * API today; BankID / EBF on the same pattern when their per-operation error handling lands)
+ * happen on the client and aren't part of the HAAPI response, so the stepper has no native
+ * category for them. We treat them as `AppError`-class problems of the current step — building
+ * a `HaapiUnexpectedProblemStep` via {@link formatErrorStepData} — so they surface via
+ * `useHaapiStepper().error.app` like any server-driven problem and consumers handle them
+ * through the same channel (e.g. `HaapiStepperErrorNotifier`).
+ */
+export function getHaapiStepperError(messageText: string | undefined): HaapiStepperError {
+  const messages: HaapiUserMessage[] = messageText ? [{ text: messageText }] : [];
+  return formatErrorStepData({
+    type: HAAPI_PROBLEM_STEPS.UNEXPECTED,
+    messages,
+  });
+}

src/login-web-app/src/haapi-stepper/feature/actions/client-operation/operations/typings.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2025 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ */
+
+import { HaapiFetchFormAction } from '../../../../data-access';
+import { HaapiStepperError } from '../../../stepper/haapi-stepper.types';
+
+/**
+ * Discriminated-union return shape shared by all client-operation runners (WebAuthn,
+ * external-browser-flow, BankID — as each ports onto this pattern per IS-11327).
+ *
+ * Runners always resolve. Success carries the continuation form action + payload; failure
+ * carries a synthesised {@link HaapiStepperError} which `performClientOperation` forwards to the
+ * stepper, which routes it through `setError` → `useHaapiStepper().error.app`. Programming
+ * bugs / unexpected runtime errors are not represented here — those still throw and escape to
+ * the React error boundary.
+ */
+export type ClientOperationResult =
+  | { clientOperationData: HaapiFetchFormAction; clientOperationError?: undefined }
+  | { clientOperationData?: undefined; clientOperationError: HaapiStepperError };