[EC-598] feat: fully wokring non-discoverable implementation

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

@@ -47,6 +47,15 @@ export type BrowserFido2Message = { requestId: string } & (
   | {
       type: "ConfirmNewCredentialResponse";
     }
+  | {
+      type: "ConfirmNewNonDiscoverableCredentialRequest";
+      credentialName: string;
+      userName: string;
+    }
+  | {
+      type: "ConfirmNewNonDiscoverableCredentialResponse";
+      cipherId: string;
+    }
   | {
       type: "AbortRequest";
     }
@@ -201,10 +210,47 @@ export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServi
   }
 
   async confirmNewNonDiscoverableCredential(
-    params: NewCredentialParams,
+    { credentialName, userName }: NewCredentialParams,
     abortController?: AbortController
   ): Promise<string> {
-    return null;
+    const requestId = Utils.newGuid();
+    const data: BrowserFido2Message = {
+      type: "ConfirmNewNonDiscoverableCredentialRequest",
+      requestId,
+      credentialName,
+      userName,
+    };
+    const queryParams = new URLSearchParams({ data: JSON.stringify(data) }).toString();
+
+    const abortHandler = () =>
+      BrowserFido2UserInterfaceService.sendMessage({ type: "AbortRequest", requestId });
+    abortController.signal.addEventListener("abort", abortHandler);
+
+    this.popupUtilsService.popOut(
+      null,
+      `popup/index.html?uilocation=popout#/fido2?${queryParams}`,
+      { center: true }
+    );
+
+    const response = await lastValueFrom(
+      this.messages$.pipe(
+        filter((msg) => msg.requestId === requestId),
+        first(),
+        takeUntil(this.destroy$)
+      )
+    );
+
+    if (response.type === "ConfirmNewNonDiscoverableCredentialResponse") {
+      return response.cipherId;
+    }
+
+    if (response.type === "AbortResponse") {
+      throw new RequestAbortedError(response.fallbackRequested);
+    }
+
+    abortController.signal.removeEventListener("abort", abortHandler);
+
+    return undefined;
   }
 
   async informExcludedCredential(

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

@@ -11,7 +11,12 @@
         Authenticate
       </button>
     </ng-container>
-    <ng-container *ngIf="data.type == 'PickCredentialRequest'">
+    <ng-container
+      *ngIf="
+        data.type == 'PickCredentialRequest' ||
+        data.type == 'ConfirmNewNonDiscoverableCredentialRequest'
+      "
+    >
       A site is asking for authentication, please choose one of the following credentials to use:
       <div class="box list">
         <div class="box-content">

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

@@ -48,6 +48,10 @@ export class Fido2Component implements OnInit, OnDestroy {
                 return cipher.decrypt();
               })
             );
+          } else if (this.data?.type === "ConfirmNewNonDiscoverableCredentialRequest") {
+            this.ciphers = (await this.cipherService.getAllDecrypted()).filter(
+              (cipher) => cipher.type === CipherType.Login && !cipher.isDeleted
+            );
           }
         }),
         takeUntil(this.destroy$)
@@ -66,11 +70,19 @@ export class Fido2Component implements OnInit, OnDestroy {
   }
 
   async pick(cipher: CipherView) {
-    BrowserFido2UserInterfaceService.sendMessage({
-      requestId: this.data.requestId,
-      cipherId: cipher.id,
-      type: "PickCredentialResponse",
-    });
+    if (this.data?.type === "PickCredentialRequest") {
+      BrowserFido2UserInterfaceService.sendMessage({
+        requestId: this.data.requestId,
+        cipherId: cipher.id,
+        type: "PickCredentialResponse",
+      });
+    } else if (this.data?.type === "ConfirmNewNonDiscoverableCredentialRequest") {
+      BrowserFido2UserInterfaceService.sendMessage({
+        requestId: this.data.requestId,
+        cipherId: cipher.id,
+        type: "ConfirmNewNonDiscoverableCredentialResponse",
+      });
+    }
 
     window.close();
   }