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/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.html

@@ -1,54 +0,0 @@
-<div
-  class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
->
-  <div>
-    <img class="logo logo-themed" alt="Bitwarden" />
-    <h3 bitTypography="h3" class="tw-my-8 tw-mb-3 tw-text-center">
-      {{ "readingPasskeyLoading" | i18n }}
-    </h3>
-
-    <div
-      class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
-    >
-      <div class="tw-flex tw-flex-col tw-items-center">
-        <ng-container *ngIf="currentState === 'assert'">
-          <div class="tw-size-24 tw-content-center tw-my-10">
-            <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
-          </div>
-          <p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
-          <button
-            type="button"
-            bitButton
-            block
-            [loading]="true"
-            buttonType="primary"
-            class="tw-mb-4"
-          >
-            {{ "loading" | i18n }}
-          </button>
-        </ng-container>
-
-        <ng-container *ngIf="currentState === 'assertFailed'">
-          <div class="tw-size-24 tw-content-center tw-my-10">
-            <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
-          </div>
-          <p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
-          <button
-            type="button"
-            bitButton
-            block
-            buttonType="primary"
-            class="tw-mb-4"
-            (click)="retry()"
-          >
-            {{ "tryAgain" | i18n }}
-          </button>
-        </ng-container>
-      </div>
-      <p bitTypography="body1" class="tw-mb-0">
-        {{ "troubleLoggingIn" | i18n }}<br />
-        <a bitLink routerLink="/login">{{ "useADifferentLogInMethod" | i18n }}</a>
-      </p>
-    </div>
-  </div>
-</div>

apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.ts

@@ -1,19 +0,0 @@
-import { Component } from "@angular/core";
-
-import { BaseLoginViaWebAuthnComponent } from "@bitwarden/angular/auth/components/base-login-via-webauthn.component";
-import {
-  TwoFactorAuthSecurityKeyIcon,
-  TwoFactorAuthSecurityKeyFailedIcon,
-} from "@bitwarden/assets/svg";
-
-@Component({
-  selector: "app-login-via-webauthn",
-  templateUrl: "login-via-webauthn.component.html",
-  standalone: false,
-})
-export class LoginViaWebAuthnComponent extends BaseLoginViaWebAuthnComponent {
-  protected readonly Icons = {
-    TwoFactorAuthSecurityKeyIcon,
-    TwoFactorAuthSecurityKeyFailedIcon,
-  };
-}

apps/web/src/app/auth/login/login.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from "@angular/core";
-
-import { CheckboxModule } from "@bitwarden/components";
-
-import { SharedModule } from "../../../app/shared";
-
-import { LoginViaWebAuthnComponent } from "./login-via-webauthn/login-via-webauthn.component";
-
-@NgModule({
-  imports: [SharedModule, CheckboxModule],
-  declarations: [LoginViaWebAuthnComponent],
-  exports: [LoginViaWebAuthnComponent],
-})
-export class LoginModule {}

apps/web/src/app/oss-routing.module.ts

@@ -10,6 +10,7 @@ import {
   unauthGuardFn,
   activeAuthGuard,
 } 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 {
@@ -17,6 +18,7 @@ import {
   RegistrationUserAddIcon,
   TwoFactorTimeoutIcon,
   TwoFactorAuthEmailIcon,
+  TwoFactorAuthSecurityKeyIcon,
   UserLockIcon,
   VaultIcon,
   SsoKeyIcon,
@@ -49,7 +51,6 @@ import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
 import { deepLinkGuard } from "./auth/guards/deep-link/deep-link.guard";
-import { LoginViaWebAuthnComponent } from "./auth/login/login-via-webauthn/login-via-webauthn.component";
 import { AcceptOrganizationComponent } from "./auth/organization-invite/accept-organization.component";
 import { RecoverDeleteComponent } from "./auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "./auth/recover-two-factor.component";
@@ -106,11 +107,6 @@ const routes: Routes = [
         children: [], // Children lets us have an empty component.
         canActivate: [redirectGuard()], // Redirects either to vault, login, or lock page.
       },
-      {
-        path: "login-with-passkey",
-        component: LoginViaWebAuthnComponent,
-        data: { titleId: "logInWithPasskey" } satisfies RouteDataProperties,
-      },
       { path: "verify-email", component: VerifyEmailTokenComponent },
       {
         path: "accept-organization",
@@ -140,6 +136,28 @@ const routes: Routes = [
     path: "",
     component: AnonLayoutWrapperComponent,
     children: [
+      {
+        path: "login-with-passkey",
+        canActivate: [unauthGuardFn()],
+        data: {
+          pageIcon: TwoFactorAuthSecurityKeyIcon,
+          titleId: "logInWithPasskey",
+          pageTitle: {
+            key: "logInWithPasskey",
+          },
+          pageSubtitle: {
+            key: "readingPasskeyLoadingInfo",
+          },
+        } satisfies RouteDataProperties & AnonLayoutWrapperData,
+        children: [
+          { path: "", component: LoginViaWebAuthnComponent },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+      },
       {
         path: "signup",
         canActivate: [unauthGuardFn()],

apps/web/src/app/oss.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from "@angular/core";
 
 import { AuthModule } from "./auth";
-import { LoginModule } from "./auth/login/login.module";
 import { TrialInitiationModule } from "./billing/trial-initiation/trial-initiation.module";
 import { HeaderModule } from "./layouts/header/header.module";
 import { SharedModule } from "./shared";
@@ -21,7 +20,6 @@ import "./shared/locales";
     TrialInitiationModule,
     VaultFilterModule,
     OrganizationBadgeModule,
-    LoginModule,
     AuthModule,
     AccessComponent,
   ],
@@ -31,7 +29,6 @@ import "./shared/locales";
     TrialInitiationModule,
     VaultFilterModule,
     OrganizationBadgeModule,
-    LoginModule,
     AccessComponent,
   ],
   bootstrap: [],

apps/web/src/locales/en/messages.json

@@ -1248,6 +1248,9 @@
   "readingPasskeyLoadingInfo": {
     "message": "Keep this window open and follow prompts from your browser."
   },
+  "passkeyAuthenticationFailed": {
+    "message": "Passkey authentication failed. Please try again."
+  },
   "useADifferentLogInMethod": {
     "message": "Use a different log in method"
   },