[EC-598] feat: confirm new credentials

apps/browser/src/background/main.background.ts

@@ -119,16 +119,6 @@ import RuntimeBackground from "./runtime.background";
 import TabsBackground from "./tabs.background";
 import WebRequestBackground from "./webRequest.background";
 
-export class Fido2UserInterfaceService implements Fido2UserInterfaceServiceAbstraction {
-  async verifyUser(): Promise<boolean> {
-    return false;
-  }
-
-  async verifyPresence(): Promise<boolean> {
-    return false;
-  }
-}
-
 export default class MainBackground {
   messagingService: MessagingServiceAbstraction;
   storageService: AbstractStorageService;

apps/browser/src/popup/app.module.ts

@@ -87,6 +87,7 @@ import { PrivateModeWarningComponent } from "./components/private-mode-warning.c
 import { SendListComponent } from "./components/send-list.component";
 import { SetPinComponent } from "./components/set-pin.component";
 import { UserVerificationComponent } from "./components/user-verification.component";
+import { Fido2Module } from "./fido2/fido2.module";
 import { GeneratorComponent } from "./generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "./generator/password-generator-history.component";
 import { EffluxDatesComponent as SendEffluxDatesComponent } from "./send/efflux-dates.component";
@@ -192,6 +193,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     ReactiveFormsModule,
     ScrollingModule,
     ServicesModule,
+    Fido2Module,
   ],
   declarations: [
     ActionButtonsComponent,

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

@@ -1,5 +1,13 @@
 <div class="auth-wrapper">
-  A site is asking for authentication
-  <button type="button" class="btn btn-outline-secondary" (click)="verify()">Authenticate</button>
+  <ng-container *ngIf="data.type == 'VerifyUserRequest'">
+    A site is asking for authentication
+  </ng-container>
+  <ng-container *ngIf="data.type == 'ConfirmNewCredentialRequest'">
+    A site wants to create a new passkey in your vault
+  </ng-container>
+  <button type="button" class="btn btn-outline-secondary" (click)="accept()">
+    <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>
 </div>

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

@@ -18,12 +18,26 @@ export class Fido2Component {
     return this.activatedRoute.snapshot.queryParams as BrowserFido2Message;
   }
 
-  async verify() {
+  async accept() {
     const data = this.data;
-    BrowserFido2UserInterfaceService.sendMessage({
-      requestId: data.requestId,
-      type: "VerifyUserResponse",
-    });
+
+    if (data.type === "VerifyUserRequest") {
+      BrowserFido2UserInterfaceService.sendMessage({
+        requestId: data.requestId,
+        type: "VerifyUserResponse",
+      });
+    } else if (data.type === "ConfirmNewCredentialRequest") {
+      BrowserFido2UserInterfaceService.sendMessage({
+        requestId: data.requestId,
+        type: "ConfirmNewCredentialResponse",
+      });
+    } else {
+      BrowserFido2UserInterfaceService.sendMessage({
+        requestId: data.requestId,
+        type: "RequestCancelled",
+      });
+    }
+
     window.close();
   }
 

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

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { Fido2Component } from "./fido2.component";
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [Fido2Component],
+  exports: [Fido2Component],
+})
+export class Fido2Module {}

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

@@ -15,6 +15,12 @@ export type BrowserFido2Message = { requestId: string } & (
   | {
       type: "VerifyUserResponse";
     }
+  | {
+      type: "ConfirmNewCredentialRequest";
+    }
+  | {
+      type: "ConfirmNewCredentialResponse";
+    }
   | {
       type: "RequestCancelled";
     }
@@ -65,6 +71,31 @@ export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServi
     return false;
   }
 
+  async confirmNewCredential(): Promise<boolean> {
+    const requestId = Utils.newGuid();
+    const data: BrowserFido2Message = { type: "ConfirmNewCredentialRequest", requestId };
+    const queryParams = new URLSearchParams(data).toString();
+    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 === "ConfirmNewCredentialResponse") {
+      return true;
+    }
+
+    return false;
+  }
+
   private processMessage(msg: BrowserFido2Message) {
     this.messages$.next(msg);
   }

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

@@ -1,4 +1,5 @@
 export abstract class Fido2UserInterfaceService {
   verifyUser: () => Promise<boolean>;
   verifyPresence: () => Promise<boolean>;
+  confirmNewCredential: () => Promise<boolean>;
 }

libs/common/src/services/fido2/fido2.service.ts

@@ -8,7 +8,7 @@ export class Fido2Service implements Fido2ServiceAbstraction {
   constructor(private fido2UserInterfaceService: Fido2UserInterfaceService) {}
 
   async createCredential(params: CredentialRegistrationParams): Promise<unknown> {
-    await this.fido2UserInterfaceService.verifyPresence();
+    await this.fido2UserInterfaceService.confirmNewCredential();
     // eslint-disable-next-line no-console
     console.log("Fido2Service.registerCredential", params);
     return "createCredential response";

libs/common/src/services/fido2/noop-fido2-user-interface.service.ts

@@ -8,4 +8,8 @@ export class Fido2UserInterfaceService implements Fido2UserInterfaceServiceAbstr
   async verifyPresence(): Promise<boolean> {
     return false;
   }
+
+  async confirmNewCredential(): Promise<boolean> {
+    return false;
+  }
 }