[EC-598] feat: rudimentar error handling

apps/browser/src/background/runtime.background.ts

@@ -209,9 +209,17 @@ export default class RuntimeBackground {
         this.platformUtilsService.copyToClipboard(msg.identifier, { window: window });
         break;
       case "fido2RegisterCredentialRequest":
-        return await this.main.fido2Service.createCredential(msg.data);
+        try {
+          return { result: await this.main.fido2Service.createCredential(msg.data) };
+        } catch (error) {
+          return { error: { ...error, message: error.message } };
+        }
       case "fido2GetCredentialRequest":
-        return await this.main.fido2Service.assertCredential(msg.data);
+        try {
+          return { result: await this.main.fido2Service.assertCredential(msg.data) };
+        } catch (error) {
+          return { error: { ...error, message: error.message } };
+        }
     }
     return undefined;
   }

apps/browser/src/content/webauthn/content-script.ts

@@ -21,8 +21,8 @@ messenger.addHandler(async (message) => {
         (response) => {
           resolve({
             type: MessageType.CredentialCreationResponse,
-            approved: true,
-            result: response,
+            result: response.result,
+            error: response.error,
           });
         }
       );
@@ -39,7 +39,8 @@ messenger.addHandler(async (message) => {
         (response) => {
           resolve({
             type: MessageType.CredentialGetResponse,
-            result: response,
+            result: response.result,
+            error: response.error,
           });
         }
       );

apps/browser/src/content/webauthn/messaging/error.ts

@@ -0,0 +1,10 @@
+export enum MessageErrorType {
+  RequestAborted,
+}
+
+export type RequestAbortedMessageError = {
+  fallbackRequested: boolean;
+  message: string;
+};
+
+export type MessageError = RequestAbortedMessageError;

apps/browser/src/content/webauthn/messaging/message.ts

@@ -5,6 +5,8 @@ import {
   CredentialRegistrationResult,
 } from "@bitwarden/common/abstractions/fido2/fido2.service.abstraction";
 
+import { MessageError } from "./error";
+
 export enum MessageType {
   CredentialCreationRequest,
   CredentialCreationResponse,
@@ -21,8 +23,8 @@ export type CredentialCreationRequest = {
 
 export type CredentialCreationResponse = {
   type: MessageType.CredentialCreationResponse;
-  approved: boolean;
   result?: CredentialRegistrationResult;
+  error?: MessageError;
 };
 
 export type CredentialGetRequest = {
@@ -33,6 +35,7 @@ export type CredentialGetRequest = {
 export type CredentialGetResponse = {
   type: MessageType.CredentialGetResponse;
   result?: CredentialAssertResult;
+  error?: MessageError;
 };
 
 export type AbortRequest = {

apps/browser/src/content/webauthn/page-script.ts

@@ -19,10 +19,18 @@ navigator.credentials.create = async (options?: CredentialCreationOptions): Prom
     data: WebauthnUtils.mapCredentialCreationOptions(options, window.location.origin),
   });
 
-  if (response.type !== MessageType.CredentialCreationResponse || !response.approved) {
+  if (response.type !== MessageType.CredentialCreationResponse) {
     return await browserCredentials.create(options);
   }
 
+  if (response.error && response.error.fallbackRequested) {
+    return await browserCredentials.create(options);
+  }
+
+  if (response.error) {
+    throw new Error(response.error.message ?? "The request was aborted.");
+  }
+
   return WebauthnUtils.mapCredentialRegistrationResult(response.result);
 };
 
@@ -36,5 +44,13 @@ navigator.credentials.get = async (options?: CredentialRequestOptions): Promise<
     return await browserCredentials.get(options);
   }
 
+  if (response.error && response.error.fallbackRequested) {
+    return await browserCredentials.create(options);
+  }
+
+  if (response.error) {
+    throw new Error(response.error.message ?? "The request was aborted.");
+  }
+
   return WebauthnUtils.mapCredentialAssertResult(response.result);
 };

apps/browser/src/popup/fido2/fido2.component.html

@@ -9,5 +9,8 @@
     <ng-container *ngIf="data.type == 'VerifyUserRequest'">Authenticate</ng-container>
     <ng-container *ngIf="data.type == 'ConfirmNewCredentialRequest'">Create</ng-container>
   </button>
-  <button type="button" class="btn btn-outline-secondary" (click)="cancel()">Cancel</button>
+  <button type="button" class="btn btn-outline-secondary" (click)="cancel(true)">
+    Use browser built-in
+  </button>
+  <button type="button" class="btn btn-outline-secondary" (click)="cancel(false)">Abort</button>
 </div>

apps/browser/src/popup/fido2/fido2.component.ts

@@ -35,23 +35,25 @@ export class Fido2Component {
       BrowserFido2UserInterfaceService.sendMessage({
         requestId: data.requestId,
         type: "RequestCancelled",
+        fallbackRequested: true,
       });
     }
 
     window.close();
   }
 
-  cancel() {
-    this.unload();
+  cancel(fallback: boolean) {
+    this.unload(fallback);
     window.close();
   }
 
   @HostListener("window:unload")
-  unload() {
+  unload(fallback = true) {
     const data = this.data;
     BrowserFido2UserInterfaceService.sendMessage({
       requestId: data.requestId,
       type: "RequestCancelled",
+      fallbackRequested: fallback,
     });
   }
 }

apps/browser/src/services/fido2/browser-fido2-user-interface.service.ts

@@ -3,6 +3,7 @@ import { filter, first, lastValueFrom, Subject, takeUntil } from "rxjs";
 import { Fido2UserInterfaceService as Fido2UserInterfaceServiceAbstraction } from "@bitwarden/common/abstractions/fido2/fido2-user-interface.service.abstraction";
 import { Utils } from "@bitwarden/common/misc/utils";
 
+import { RequestAbortedError } from "../../../../../libs/common/src/abstractions/fido2/fido2.service.abstraction";
 import { BrowserApi } from "../../browser/browserApi";
 import { PopupUtilsService } from "../../popup/services/popup-utils.service";
 
@@ -23,6 +24,7 @@ export type BrowserFido2Message = { requestId: string } & (
     }
   | {
       type: "RequestCancelled";
+      fallbackRequested: boolean;
     }
 );
 
@@ -68,6 +70,10 @@ export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServi
       return true;
     }
 
+    if (response.type === "RequestCancelled") {
+      throw new RequestAbortedError(response.fallbackRequested);
+    }
+
     return false;
   }
 
@@ -93,6 +99,10 @@ export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServi
       return true;
     }
 
+    if (response.type === "RequestCancelled") {
+      throw new RequestAbortedError(response.fallbackRequested);
+    }
+
     return false;
   }
 

libs/common/src/abstractions/fido2/fido2.service.abstraction.ts

@@ -54,6 +54,12 @@ export interface CredentialAssertResult {
   userHandle: string;
 }
 
+export class RequestAbortedError extends Error {
+  constructor(readonly fallbackRequested = false) {
+    super("Fido2 request was aborted");
+  }
+}
+
 export abstract class Fido2Service {
   createCredential: (params: CredentialRegistrationParams) => Promise<CredentialRegistrationResult>;
   assertCredential: (params: CredentialAssertParams) => Promise<CredentialAssertResult>;