[PM-3812][PM-3809] Unify Create and Login Passkeys UI

apps/browser/src/_locales/en/messages.json

@@ -2419,6 +2419,21 @@
     "message": "Toggle collapse",
     "description": "Toggling an expand/collapse state."
   },
+  "aliasDomain": {
+    "message": "Alias domain"
+  },
+  "passwordRepromptDisabledAutofillOnPageLoad": {
+    "message": "Items with master password re-prompt cannot be auto-filled on page load. Auto-fill on page load turned off.",
+    "description": "Toast message for describing that master password re-prompt cannot be auto-filled on page load."
+  },
+  "autofillOnPageLoadSetToDefault": {
+    "message": "Auto-fill on page load set to use default setting.",
+    "description": "Toast message for informing the user that auto-fill on page load has been set to the default setting."
+  },
+  "turnOffMasterPasswordPromptToEditField": {
+    "message": "Turn off master password re-prompt to edit this field",
+    "description": "Message appearing below the autofill on load message when master password reprompt is set for a vault item."
+  },
   "loginPasskey": {
     "message": "This login uses a passkey"
   },
@@ -2434,19 +2449,58 @@
   "passkeyNotCopiedAlert": {
     "message": "The passkey will not be copied to the cloned item. Do you want to continue cloning this item?"
   },
