Merge branch 'feature/passkey-provider' into neuronull/testing-tracing-macos-provider

apps/desktop/src/app/app-routing.module.ts

@@ -41,10 +41,13 @@ import { AnonLayoutWrapperComponent, AnonLayoutWrapperData } from "@bitwarden/co
 import { LockComponent, ConfirmKeyConnectorDomainComponent } from "@bitwarden/key-management-ui";
 
 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
+import { reactiveUnlockVaultGuard } from "../autofill/guards/reactive-vault-guard";
+import { Fido2CreateComponent } from "../autofill/modal/credentials/fido2-create.component";
+import { Fido2ExcludedCiphersComponent } from "../autofill/modal/credentials/fido2-excluded-ciphers.component";
+import { Fido2VaultComponent } from "../autofill/modal/credentials/fido2-vault.component";
 import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { VaultV2Component } from "../vault/app/vault/vault-v2.component";
 
-import { Fido2PlaceholderComponent } from "./components/fido2placeholder.component";
 import { SendComponent } from "./tools/send/send.component";
 
 /**
@@ -110,12 +113,16 @@ const routes: Routes = [
     canActivate: [authGuard],
   },
   {
-    path: "passkeys",
-    component: Fido2PlaceholderComponent,
+    path: "fido2-assertion",
+    component: Fido2VaultComponent,
   },
   {
-    path: "passkeys",
-    component: Fido2PlaceholderComponent,
+    path: "fido2-creation",
+    component: Fido2CreateComponent,
+  },
+  {
+    path: "fido2-excluded",
+    component: Fido2ExcludedCiphersComponent,
   },
   {
     path: "",
@@ -261,7 +268,7 @@ const routes: Routes = [
       },
       {
         path: "lock",
-        canActivate: [lockGuard()],
+        canActivate: [lockGuard(), reactiveUnlockVaultGuard],
         data: {
           pageIcon: LockIcon,
           pageTitle: {

apps/desktop/src/app/app.component.ts

@@ -100,7 +100,7 @@ const SyncInterval = 6 * 60 * 60 * 1000; // 6 hours
     <ng-template #exportVault></ng-template>
     <ng-template #appGenerator></ng-template>
     <ng-template #loginApproval></ng-template>
-    <app-header></app-header>
+    <app-header *ngIf="showHeader$ | async"></app-header>
 
     <div id="container">
       <div class="loading" *ngIf="loading">
@@ -125,6 +125,7 @@ export class AppComponent implements OnInit, OnDestroy {
   @ViewChild("loginApproval", { read: ViewContainerRef, static: true })
   loginApprovalModalRef: ViewContainerRef;
 
+  showHeader$ = this.accountService.showHeader$;
   loading = false;
 
   private lastActivity: Date = null;

apps/desktop/src/app/components/fido2placeholder.component.ts

@@ -1,120 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { BehaviorSubject, Observable } from "rxjs";
-
-import {
-  DesktopFido2UserInterfaceService,
-  DesktopFido2UserInterfaceSession,
-} from "../../autofill/services/desktop-fido2-user-interface.service";
-import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
-
-@Component({
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div
-      style="background:white; display:flex; justify-content: center; align-items: center; flex-direction: column"
-    >
-      <h1 style="color: black">Select your passkey</h1>
-
-      <div *ngFor="let item of cipherIds$ | async">
-        <button
-          style="color:black; padding: 10px 20px; border: 1px solid blue; margin: 10px"
-          bitButton
-          type="button"
-          buttonType="secondary"
-          (click)="chooseCipher(item)"
-        >
-          {{ item }}
-        </button>
-      </div>
-
-      <br />
-      <button
-        style="color:black; padding: 10px 20px; border: 1px solid black; margin: 10px"
-        bitButton
-        type="button"
-        buttonType="secondary"
-        (click)="confirmPasskey()"
-      >
-        Confirm passkey
-      </button>
-      <button
-        style="color:black; padding: 10px 20px; border: 1px solid black; margin: 10px"
-        bitButton
-        type="button"
-        buttonType="secondary"
-        (click)="closeModal()"
-      >
-        Close
-      </button>
-    </div>
-  `,
-})
-export class Fido2PlaceholderComponent implements OnInit, OnDestroy {
-  session?: DesktopFido2UserInterfaceSession = null;
-  private cipherIdsSubject = new BehaviorSubject<string[]>([]);
-  cipherIds$: Observable<string[]>;
-
-  constructor(
-    private readonly desktopSettingsService: DesktopSettingsService,
-    private readonly fido2UserInterfaceService: DesktopFido2UserInterfaceService,
-    private readonly router: Router,
-  ) {}
-
-  ngOnInit() {
-    this.session = this.fido2UserInterfaceService.getCurrentSession();
-    this.cipherIds$ = this.session?.availableCipherIds$;
-  }
-
-  async chooseCipher(cipherId: string) {
-    // For now: Set UV to true
-    this.session?.confirmChosenCipher(cipherId, true);
-
-    await this.router.navigate(["/"]);
-    await this.desktopSettingsService.setModalMode(false);
-  }
-
-  ngOnDestroy() {
-    this.cipherIdsSubject.complete(); // Clean up the BehaviorSubject
-  }
-
-  async confirmPasskey() {
-    try {
-      // Retrieve the current UI session to control the flow
-      if (!this.session) {
-        // todo: handle error
-        throw new Error("No session found");
-      }
-
-      // If we want to we could submit information to the session in order to create the credential
-      // const cipher = await session.createCredential({
-      //   userHandle: "userHandle2",
-      //   userName: "username2",
-      //   credentialName: "zxsd2",
-      //   rpId: "webauthn.io",
-      //   userVerification: true,
-      // });
-
-      this.session.notifyConfirmNewCredential(true);
-
-      // Not sure this clean up should happen here or in session.
-      // The session currently toggles modal on and send us here
-      // But if this route is somehow opened outside of session we want to make sure we clean up?
-      await this.router.navigate(["/"]);
-      await this.desktopSettingsService.setModalMode(false);
-    } catch {
-      // TODO: Handle error appropriately
-    }
-  }
-
-  async closeModal() {
-    await this.router.navigate(["/"]);
-    await this.desktopSettingsService.setModalMode(false);
-
-    this.session.notifyConfirmNewCredential(false);
-    // little bit hacky:
-    this.session.confirmChosenCipher(null);
-  }
-}

apps/desktop/src/app/services/services.module.ts

@@ -337,6 +337,7 @@ const safeProviders: SafeProvider[] = [
       ConfigService,
       Fido2AuthenticatorServiceAbstraction,
       AccountService,
+      AuthService,
     ],
   }),
   safeProvider({