PM-13632: Enable sign in with passkeys in the browser extension for chromium browsers (#16385)

* PM-13632: Enable sign in with passkeys in the browser extension

* Refactor component + Icon fix

This commit refactors the login-via-webauthn commit as per @JaredSnider-Bitwarden suggestions. It also fixes an existing issue where Icons are not displayed properly on the web vault.

Remove old one.

Rename the file

Working refactor

Removed the icon from the component

Fixed icons not showing. Changed layout to be 'embedded'

* Add tracking links

* Update app.module.ts

* Remove default Icons on load

* Remove login.module.ts

* Add env changer to the passkey component

* Remove leftover dependencies

* use .isChromium()

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

@@ -1548,6 +1548,15 @@
   "readSecurityKey": {
     "message": "Read security key"
   },
+  "readingPasskeyLoading": {
+    "message": "Reading passkey..."
+  },
+  "passkeyAuthenticationFailed": {
+    "message": "Passkey authentication failed"
+  },
+  "useADifferentLogInMethod": {
+    "message": "Use a different log in method"
+  },
   "awaitingSecurityKeyInteraction": {
     "message": "Awaiting security key interaction..."
   },

apps/browser/src/auth/popup/login/extension-login-component.service.ts

@@ -68,4 +68,18 @@ export class ExtensionLoginComponentService
   showBackButton(showBackButton: boolean): void {
     this.extensionAnonLayoutWrapperDataService.setAnonLayoutWrapperData({ showBackButton });
   }
+
+  /**
+   * Enable passkey login support for chromium-based browsers only.
+   * Neither Firefox nor safari support overriding the relying party ID in an extension.
+   *
+   * https://github.com/w3c/webextensions/issues/238
+   *
+   * Tracking links:
+   * https://bugzilla.mozilla.org/show_bug.cgi?id=1956484
+   * https://developer.apple.com/forums/thread/774351
+   */
+  isLoginWithPasskeySupported(): boolean {
+    return this.platformUtilsService.isChromium();
+  }
 }

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

@@ -12,6 +12,7 @@ import {
   tdeDecryptionRequiredGuard,
   unauthGuardFn,
 } from "@bitwarden/angular/auth/guards";
+import { LoginViaWebAuthnComponent } from "@bitwarden/angular/auth/login-via-webauthn/login-via-webauthn.component";
 import { ChangePasswordComponent } from "@bitwarden/angular/auth/password-management/change-password";
 import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-management/set-initial-password/set-initial-password.component";
 import {
@@ -22,6 +23,7 @@ import {
   UserLockIcon,
   VaultIcon,
   LockIcon,
+  TwoFactorAuthSecurityKeyIcon,
   DeactivatedOrg,
 } from "@bitwarden/assets/svg";
 import {
@@ -403,6 +405,29 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "login-with-passkey",
+        canActivate: [unauthGuardFn(unauthRouteOverrides)],
+        data: {
+          pageIcon: TwoFactorAuthSecurityKeyIcon,
+          pageTitle: {
+            key: "logInWithPasskey",
+          },
+          pageSubtitle: {
+            key: "readingPasskeyLoadingInfo",
+          },
+          elevation: 1,
+          showBackButton: true,
+        } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
+        children: [
+          { path: "", component: LoginViaWebAuthnComponent },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+      },
       {
         path: "sso",
         canActivate: [unauthGuardFn(unauthRouteOverrides)],