[PM-19215] Fix Firefox extension biometric unlock autoprompt (#14254)

* Remove restriction from account security component

* Add the ability to manage pop-out to the LockComponentService

* Have the Firefox extension pop-out on biometric auto-prompt unlock

apps/browser/src/auth/popup/settings/account-security.component.html

@@ -23,7 +23,7 @@
         <bit-form-control
           class="tw-pl-5"
           [disableMargin]="!((pinEnabled$ | async) || this.form.value.pin)"
-          *ngIf="this.form.value.biometric && showAutoPrompt"
+          *ngIf="this.form.value.biometric"
         >
           <input
             bitCheckbox

apps/browser/src/auth/popup/settings/account-security.component.ts

@@ -30,7 +30,6 @@ import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { DeviceType } from "@bitwarden/common/enums";
 import {
   VaultTimeout,
   VaultTimeoutAction,
@@ -110,7 +109,6 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
   hasVaultTimeoutPolicy = false;
   biometricUnavailabilityReason: string;
   showChangeMasterPass = true;
-  showAutoPrompt = true;
   pinEnabled$: Observable<boolean> = of(true);
 
   form = this.formBuilder.group({
@@ -147,11 +145,6 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
   ) {}
 
   async ngOnInit() {
-    // Firefox popup closes when unfocused by biometrics, blocking all unlock methods
-    if (this.platformUtilsService.getDevice() === DeviceType.FirefoxExtension) {
-      this.showAutoPrompt = false;
-    }
-
     const hasMasterPassword = await this.userVerificationService.hasMasterPassword();
     this.showMasterPasswordOnClientRestartOption = hasMasterPassword;
     const maximumVaultTimeoutPolicy = this.accountService.activeAccount$.pipe(

apps/browser/src/key-management/lock/services/extension-lock-component.service.spec.ts

@@ -17,6 +17,8 @@ import {
 } from "@bitwarden/key-management";
 import { UnlockOptions } from "@bitwarden/key-management-ui";
 
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
 import { BrowserRouterService } from "../../../platform/popup/services/browser-router.service";
 
 import { ExtensionLockComponentService } from "./extension-lock-component.service";
@@ -117,6 +119,62 @@ describe("ExtensionLockComponentService", () => {
     });
   });
 
+  describe("popOutBrowserExtension", () => {
+    let openPopoutSpy: jest.SpyInstance;
+    beforeEach(() => {
+      jest.resetAllMocks();
+      openPopoutSpy = jest
+        .spyOn(BrowserPopupUtils, "openCurrentPagePopout")
+        .mockResolvedValue(undefined);
+    });
+
+    it("opens pop-out when the current window is neither a pop-out nor a sidebar", async () => {
+      jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(false);
+      jest.spyOn(BrowserPopupUtils, "inSidebar").mockReturnValue(false);
+
+      await service.popOutBrowserExtension();
+
+      expect(openPopoutSpy).toHaveBeenCalledWith(global.window);
+    });
+
+    test.each([
+      [true, false],
+      [false, true],
+      [true, true],
+    ])("should not open pop-out under other conditions.", async (inPopout, inSidebar) => {
+      jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(inPopout);
+      jest.spyOn(BrowserPopupUtils, "inSidebar").mockReturnValue(inSidebar);
+
+      await service.popOutBrowserExtension();
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("closeBrowserExtensionPopout", () => {
+    let closePopupSpy: jest.SpyInstance;
+    beforeEach(() => {
+      jest.resetAllMocks();
+      closePopupSpy = jest.spyOn(BrowserApi, "closePopup").mockReturnValue();
+    });
+
+    it("closes pop-out when in pop-out", () => {
+      jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(true);
+
+      service.closeBrowserExtensionPopout();
+
+      expect(closePopupSpy).toHaveBeenCalledWith(global.window);
+    });
+
+    it("doesn't close pop-out when not in pop-out", () => {
+      jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(false);
+
+      service.closeBrowserExtensionPopout();
+
+      expect(closePopupSpy).not.toHaveBeenCalled();
+    });
+  });
+
   describe("isWindowVisible", () => {
     it("throws an error", async () => {
       await expect(service.isWindowVisible()).rejects.toThrow("Method not implemented.");

apps/browser/src/key-management/lock/services/extension-lock-component.service.ts

@@ -14,6 +14,8 @@ import {
 import { LockComponentService, UnlockOptions } from "@bitwarden/key-management-ui";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors";
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
 import { BrowserRouterService } from "../../../platform/popup/services/browser-router.service";
 
 export class ExtensionLockComponentService implements LockComponentService {
@@ -37,6 +39,18 @@ export class ExtensionLockComponentService implements LockComponentService {
     return biometricsError.description;
   }
 
+  async popOutBrowserExtension(): Promise<void> {
+    if (!BrowserPopupUtils.inPopout(global.window) && !BrowserPopupUtils.inSidebar(global.window)) {
+      await BrowserPopupUtils.openCurrentPagePopout(global.window);
+    }
+  }
+
+  closeBrowserExtensionPopout(): void {
+    if (BrowserPopupUtils.inPopout(global.window)) {
+      BrowserApi.closePopup(global.window);
+    }
+  }
+
   async isWindowVisible(): Promise<boolean> {
     throw new Error("Method not implemented.");
   }

apps/desktop/src/key-management/lock/services/desktop-lock-component.service.spec.ts

@@ -104,6 +104,22 @@ describe("DesktopLockComponentService", () => {
     });
   });
 
+  describe("popOutBrowserExtension", () => {
+    it("throws platform not supported error", () => {
+      expect(() => service.popOutBrowserExtension()).toThrow(
+        "Method not supported on this platform.",
+      );
+    });
+  });
+
+  describe("closeBrowserExtensionPopout", () => {
+    it("throws platform not supported error", () => {
+      expect(() => service.closeBrowserExtensionPopout()).toThrow(
+        "Method not supported on this platform.",
+      );
+    });
+  });
+
   describe("isWindowVisible", () => {
     it("returns the window visibility", async () => {
       isWindowVisibleMock.mockReturnValue(true);

apps/desktop/src/key-management/lock/services/desktop-lock-component.service.ts

@@ -27,6 +27,14 @@ export class DesktopLockComponentService implements LockComponentService {
     return null;
   }
 
+  popOutBrowserExtension(): Promise<void> {
+    throw new Error("Method not supported on this platform.");
+  }
+
+  closeBrowserExtensionPopout(): void {
+    throw new Error("Method not supported on this platform.");
+  }
+
   async isWindowVisible(): Promise<boolean> {
     return ipc.platform.isWindowVisible();
   }

apps/web/src/app/key-management/lock/services/web-lock-component.service.spec.ts

@@ -52,6 +52,22 @@ describe("WebLockComponentService", () => {
     });
   });
 
+  describe("popOutBrowserExtension", () => {
+    it("throws platform not supported error", () => {
+      expect(() => service.popOutBrowserExtension()).toThrow(
+        "Method not supported on this platform.",
+      );
+    });
+  });
+
+  describe("closeBrowserExtensionPopout", () => {
+    it("throws platform not supported error", () => {
+      expect(() => service.closeBrowserExtensionPopout()).toThrow(
+        "Method not supported on this platform.",
+      );
+    });
+  });
+
   describe("isWindowVisible", () => {
     it("throws an error", async () => {
       await expect(service.isWindowVisible()).rejects.toThrow("Method not implemented.");

apps/web/src/app/key-management/lock/services/web-lock-component.service.ts

@@ -24,6 +24,14 @@ export class WebLockComponentService implements LockComponentService {
     return null;
   }
 
+  popOutBrowserExtension(): Promise<void> {
+    throw new Error("Method not supported on this platform.");
+  }
+
+  closeBrowserExtensionPopout(): void {
+    throw new Error("Method not supported on this platform.");
+  }
+
   async isWindowVisible(): Promise<boolean> {
     throw new Error("Method not implemented.");
   }