[EC-598] feat: wait for session close before closing window

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

@@ -86,6 +86,9 @@ export type BrowserFido2Message = { sessionId: string } & (
       type: "AbortResponse";
       fallbackRequested: boolean;
     }
+  | {
+      type: "CloseRequest";
+    }
 );
 
 export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServiceAbstraction {
@@ -237,6 +240,13 @@ export class BrowserFido2UserInterfaceSession implements Fido2UserInterfaceSessi
     await this.receive("AbortResponse");
   }
 
+  async close() {
+    await this.send({ type: "CloseRequest", sessionId: this.sessionId });
+    this.closed = true;
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   private async send(msg: BrowserFido2Message): Promise<void> {
     if (!this.connected$.value) {
       await this.connect();
@@ -276,10 +286,4 @@ export class BrowserFido2UserInterfaceSession implements Fido2UserInterfaceSessi
     );
     await firstValueFrom(this.connected$.pipe(filter((connected) => connected === true)));
   }
-
-  private close() {
-    this.closed = true;
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

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

@@ -1,5 +1,6 @@
 <ng-container *ngIf="data$ | async as data">
   <div class="auth-wrapper">
+    <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!loading" aria-hidden="true"></i>
     <ng-container *ngIf="data.type == 'ConfirmCredentialRequest'">
       A site is asking for authentication using the following credential:
       <div class="box list">

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

@@ -33,6 +33,7 @@ export class Fido2Component implements OnInit, OnDestroy {
   protected data$ = new BehaviorSubject<BrowserFido2Message>(null);
   protected sessionId?: string;
   protected ciphers?: CipherView[] = [];
+  protected loading = false;
 
   constructor(private activatedRoute: ActivatedRoute, private cipherService: CipherService) {}
 
@@ -92,6 +93,8 @@ export class Fido2Component implements OnInit, OnDestroy {
                 return cipher.decrypt();
               })
             );
+          } else if (data?.type === "CloseRequest") {
+            window.close();
           }
         }),
         takeUntil(this.destroy$)
@@ -122,7 +125,7 @@ export class Fido2Component implements OnInit, OnDestroy {
       });
     }
 
-    window.close();
+    this.loading = true;
   }
 
   confirm() {
@@ -130,7 +133,7 @@ export class Fido2Component implements OnInit, OnDestroy {
       sessionId: this.sessionId,
       type: "ConfirmCredentialResponse",
     });
-    window.close();
+    this.loading = true;
   }
 
   confirmNew() {
@@ -138,7 +141,7 @@ export class Fido2Component implements OnInit, OnDestroy {
       sessionId: this.sessionId,
       type: "ConfirmNewCredentialResponse",
     });
-    window.close();
+    this.loading = true;
   }
 
   abort(fallback: boolean) {

libs/common/src/webauthn/abstractions/fido2-user-interface.service.abstraction.ts

@@ -41,4 +41,5 @@ export abstract class Fido2UserInterfaceSession {
     existingCipherIds: string[],
     abortController?: AbortController
   ) => Promise<void>;
+  close: () => void;
 }

libs/common/src/webauthn/services/fido2-authenticator.service.ts

@@ -43,11 +43,15 @@ export class Fido2AuthenticatorService implements Fido2AuthenticatorServiceAbstr
   ): Promise<Fido2AuthenticatorMakeCredentialResult> {
     const userInterfaceSession = await this.userInterface.newSession(abortController);
 
+    try {
       if (params.credTypesAndPubKeyAlgs.every((p) => p.alg !== Fido2AlgorithmIdentifier.ES256)) {
         throw new Fido2AutenticatorError(Fido2AutenticatorErrorCode.NotSupported);
       }
 
-    if (params.requireResidentKey != undefined && typeof params.requireResidentKey !== "boolean") {
+      if (
+        params.requireResidentKey != undefined &&
+        typeof params.requireResidentKey !== "boolean"
+      ) {
         throw new Fido2AutenticatorError(Fido2AutenticatorErrorCode.Unknown);
       }
 
@@ -151,6 +155,9 @@ export class Fido2AuthenticatorService implements Fido2AuthenticatorServiceAbstr
         authData,
         publicKeyAlgorithm: -7,
       };
+    } finally {
+      userInterfaceSession.close();
+    }
   }
 
   async getAssertion(
@@ -159,6 +166,7 @@ export class Fido2AuthenticatorService implements Fido2AuthenticatorServiceAbstr
   ): Promise<Fido2AuthenticatorGetAssertionResult> {
     const userInterfaceSession = await this.userInterface.newSession(abortController);
 
+    try {
       if (
         params.requireUserVerification != undefined &&
         typeof params.requireUserVerification !== "boolean"
@@ -239,6 +247,9 @@ export class Fido2AuthenticatorService implements Fido2AuthenticatorServiceAbstr
       } catch {
         throw new Fido2AutenticatorError(Fido2AutenticatorErrorCode.Unknown);
       }
+    } finally {
+      userInterfaceSession.close();
+    }
   }
 
   /** Finds existing crendetials and returns the `cipherId` for each one */