[PM-2014] feat: return undefined when credential creation fails

apps/web/src/app/auth/core/services/webauthn/webauthn.service.spec.ts

@@ -6,6 +6,8 @@ import { VerificationType } from "@bitwarden/common/auth/enums/verification-type
 import { ChallengeResponse } from "@bitwarden/common/auth/models/response/two-factor-web-authn.response";
 import { Verification } from "@bitwarden/common/types/verification";
 
+import { NewCredentialOptionsView } from "../../views/new-credential-options.view";
+
 import { WebauthnApiService } from "./webauthn-api.service";
 import { WebauthnService } from "./webauthn.service";
 
@@ -13,13 +15,20 @@ describe("WebauthnService", () => {
   let apiService!: MockProxy<WebauthnApiService>;
   let platformUtilsService!: MockProxy<PlatformUtilsService>;
   let i18nService!: MockProxy<I18nService>;
+  let credentials: MockProxy<CredentialsContainer>;
   let webauthnService!: WebauthnService;
 
   beforeAll(() => {
     apiService = mock<WebauthnApiService>();
     platformUtilsService = mock<PlatformUtilsService>();
     i18nService = mock<I18nService>();
-    webauthnService = new WebauthnService(apiService, platformUtilsService, i18nService);
+    credentials = mock<CredentialsContainer>();
+    webauthnService = new WebauthnService(
+      apiService,
+      platformUtilsService,
+      i18nService,
+      credentials
+    );
   });
 
   describe("getNewCredentialOptions", () => {
@@ -43,6 +52,17 @@ describe("WebauthnService", () => {
       expect(result).toEqual({ challenge });
     });
   });
+
+  describe("createCredential", () => {
+    it("should return undefined when navigator.credentials throws", async () => {
+      credentials.create.mockRejectedValue(new Error("Mocked error"));
+      const options = createNewCredentialOptions();
+
+      const result = await webauthnService.createCredential(options);
+
+      expect(result).toBeUndefined();
+    });
+  });
 });
 
 function createVerification(): Verification {
@@ -51,3 +71,7 @@ function createVerification(): Verification {
     secret: "secret",
   };
 }
+
+function createNewCredentialOptions(): NewCredentialOptionsView {
+  return new NewCredentialOptionsView(Symbol() as any);
+}

apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable, Optional } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -17,10 +17,13 @@ export class WebauthnService {
   constructor(
     private apiService: WebauthnApiService,
     private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService
+    private i18nService: I18nService,
+    @Optional() private credentials: CredentialsContainer = navigator.credentials
   ) {}
 
-  async getNewCredentialOptions(verification: Verification): Promise<NewCredentialOptionsView> {
+  async getNewCredentialOptions(
+    verification: Verification
+  ): Promise<NewCredentialOptionsView | undefined> {
     try {
       return { challenge: await this.apiService.getChallenge(verification) };
     } catch (error) {
@@ -39,8 +42,7 @@ export class WebauthnService {
 
   async createCredential(
     credentialOptions: NewCredentialOptionsView
-  ): Promise<WebauthnCredentialView> {
-    await new Promise((_, reject) => setTimeout(() => reject(new Error("Not implemented")), 1000));
-    return undefined;
+  ): Promise<WebauthnCredentialView | undefined> {
+    return await new Promise((resolve) => setTimeout(() => resolve(undefined), 1000));
   }
 }

apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts

@@ -71,10 +71,10 @@ export class CreateCredentialDialogComponent {
       }
 
       if (this.currentStep === "credentialCreation") {
-        try {
-          await this.webauthnService.createCredential(this.credentialOptions);
-        } catch {
+        const credential = await this.webauthnService.createCredential(this.credentialOptions);
+        if (credential === undefined) {
           this.currentStep = "credentialCreationFailed";
+          return;
         }
       }
     } finally {