-  "aliasDomain": {
-    "message": "Alias domain"
+  "passkeyFeatureIsNotImplementedForAccountsWithoutMasterPassword": {
+    "message": "Verification required by the initiating site. This feature is not yet implemented for accounts without master password."
   },
-  "passwordRepromptDisabledAutofillOnPageLoad": {
-    "message": "Items with master password re-prompt cannot be auto-filled on page load. Auto-fill on page load turned off.",
-    "description": "Toast message for describing that master password re-prompt cannot be auto-filled on page load."
+  "logInWithPasskey": {
+    "message": "Log in with passkey?"
   },
-  "autofillOnPageLoadSetToDefault": {
-    "message": "Auto-fill on page load set to use default setting.",
-    "description": "Toast message for informing the user that auto-fill on page load has been set to the default setting."
+  "savePasskeyInBitwarden": {
+    "message": "Save passkey in Bitwarden?"
   },
-  "turnOffMasterPasswordPromptToEditField": {
-    "message": "Turn off master password re-prompt to edit this field",
-    "description": "Message appearing below the autofill on load message when master password reprompt is set for a vault item."
+  "passkeyAlreadyExists": {
+    "message": "A passkey already exists for this application."
+  },
+  "noPasskeysFoundForThisApplication": {
+    "message": "No passkeys found for this application."
+  },
+  "noMatchingPasskeyLogin": {
+    "message": "You do not have a matching login for this site."
+  },
+  "confirm": {
+    "message": "Confirm"
+  },
+  "savePasskey": {
+    "message": "Save passkey"
+  },
+  "savePasskeyNewLogin": {
+    "message": "Save passkey as new login"
+  },
+  "choosePasskey": {
+    "message": "Choose a login to save this passkey to"
+  },
+  "fido2Item": {
+    "message": "Fido2 Item"
+  },
+  "overwritePasskey": {
+    "message": "Overwrite passkey?"
+  },
+  "overwritePasskeyAlert": {
+    "message": "This item already contains a passkey. Are you sure you want to overwrite the current passkey?"
+  },
+  "featureNotSupported": {
+    "message": "Feature not yet supported"
+  },
+  "searchLogins": {
+    "message": "Search all logins"
+  },
+  "yourPasskeyIsLocked": {
+    "message": "Authentication required to use passkey. Verify your identity to continue."
+  },
+  "loginToSavePasskey": {
+    "message": "Log in to use passkeys in Bitwarden"
+  },
+  "useBrowserName": {
+    "message": "Use browser"
   }
 }

apps/browser/src/auth/guards/fido2-auth.guard.ts

@@ -21,11 +21,6 @@ export const fido2AuthGuard: CanActivateFn = async (
 
   const authStatus = await authService.getAuthStatus();
 
-  if (authStatus === AuthenticationStatus.LoggedOut) {
-    routerService.setPreviousUrl(state.url);
-    return router.createUrlTree(["/home"], { queryParams: route.queryParams });
-  }
-
   if (authStatus === AuthenticationStatus.Locked) {
     routerService.setPreviousUrl(state.url);
     return router.createUrlTree(["/lock"], { queryParams: route.queryParams });

apps/browser/src/auth/popup/lock.component.html

@@ -11,81 +11,91 @@ <h1 class="center">
     </div>
   </header>
   <main tabindex="-1">
-    <div class="box">
-      <div class="box-content">
-        <div
-          class="box-content-row box-content-row-flex"
-          appBoxRow
-          *ngIf="pinEnabled || masterPasswordEnabled"
-        >
-          <div class="row-main" *ngIf="pinEnabled">
-            <label for="pin">{{ "pin" | i18n }}</label>
-            <input
-              id="pin"
-              type="{{ showPassword ? 'text' : 'password' }}"
-              name="PIN"
-              class="monospaced"
-              [(ngModel)]="pin"
-              required
-              appInputVerbatim
-            />
-          </div>
-          <div class="row-main" *ngIf="masterPasswordEnabled && !pinEnabled">
-            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-            <input
-              id="masterPassword"
-              type="{{ showPassword ? 'text' : 'password' }}"
-              name="MasterPassword"
-              aria-describedby="masterPasswordHelp"
-              class="monospaced"
-              [(ngModel)]="masterPassword"
-              required
-              appInputVerbatim
-            />
-          </div>
-          <div class="action-buttons">
-            <button
-              type="button"
-              class="row-btn"
-              appStopClick
-              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              (click)="togglePassword()"
-              [attr.aria-pressed]="showPassword"
-            >
-              <i
-                class="bwi bwi-lg"
-                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-                aria-hidden="true"
-              ></i>
-            </button>
+    <ng-container *ngIf="fido2PopoutSessionData$ | async as fido2Data">
+      <div class="box">
+        <div class="box-content">
+          <div
+            class="box-content-row box-content-row-flex"
+            appBoxRow
+            *ngIf="pinEnabled || masterPasswordEnabled"
+          >
+            <div class="row-main" *ngIf="pinEnabled">
+              <label for="pin">{{ "pin" | i18n }}</label>
+              <input
+                id="pin"
+                type="{{ showPassword ? 'text' : 'password' }}"
+                name="PIN"
+                class="monospaced"
+                [(ngModel)]="pin"
+                required
+                appInputVerbatim
+              />
+            </div>
+            <div class="row-main" *ngIf="masterPasswordEnabled && !pinEnabled">
+              <label for="masterPassword">{{ "masterPass" | i18n }}</label>
+              <input
+                id="masterPassword"
+                type="{{ showPassword ? 'text' : 'password' }}"
+                name="MasterPassword"
+                aria-describedby="masterPasswordHelp"
+                class="monospaced"
+                [(ngModel)]="masterPassword"
+                required
+                appInputVerbatim
+              />
+            </div>
+            <div class="action-buttons">
+              <button
+                type="button"
+                class="row-btn"
+                appStopClick
+                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                (click)="togglePassword()"
+                [attr.aria-pressed]="showPassword"
+              >
+                <i
+                  class="bwi bwi-lg"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </div>
           </div>
         </div>
+        <div id="masterPasswordHelp" class="box-footer">
+          <p>
+            {{
+              fido2Data.isFido2Session
+                ? ("yourPasskeyIsLocked" | i18n)
+                : ("yourVaultIsLocked" | i18n)
+            }}
+          </p>
+          {{ "loggedInAsOn" | i18n : email : webVaultHostname }}
+        </div>
       </div>
-      <div id="masterPasswordHelp" class="box-footer">
-        <p>{{ "yourVaultIsLocked" | i18n }}</p>
-        {{ "loggedInAsOn" | i18n : email : webVaultHostname }}
-      </div>
-    </div>
-    <div class="box" *ngIf="biometricLock">
-      <div class="box-footer no-pad">
-        <button
-          type="button"
-          class="btn primary block"
-          (click)="unlockBiometric()"
-          appStopClick
-          [disabled]="pendingBiometric"
-        >
-          {{ "unlockWithBiometrics" | i18n }}
-        </button>
+      <div class="box" *ngIf="biometricLock">
+        <div class="box-footer no-pad">
+          <button
+            type="button"
+            class="btn primary block"
+            (click)="unlockBiometric()"
+            appStopClick
+            [disabled]="pendingBiometric"
+          >
+            {{ "unlockWithBiometrics" | i18n }}
+          </button>
+        </div>
       </div>
-    </div>
-    <p class="text-center">
-      <button type="button" appStopClick (click)="logOut()">{{ "logOut" | i18n }}</button>
-    </p>
-    <app-private-mode-warning></app-private-mode-warning>
-    <app-callout *ngIf="biometricError" type="error">{{ biometricError }}</app-callout>
-    <p class="text-center text-muted" *ngIf="pendingBiometric">
-      <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i> {{ "awaitDesktop" | i18n }}
-    </p>
+      <p class="text-center" *ngIf="!fido2Data.isFido2Session">
+        <button type="button" appStopClick (click)="logOut()">{{ "logOut" | i18n }}</button>
+      </p>
+      <app-private-mode-warning></app-private-mode-warning>
+      <app-callout *ngIf="biometricError" type="error">{{ biometricError }}</app-callout>
+      <p class="text-center text-muted" *ngIf="pendingBiometric">
+        <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i> {{ "awaitDesktop" | i18n }}
+      </p>
+
+      <app-fido2-use-browser-link></app-fido2-use-browser-link>
+    </ng-container>
   </main>
 </form>

apps/browser/src/auth/popup/lock.component.ts

@@ -23,6 +23,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../models/biometricErrors";
 import { BrowserRouterService } from "../../platform/popup/services/browser-router.service";
+import { fido2PopoutSessionData$ } from "../../vault/fido2/browser-fido2-user-interface.service";
 
 @Component({
   selector: "app-lock",
@@ -33,6 +34,7 @@ export class LockComponent extends BaseLockComponent {
 
   biometricError: string;
   pendingBiometric = false;
+  fido2PopoutSessionData$ = fido2PopoutSessionData$();
 
   constructor(
     router: Router,

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

@@ -560,8 +560,9 @@ export default class MainBackground {
 
     this.browserPopoutWindowService = new BrowserPopoutWindowService();
 
-    this.popupUtilsService = new PopupUtilsService(this.isPrivateMode);
-    this.fido2UserInterfaceService = new BrowserFido2UserInterfaceService(this.popupUtilsService);
+    this.fido2UserInterfaceService = new BrowserFido2UserInterfaceService(
+      this.browserPopoutWindowService
+    );
     this.fido2AuthenticatorService = new Fido2AuthenticatorService(
       this.cipherService,
       this.fido2UserInterfaceService,
@@ -571,6 +572,7 @@ export default class MainBackground {
     this.fido2ClientService = new Fido2ClientService(
       this.fido2AuthenticatorService,
       this.configService,
+      this.authService,
       this.logService
     );
 

apps/browser/src/background/runtime.background.ts

@@ -258,11 +258,11 @@ export default class RuntimeBackground {
         return await this.main.fido2ClientService.isFido2FeatureEnabled();
       case "fido2RegisterCredentialRequest":
         return await this.abortManager.runWithAbortController(msg.requestId, (abortController) =>
-          this.main.fido2ClientService.createCredential(msg.data, abortController)
+          this.main.fido2ClientService.createCredential(msg.data, sender.tab, abortController)
         );
       case "fido2GetCredentialRequest":
         return await this.abortManager.runWithAbortController(msg.requestId, (abortController) =>
-          this.main.fido2ClientService.assertCredential(msg.data, abortController)
+          this.main.fido2ClientService.assertCredential(msg.data, sender.tab, abortController)
         );
     }
   }

apps/browser/src/platform/popup/abstractions/browser-popout-window.service.ts

@@ -10,6 +10,15 @@ interface BrowserPopoutWindowService {
     }
   ): Promise<void>;
   closePasswordRepromptPrompt(): Promise<void>;
+  openFido2Popout(
+    senderWindowId: number,
+    promptData: {
+      sessionId: string;
+      senderTabId: number;
+      fallbackSupported: boolean;
+    }
+  ): Promise<number>;
+  closeFido2Popout(): Promise<void>;
 }
 
 export { BrowserPopoutWindowService };