[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) {