[PM-7084] 2/6: Add shared two-factor-auth orchestrator component, and TOTP two-factor component (#9768)

* Add shared two-factor-options component

* Add new refactored two-factor-auth component and totp auth componnet behind feature flag

* Fix default value for twofactorcomponentrefactor featureflag

apps/browser/src/auth/popup/two-factor-auth.component.ts

@@ -0,0 +1,151 @@
+import { CommonModule } from "@angular/common";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+
+import { TwoFactorAuthAuthenticatorComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
+import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth.component";
+import { TwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-options.component";
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
+import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SyncService } from "@bitwarden/common/platform/sync";
+import {
+  ButtonModule,
+  FormFieldModule,
+  AsyncActionsModule,
+  CheckboxModule,
+  DialogModule,
+  LinkModule,
+  TypographyModule,
+  DialogService,
+} from "@bitwarden/components";
+
+import {
+  LoginStrategyServiceAbstraction,
+  LoginEmailServiceAbstraction,
+  UserDecryptionOptionsServiceAbstraction,
+} from "../../../../../libs/auth/src/common/abstractions";
+import { BrowserApi } from "../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
+
+@Component({
+  standalone: true,
+  templateUrl:
+    "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
+  selector: "app-two-factor-auth",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    RouterLink,
+    CheckboxModule,
+    TwoFactorOptionsComponent,
+    TwoFactorAuthAuthenticatorComponent,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent implements OnInit {
+  constructor(
+    protected loginStrategyService: LoginStrategyServiceAbstraction,
+    protected router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    environmentService: EnvironmentService,
+    dialogService: DialogService,
+    protected route: ActivatedRoute,
+    logService: LogService,
+    protected twoFactorService: TwoFactorService,
+    loginEmailService: LoginEmailServiceAbstraction,
+    userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
+    protected ssoLoginService: SsoLoginServiceAbstraction,
+    protected configService: ConfigService,
+    masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    accountService: AccountService,
+    formBuilder: FormBuilder,
+    @Inject(WINDOW) protected win: Window,
+    private syncService: SyncService,
+    private messagingService: MessagingService,
+  ) {
+    super(
+      loginStrategyService,
+      router,
+      i18nService,
+      platformUtilsService,
+      environmentService,
+      dialogService,
+      route,
+      logService,
+      twoFactorService,
+      loginEmailService,
+      userDecryptionOptionsService,
+      ssoLoginService,
+      configService,
+      masterPasswordService,
+      accountService,
+      formBuilder,
+      win,
+    );
+    super.onSuccessfulLoginTdeNavigate = async () => {
+      this.win.close();
+    };
+    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+  }
+
+  async ngOnInit(): Promise<void> {
+    await super.ngOnInit();
+
+    if (this.route.snapshot.paramMap.has("webAuthnResponse")) {
+      // WebAuthn fallback response
+      this.selectedProviderType = TwoFactorProviderType.WebAuthn;
+      this.token = this.route.snapshot.paramMap.get("webAuthnResponse");
+      super.onSuccessfulLogin = async () => {
+        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this.syncService.fullSync(true);
+        this.messagingService.send("reloadPopup");
+        window.close();
+      };
+      this.remember = this.route.snapshot.paramMap.get("remember") === "true";
+      await this.submit();
+      return;
+    }
+
+    if (await BrowserPopupUtils.inPopout(this.win)) {
+      this.selectedProviderType = TwoFactorProviderType.Email;
+    }
+
+    // WebAuthn prompt appears inside the popup on linux, and requires a larger popup width
+    // than usual to avoid cutting off the dialog.
+    if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
+      document.body.classList.add("linux-webauthn");
+    }
+  }
+
+  async ngOnDestroy() {
+    if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
+      document.body.classList.remove("linux-webauthn");
+    }
+  }
+
+  async isLinux() {
+    return (await BrowserApi.getPlatformInfo()).os === "linux";
+  }
+}

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

@@ -19,6 +19,7 @@ import {
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
+import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap";
 import { fido2AuthGuard } from "../auth/guards/fido2-auth.guard";
 import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
 import { EnvironmentComponent } from "../auth/popup/environment.component";
@@ -33,6 +34,7 @@ import { RemovePasswordComponent } from "../auth/popup/remove-password.component
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
 import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
 import { SsoComponent } from "../auth/popup/sso.component";
+import { TwoFactorAuthComponent } from "../auth/popup/two-factor-auth.component";
 import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.component";
 import { TwoFactorComponent } from "../auth/popup/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
@@ -137,12 +139,26 @@ const routes: Routes = [
     canActivate: [lockGuard()],
     data: { state: "lock", doNotSaveUrl: true },
   },
-  {
+  ...twofactorRefactorSwap(
-    path: "2fa",
+    TwoFactorComponent,
-    component: TwoFactorComponent,
+    AnonLayoutWrapperComponent,
-    canActivate: [unauthGuardFn(unauthRouteOverrides)],
+    {
-    data: { state: "2fa" },
+      path: "2fa",
-  },
+      canActivate: [unauthGuardFn(unauthRouteOverrides)],
+      data: { state: "2fa" },
+    },
+    {
+      path: "2fa",
+      canActivate: [unauthGuardFn(unauthRouteOverrides)],
+      data: { state: "2fa" },
+      children: [
+        {
+          path: "",
+          component: TwoFactorAuthComponent,
+        },
+      ],
+    },
+  ),
   {
     path: "2fa-options",
     component: TwoFactorOptionsComponent,

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

@@ -19,6 +19,7 @@ import {
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
+import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap";
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
 import { HintComponent } from "../auth/hint.component";
@@ -30,6 +31,7 @@ import { RegisterComponent } from "../auth/register.component";
 import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
 import { SsoComponent } from "../auth/sso.component";
+import { TwoFactorAuthComponent } from "../auth/two-factor-auth.component";
 import { TwoFactorComponent } from "../auth/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VaultComponent } from "../vault/app/vault/vault.component";
@@ -61,7 +63,24 @@ const routes: Routes = [
     path: "admin-approval-requested",
     component: LoginViaAuthRequestComponent,
   },
-  { path: "2fa", component: TwoFactorComponent },
+  ...twofactorRefactorSwap(
+    TwoFactorComponent,
+    AnonLayoutWrapperComponent,
+    {
+      path: "2fa",
+    },
+    {
+      path: "2fa",
+      component: AnonLayoutWrapperComponent,
+      children: [
+        {
+          path: "",
+          component: TwoFactorAuthComponent,
+          canActivate: [unauthGuardFn()],
+        },
+      ],
+    },
+  ),
   {
     path: "login-initiated",
     component: LoginDecryptionOptionsComponent,

apps/desktop/src/auth/two-factor-auth.component.ts

@@ -0,0 +1,41 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { RouterLink } from "@angular/router";
+
+import { TwoFactorAuthAuthenticatorComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
+import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
+import { TwoFactorOptionsComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
+import { JslibModule } from "../../../../libs/angular/src/jslib.module";
+import { AsyncActionsModule } from "../../../../libs/components/src/async-actions";
+import { ButtonModule } from "../../../../libs/components/src/button";
+import { CheckboxModule } from "../../../../libs/components/src/checkbox";
+import { FormFieldModule } from "../../../../libs/components/src/form-field";
+import { LinkModule } from "../../../../libs/components/src/link";
+import { I18nPipe } from "../../../../libs/components/src/shared/i18n.pipe";
+import { TypographyModule } from "../../../../libs/components/src/typography";
+
+@Component({
+  standalone: true,
+  templateUrl:
+    "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
+  selector: "app-two-factor-auth",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    RouterLink,
+    CheckboxModule,
+    TwoFactorOptionsComponent,
+    TwoFactorAuthAuthenticatorComponent,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {}

apps/web/src/app/auth/two-factor-auth.component.ts

@@ -0,0 +1,107 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, Inject } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
+import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { LinkModule, TypographyModule, CheckboxModule, DialogService } from "@bitwarden/components";
+
+import { TwoFactorAuthAuthenticatorComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
+import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
+import { TwoFactorOptionsComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
+import {
+  LoginStrategyServiceAbstraction,
+  LoginEmailServiceAbstraction,
+  UserDecryptionOptionsServiceAbstraction,
+} from "../../../../../libs/auth/src/common/abstractions";
+import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
+import { ButtonModule } from "../../../../../libs/components/src/button";
+import { FormFieldModule } from "../../../../../libs/components/src/form-field";
+
+@Component({
+  standalone: true,
+  templateUrl:
+    "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
+  selector: "app-two-factor-auth",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    RouterLink,
+    CheckboxModule,
+    TwoFactorOptionsComponent,
+    TwoFactorAuthAuthenticatorComponent,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
+  constructor(
+    protected loginStrategyService: LoginStrategyServiceAbstraction,
+    protected router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    environmentService: EnvironmentService,
+    dialogService: DialogService,
+    protected route: ActivatedRoute,
+    logService: LogService,
+    protected twoFactorService: TwoFactorService,
+    loginEmailService: LoginEmailServiceAbstraction,
+    userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
+    protected ssoLoginService: SsoLoginServiceAbstraction,
+    protected configService: ConfigService,
+    masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    accountService: AccountService,
+    formBuilder: FormBuilder,
+    @Inject(WINDOW) protected win: Window,
+  ) {
+    super(
+      loginStrategyService,
+      router,
+      i18nService,
+      platformUtilsService,
+      environmentService,
+      dialogService,
+      route,
+      logService,
+      twoFactorService,
+      loginEmailService,
+      userDecryptionOptionsService,
+      ssoLoginService,
+      configService,
+      masterPasswordService,
+      accountService,
+      formBuilder,
+      win,
+    );
+    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+  }
+
+  protected override handleMigrateEncryptionKey(result: AuthResult): boolean {
+    if (!result.requiresEncryptionKeyMigration) {
+      return false;
+    }
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.router.navigate(["migrate-legacy-encryption"]);
+    return true;
+  }
+}

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

@@ -20,6 +20,7 @@ import {
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
+import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap";
 import { flagEnabled, Flags } from "../utils/flags";
 
 import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component";
@@ -46,6 +47,7 @@ import { EmergencyAccessViewComponent } from "./auth/settings/emergency-access/v
 import { SecurityRoutingModule } from "./auth/settings/security/security-routing.module";
 import { SsoComponent } from "./auth/sso.component";
 import { TrialInitiationComponent } from "./auth/trial-initiation/trial-initiation.component";
+import { TwoFactorAuthComponent } from "./auth/two-factor-auth.component";
 import { TwoFactorComponent } from "./auth/two-factor.component";
 import { UpdatePasswordComponent } from "./auth/update-password.component";
 import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";
@@ -248,10 +250,9 @@ const routes: Routes = [
         path: "2fa",
         canActivate: [unauthGuardFn()],
         children: [
-          {
+          ...twofactorRefactorSwap(TwoFactorComponent, TwoFactorAuthComponent, {
             path: "",
-            component: TwoFactorComponent,
+          }),
-          },
           {
             path: "",
             component: EnvironmentSelectorComponent,

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component.html

@@ -0,0 +1,16 @@
+<ng-container>
+  <p bitTypography="body1">
+    {{ "enterVerificationCodeApp" | i18n }}
+  </p>
+  <bit-form-field>
+    <bit-label>{{ "verificationCode" | i18n }}</bit-label>
+    <input
+      bitInput
+      type="text"
+      appAutofocus
+      appInputVerbatim
+      [(ngModel)]="tokenValue"
+      (input)="token.emit(tokenValue)"
+    />
+  </bit-form-field>
+</ng-container>

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component.ts

@@ -0,0 +1,37 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Output } from "@angular/core";
+import { ReactiveFormsModule, FormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import {
+  ButtonModule,
+  LinkModule,
+  TypographyModule,
+  FormFieldModule,
+  AsyncActionsModule,
+} from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  selector: "app-two-factor-auth-authenticator",
+  templateUrl: "two-factor-auth-authenticator.component.html",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    FormsModule,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthAuthenticatorComponent {
+  tokenValue: string;
+  @Output() token = new EventEmitter<string>();
+}

libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html

@@ -0,0 +1,40 @@
+<form [bitSubmit]="submitForm" [formGroup]="formGroup" autocomplete="off">
+  <div class="tw-min-w-96">
+    <app-two-factor-auth-authenticator
+      (token)="token = $event"
+      *ngIf="selectedProviderType === providerType.Authenticator"
+    />
+    <bit-form-control *ngIf="selectedProviderType != null">
+      <bit-label>{{ "rememberMe" | i18n }}</bit-label>
+      <input type="checkbox" bitCheckbox formControlName="remember" />
+    </bit-form-control>
+    <ng-container *ngIf="selectedProviderType == null">
+      <p bitTypography="body1">{{ "noTwoStepProviders" | i18n }}</p>
+      <p bitTypography="body1">{{ "noTwoStepProviders2" | i18n }}</p>
+    </ng-container>
+    <hr />
+    <div [hidden]="!showCaptcha()">
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
+    </div>
+    <!-- <!-- Buttons -->
+    <div class="tw-flex tw-flex-col tw-space-y-2.5 tw-mb-3">
+      <button
+        type="submit"
+        buttonType="primary"
+        bitButton
+        bitFormButton
+        *ngIf="selectedProviderType != null"
+      >
+        <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ actionButtonText }} </span>
+      </button>
+      <a routerLink="/login" bitButton buttonType="secondary">
+        {{ "cancel" | i18n }}
+      </a>
+    </div>
+    <div class="text-center">
+      <a bitLink href="#" appStopClick (click)="selectOtherTwofactorMethod()">{{
+        "useAnotherTwoStepMethod" | i18n
+      }}</a>
+    </div>
+  </div>
+</form>

libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts

@@ -0,0 +1,502 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ActivatedRoute, convertToParamMap, Router } from "@angular/router";
+import { mock, MockProxy } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+// eslint-disable-next-line no-restricted-imports
+import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
+import {
+  LoginStrategyServiceAbstraction,
+  LoginEmailServiceAbstraction,
+  FakeKeyConnectorUserDecryptionOption as KeyConnectorUserDecryptionOption,
+  FakeTrustedDeviceUserDecryptionOption as TrustedDeviceUserDecryptionOption,
+  FakeUserDecryptionOptions as UserDecryptionOptions,
+  UserDecryptionOptionsServiceAbstraction,
+} from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
+import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
+import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason";
+import { TokenTwoFactorRequest } from "@bitwarden/common/auth/models/request/identity-token/token-two-factor.request";
+import { FakeMasterPasswordService } from "@bitwarden/common/auth/services/master-password/fake-master-password.service";
+import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import {
+  Environment,
+  EnvironmentService,
+} from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
+import { UserId } from "@bitwarden/common/types/guid";
+import { DialogService } from "@bitwarden/components";
+
+import { TwoFactorAuthComponent } from "./two-factor-auth.component";
+
+// test component that extends the TwoFactorAuthComponent
+@Component({})
+class TestTwoFactorComponent extends TwoFactorAuthComponent {}
+
+interface TwoFactorComponentProtected {
+  trustedDeviceEncRoute: string;
+  changePasswordRoute: string;
+  forcePasswordResetRoute: string;
+  successRoute: string;
+}
+
+describe("TwoFactorComponent", () => {
+  let component: TestTwoFactorComponent;
+  let _component: TwoFactorComponentProtected;
+
+  let fixture: ComponentFixture<TestTwoFactorComponent>;
+  const userId = "userId" as UserId;
+
+  // Mock Services
+  let mockLoginStrategyService: MockProxy<LoginStrategyServiceAbstraction>;
+  let mockRouter: MockProxy<Router>;
+  let mockI18nService: MockProxy<I18nService>;
+  let mockApiService: MockProxy<ApiService>;
+  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
+  let mockWin: MockProxy<Window>;
+  let mockEnvironmentService: MockProxy<EnvironmentService>;
+  let mockStateService: MockProxy<StateService>;
+  let mockLogService: MockProxy<LogService>;
+  let mockTwoFactorService: MockProxy<TwoFactorService>;
+  let mockAppIdService: MockProxy<AppIdService>;
+  let mockLoginEmailService: MockProxy<LoginEmailServiceAbstraction>;
+  let mockUserDecryptionOptionsService: MockProxy<UserDecryptionOptionsServiceAbstraction>;
+  let mockSsoLoginService: MockProxy<SsoLoginServiceAbstraction>;
+  let mockConfigService: MockProxy<ConfigService>;
+  let mockMasterPasswordService: FakeMasterPasswordService;
+  let mockAccountService: FakeAccountService;
+  let mockDialogService: MockProxy<DialogService>;
+
+  let mockUserDecryptionOpts: {
+    noMasterPassword: UserDecryptionOptions;
+    withMasterPassword: UserDecryptionOptions;
+    withMasterPasswordAndTrustedDevice: UserDecryptionOptions;
+    withMasterPasswordAndTrustedDeviceWithManageResetPassword: UserDecryptionOptions;
+    withMasterPasswordAndKeyConnector: UserDecryptionOptions;
+    noMasterPasswordWithTrustedDevice: UserDecryptionOptions;
+    noMasterPasswordWithTrustedDeviceWithManageResetPassword: UserDecryptionOptions;
+    noMasterPasswordWithKeyConnector: UserDecryptionOptions;
+  };
+
+  let selectedUserDecryptionOptions: BehaviorSubject<UserDecryptionOptions>;
+
+  beforeEach(() => {
+    mockLoginStrategyService = mock<LoginStrategyServiceAbstraction>();
+    mockRouter = mock<Router>();
+    mockI18nService = mock<I18nService>();
+    mockApiService = mock<ApiService>();
+    mockPlatformUtilsService = mock<PlatformUtilsService>();
+    mockWin = mock<Window>();
+    const mockEnvironment = mock<Environment>();
+    mockEnvironment.getWebVaultUrl.mockReturnValue("http://example.com");
+    mockEnvironmentService = mock<EnvironmentService>();
+    mockEnvironmentService.environment$ = new BehaviorSubject(mockEnvironment);
+
+    mockStateService = mock<StateService>();
+    mockLogService = mock<LogService>();
+    mockTwoFactorService = mock<TwoFactorService>();
+    mockAppIdService = mock<AppIdService>();
+    mockLoginEmailService = mock<LoginEmailServiceAbstraction>();
+    mockUserDecryptionOptionsService = mock<UserDecryptionOptionsServiceAbstraction>();
+    mockSsoLoginService = mock<SsoLoginServiceAbstraction>();
+    mockConfigService = mock<ConfigService>();
+    mockAccountService = mockAccountServiceWith(userId);
+    mockMasterPasswordService = new FakeMasterPasswordService();
+    mockDialogService = mock<DialogService>();
+
+    mockUserDecryptionOpts = {
+      noMasterPassword: new UserDecryptionOptions({
+        hasMasterPassword: false,
+        trustedDeviceOption: undefined,
+        keyConnectorOption: undefined,
+      }),
+      withMasterPassword: new UserDecryptionOptions({
+        hasMasterPassword: true,
+        trustedDeviceOption: undefined,
+        keyConnectorOption: undefined,
+      }),
+      withMasterPasswordAndTrustedDevice: new UserDecryptionOptions({
+        hasMasterPassword: true,
+        trustedDeviceOption: new TrustedDeviceUserDecryptionOption(true, false, false),
+        keyConnectorOption: undefined,
+      }),
+      withMasterPasswordAndTrustedDeviceWithManageResetPassword: new UserDecryptionOptions({
+        hasMasterPassword: true,
+        trustedDeviceOption: new TrustedDeviceUserDecryptionOption(true, false, true),
+        keyConnectorOption: undefined,
+      }),
+      withMasterPasswordAndKeyConnector: new UserDecryptionOptions({
+        hasMasterPassword: true,
+        trustedDeviceOption: undefined,
+        keyConnectorOption: new KeyConnectorUserDecryptionOption("http://example.com"),
+      }),
+      noMasterPasswordWithTrustedDevice: new UserDecryptionOptions({
+        hasMasterPassword: false,
+        trustedDeviceOption: new TrustedDeviceUserDecryptionOption(true, false, false),
+        keyConnectorOption: undefined,
+      }),
+      noMasterPasswordWithTrustedDeviceWithManageResetPassword: new UserDecryptionOptions({
+        hasMasterPassword: false,
+        trustedDeviceOption: new TrustedDeviceUserDecryptionOption(true, false, true),
+        keyConnectorOption: undefined,
+      }),
+      noMasterPasswordWithKeyConnector: new UserDecryptionOptions({
+        hasMasterPassword: false,
+        trustedDeviceOption: undefined,
+        keyConnectorOption: new KeyConnectorUserDecryptionOption("http://example.com"),
+      }),
+    };
+
+    selectedUserDecryptionOptions = new BehaviorSubject<UserDecryptionOptions>(null);
+    mockUserDecryptionOptionsService.userDecryptionOptions$ = selectedUserDecryptionOptions;
+
+    TestBed.configureTestingModule({
+      declarations: [TestTwoFactorComponent],
+      providers: [
+        { provide: LoginStrategyServiceAbstraction, useValue: mockLoginStrategyService },
+        { provide: Router, useValue: mockRouter },
+        { provide: I18nService, useValue: mockI18nService },
+        { provide: ApiService, useValue: mockApiService },
+        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
+        { provide: WINDOW, useValue: mockWin },
+        { provide: EnvironmentService, useValue: mockEnvironmentService },
+        { provide: StateService, useValue: mockStateService },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              // Default to standard 2FA flow - not SSO + 2FA
+              queryParamMap: convertToParamMap({ sso: "false" }),
+            },
+          },
+        },
+        { provide: LogService, useValue: mockLogService },
+        { provide: TwoFactorService, useValue: mockTwoFactorService },
+        { provide: AppIdService, useValue: mockAppIdService },
+        { provide: LoginEmailServiceAbstraction, useValue: mockLoginEmailService },
+        {
+          provide: UserDecryptionOptionsServiceAbstraction,
+          useValue: mockUserDecryptionOptionsService,
+        },
+        { provide: SsoLoginServiceAbstraction, useValue: mockSsoLoginService },
+        { provide: ConfigService, useValue: mockConfigService },
+        { provide: InternalMasterPasswordServiceAbstraction, useValue: mockMasterPasswordService },
+        { provide: AccountService, useValue: mockAccountService },
+        { provide: DialogService, useValue: mockDialogService },
+      ],
+    });
+
+    fixture = TestBed.createComponent(TestTwoFactorComponent);
+    component = fixture.componentInstance;
+    _component = component as any;
+  });
+
+  afterEach(() => {
+    // Reset all mocks after each test
+    jest.resetAllMocks();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  // Shared tests
+  const testChangePasswordOnSuccessfulLogin = () => {
+    it("navigates to the component's defined change password route when user doesn't have a MP and key connector isn't enabled", async () => {
+      // Act
+      await component.submit();
+
+      // Assert
+      expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+      expect(mockRouter.navigate).toHaveBeenCalledWith([_component.changePasswordRoute], {
+        queryParams: {
+          identifier: component.orgIdentifier,
+        },
+      });
+    });
+  };
+
+  const testForceResetOnSuccessfulLogin = (reasonString: string) => {
+    it(`navigates to the component's defined forcePasswordResetRoute route when response.forcePasswordReset is ${reasonString}`, async () => {
+      // Act
+      await component.submit();
+
+      // expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+      expect(mockRouter.navigate).toHaveBeenCalledWith([_component.forcePasswordResetRoute], {
+        queryParams: {
+          identifier: component.orgIdentifier,
+        },
+      });
+    });
+  };
+
+  describe("Standard 2FA scenarios", () => {
+    describe("submit", () => {
+      const token = "testToken";
+      const remember = false;
+      const captchaToken = "testCaptchaToken";
+
+      beforeEach(() => {
+        component.token = token;
+        component.remember = remember;
+        component.captchaToken = captchaToken;
+
+        selectedUserDecryptionOptions.next(mockUserDecryptionOpts.withMasterPassword);
+      });
+
+      it("calls authService.logInTwoFactor with correct parameters when form is submitted", async () => {
+        // Arrange
+        mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
+
+        // Act
+        await component.submit();
+
+        // Assert
+        expect(mockLoginStrategyService.logInTwoFactor).toHaveBeenCalledWith(
+          new TokenTwoFactorRequest(component.selectedProviderType, token, remember),
+          captchaToken,
+        );
+      });
+
+      it("should return when handleCaptchaRequired returns true", async () => {
+        // Arrange
+        const captchaSiteKey = "testCaptchaSiteKey";
+        const authResult = new AuthResult();
+        authResult.captchaSiteKey = captchaSiteKey;
+
+        mockLoginStrategyService.logInTwoFactor.mockResolvedValue(authResult);
+
+        // Note: the any casts are required b/c typescript cant recognize that
+        // handleCaptureRequired is a method on TwoFactorComponent b/c it is inherited
+        // from the CaptchaProtectedComponent
+        const handleCaptchaRequiredSpy = jest
+          .spyOn<any, any>(component, "handleCaptchaRequired")
+          .mockReturnValue(true);
+
+        // Act
+        const result = await component.submit();
+
+        // Assert
+        expect(handleCaptchaRequiredSpy).toHaveBeenCalled();
+        expect(result).toBeUndefined();
+      });
+
+      it("calls onSuccessfulLogin when defined", async () => {
+        // Arrange
+        component.onSuccessfulLogin = jest.fn().mockResolvedValue(undefined);
+        mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
+
+        // Act
+        await component.submit();
+
+        // Assert
+        expect(component.onSuccessfulLogin).toHaveBeenCalled();
+      });
+
+      it("calls loginEmailService.clearValues() when login is successful", async () => {
+        // Arrange
+        mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
+        // spy on loginEmailService.clearValues
+        const clearValuesSpy = jest.spyOn(mockLoginEmailService, "clearValues");
+
+        // Act
+        await component.submit();
+
+        // Assert
+        expect(clearValuesSpy).toHaveBeenCalled();
+      });
+
+      describe("Set Master Password scenarios", () => {
+        beforeEach(() => {
+          const authResult = new AuthResult();
+          mockLoginStrategyService.logInTwoFactor.mockResolvedValue(authResult);
+        });
+
+        describe("Given user needs to set a master password", () => {
+          beforeEach(() => {
+            // Only need to test the case where the user has no master password to test the primary change mp flow here
+            selectedUserDecryptionOptions.next(mockUserDecryptionOpts.noMasterPassword);
+          });
+
+          testChangePasswordOnSuccessfulLogin();
+        });
+
+        it("does not navigate to the change password route when the user has key connector even if user has no master password", async () => {
+          selectedUserDecryptionOptions.next(
+            mockUserDecryptionOpts.noMasterPasswordWithKeyConnector,
+          );
+
+          await component.submit();
+
+          expect(mockRouter.navigate).not.toHaveBeenCalledWith([_component.changePasswordRoute], {
+            queryParams: {
+              identifier: component.orgIdentifier,
+            },
+          });
+        });
+      });
+
+      describe("Force Master Password Reset scenarios", () => {
+        [
+          ForceSetPasswordReason.AdminForcePasswordReset,
+          ForceSetPasswordReason.WeakMasterPassword,
+        ].forEach((forceResetPasswordReason) => {
+          const reasonString = ForceSetPasswordReason[forceResetPasswordReason];
+
+          beforeEach(() => {
+            // use standard user with MP because this test is not concerned with password reset.
+            selectedUserDecryptionOptions.next(mockUserDecryptionOpts.withMasterPassword);
+
+            const authResult = new AuthResult();
+            authResult.forcePasswordReset = forceResetPasswordReason;
+            mockLoginStrategyService.logInTwoFactor.mockResolvedValue(authResult);
+          });
+
+          testForceResetOnSuccessfulLogin(reasonString);
+        });
+      });
+
+      it("calls onSuccessfulLoginNavigate when the callback is defined", async () => {
+        // Arrange
+        component.onSuccessfulLoginNavigate = jest.fn().mockResolvedValue(undefined);
+        mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
+
+        // Act
+        await component.submit();
+
+        // Assert
+        expect(component.onSuccessfulLoginNavigate).toHaveBeenCalled();
+      });
+
+      it("navigates to the component's defined success route when the login is successful and onSuccessfulLoginNavigate is undefined", async () => {
+        mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
+
+        // Act
+        await component.submit();
+
+        // Assert
+        expect(component.onSuccessfulLoginNavigate).not.toBeDefined();
+
+        expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+        expect(mockRouter.navigate).toHaveBeenCalledWith([_component.successRoute], undefined);
+      });
+    });
+  });
+
+  describe("SSO > 2FA scenarios", () => {
+    beforeEach(() => {
+      const mockActivatedRoute = TestBed.inject(ActivatedRoute);
+      mockActivatedRoute.snapshot.queryParamMap.get = jest.fn().mockReturnValue("true");
+    });
+
+    describe("submit", () => {
+      const token = "testToken";
+      const remember = false;
+      const captchaToken = "testCaptchaToken";
+
+      beforeEach(() => {
+        component.token = token;
+        component.remember = remember;
+        component.captchaToken = captchaToken;
+      });
+
+      describe("Trusted Device Encryption scenarios", () => {
+        beforeEach(() => {
+          mockConfigService.getFeatureFlag.mockResolvedValue(true);
+        });
+
+        describe("Given Trusted Device Encryption is enabled and user needs to set a master password", () => {
+          beforeEach(() => {
+            selectedUserDecryptionOptions.next(
+              mockUserDecryptionOpts.noMasterPasswordWithTrustedDeviceWithManageResetPassword,
+            );
+
+            const authResult = new AuthResult();
+            mockLoginStrategyService.logInTwoFactor.mockResolvedValue(authResult);
+          });
+
+          it("navigates to the component's defined trusted device encryption route and sets correct flag when user doesn't have a MP and key connector isn't enabled", async () => {
+            // Act
+            await component.submit();
+
+            // Assert
+            expect(mockMasterPasswordService.mock.setForceSetPasswordReason).toHaveBeenCalledWith(
+              ForceSetPasswordReason.TdeUserWithoutPasswordHasPasswordResetPermission,
+              userId,
+            );
+
+            expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+            expect(mockRouter.navigate).toHaveBeenCalledWith(
+              [_component.trustedDeviceEncRoute],
+              undefined,
+            );
+          });
+        });
+
+        describe("Given Trusted Device Encryption is enabled, user doesn't need to set a MP, and forcePasswordReset is required", () => {
+          [
+            ForceSetPasswordReason.AdminForcePasswordReset,
+            ForceSetPasswordReason.WeakMasterPassword,
+          ].forEach((forceResetPasswordReason) => {
+            const reasonString = ForceSetPasswordReason[forceResetPasswordReason];
+
+            beforeEach(() => {
+              // use standard user with MP because this test is not concerned with password reset.
+              selectedUserDecryptionOptions.next(
+                mockUserDecryptionOpts.withMasterPasswordAndTrustedDevice,
+              );
+
+              const authResult = new AuthResult();
+              authResult.forcePasswordReset = forceResetPasswordReason;
+              mockLoginStrategyService.logInTwoFactor.mockResolvedValue(authResult);
+            });
+
+            testForceResetOnSuccessfulLogin(reasonString);
+          });
+        });
+
+        describe("Given Trusted Device Encryption is enabled, user doesn't need to set a MP, and forcePasswordReset is not required", () => {
+          let authResult;
+          beforeEach(() => {
+            selectedUserDecryptionOptions.next(
+              mockUserDecryptionOpts.withMasterPasswordAndTrustedDevice,
+            );
+
+            authResult = new AuthResult();
+            authResult.forcePasswordReset = ForceSetPasswordReason.None;
+            mockLoginStrategyService.logInTwoFactor.mockResolvedValue(authResult);
+          });
+
+          it("navigates to the component's defined trusted device encryption route when login is successful and onSuccessfulLoginTdeNavigate is undefined", async () => {
+            await component.submit();
+
+            expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+            expect(mockRouter.navigate).toHaveBeenCalledWith(
+              [_component.trustedDeviceEncRoute],
+              undefined,
+            );
+          });
+
+          it("calls onSuccessfulLoginTdeNavigate instead of router.navigate when the callback is defined", async () => {
+            component.onSuccessfulLoginTdeNavigate = jest.fn().mockResolvedValue(undefined);
+
+            await component.submit();
+
+            expect(mockRouter.navigate).not.toHaveBeenCalled();
+            expect(component.onSuccessfulLoginTdeNavigate).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+});

libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts

@@ -0,0 +1,394 @@
+import { CommonModule } from "@angular/common";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
+import { ActivatedRoute, NavigationExtras, Router, RouterLink } from "@angular/router";
+import { Subject, takeUntil, lastValueFrom, first, firstValueFrom } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
+import {
+  LoginStrategyServiceAbstraction,
+  LoginEmailServiceAbstraction,
+  UserDecryptionOptionsServiceAbstraction,
+  TrustedDeviceUserDecryptionOption,
+  UserDecryptionOptions,
+} from "@bitwarden/auth/common";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
+import { AuthenticationType } from "@bitwarden/common/auth/enums/authentication-type";
+import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
+import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
+import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason";
+import { TokenTwoFactorRequest } from "@bitwarden/common/auth/models/request/identity-token/token-two-factor.request";
+import { TwoFactorProviders } from "@bitwarden/common/auth/services/two-factor.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  DialogService,
+  FormFieldModule,
+} from "@bitwarden/components";
+
+import { CaptchaProtectedComponent } from "../captcha-protected.component";
+
+import { TwoFactorAuthAuthenticatorComponent } from "./two-factor-auth-authenticator.component";
+import {
+  TwoFactorOptionsDialogResult,
+  TwoFactorOptionsComponent,
+  TwoFactorOptionsDialogResultType,
+} from "./two-factor-options.component";
+
+@Component({
+  standalone: true,
+  selector: "app-two-factor-auth",
+  templateUrl: "two-factor-auth.component.html",
+  imports: [
+    CommonModule,
+    JslibModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    RouterLink,
+    ButtonModule,
+    TwoFactorOptionsComponent,
+    TwoFactorAuthAuthenticatorComponent,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements OnInit {
+  token = "";
+  remember = false;
+  orgIdentifier: string = null;
+
+  providers = TwoFactorProviders;
+  providerType = TwoFactorProviderType;
+  selectedProviderType: TwoFactorProviderType = TwoFactorProviderType.Authenticator;
+  providerData: any;
+
+  formGroup = this.formBuilder.group({
+    token: [
+      "",
+      {
+        validators: [Validators.required],
+        updateOn: "submit",
+      },
+    ],
+    remember: [false],
+  });
+  actionButtonText = "";
+  title = "";
+  formPromise: Promise<any>;
+
+  private destroy$ = new Subject<void>();
+
+  onSuccessfulLogin: () => Promise<void>;
+  onSuccessfulLoginNavigate: () => Promise<void>;
+
+  onSuccessfulLoginTde: () => Promise<void>;
+  onSuccessfulLoginTdeNavigate: () => Promise<void>;
+
+  submitForm = async () => {
+    await this.submit();
+  };
+  goAfterLogIn = async () => {
+    this.loginEmailService.clearValues();
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.router.navigate([this.successRoute], {
+      queryParams: {
+        identifier: this.orgIdentifier,
+      },
+    });
+  };
+
+  protected loginRoute = "login";
+
+  protected trustedDeviceEncRoute = "login-initiated";
+  protected changePasswordRoute = "set-password";
+  protected forcePasswordResetRoute = "update-temp-password";
+  protected successRoute = "vault";
+
+  constructor(
+    protected loginStrategyService: LoginStrategyServiceAbstraction,
+    protected router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    environmentService: EnvironmentService,
+    private dialogService: DialogService,
+    protected route: ActivatedRoute,
+    private logService: LogService,
+    protected twoFactorService: TwoFactorService,
+    private loginEmailService: LoginEmailServiceAbstraction,
+    private userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
+    protected ssoLoginService: SsoLoginServiceAbstraction,
+    protected configService: ConfigService,
+    private masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    private accountService: AccountService,
+    private formBuilder: FormBuilder,
+    @Inject(WINDOW) protected win: Window,
+  ) {
+    super(environmentService, i18nService, platformUtilsService);
+  }
+
+  async ngOnInit() {
+    if (!(await this.authing()) || (await this.twoFactorService.getProviders()) == null) {
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.router.navigate([this.loginRoute]);
+      return;
+    }
+
+    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+    this.route.queryParams.pipe(first()).subscribe((qParams) => {
+      if (qParams.identifier != null) {
+        this.orgIdentifier = qParams.identifier;
+      }
+    });
+
+    if (await this.needsLock()) {
+      this.successRoute = "lock";
+    }
+
+    const webAuthnSupported = this.platformUtilsService.supportsWebAuthn(this.win);
+    this.selectedProviderType = await this.twoFactorService.getDefaultProvider(webAuthnSupported);
+    const providerData = await this.twoFactorService.getProviders().then((providers) => {
+      return providers.get(this.selectedProviderType);
+    });
+    this.providerData = providerData;
+    await this.updateUIToProviderData();
+
+    this.actionButtonText = this.i18nService.t("continue");
+    this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      this.token = value.token;
+      this.remember = value.remember;
+    });
+  }
+
+  async submit() {
+    await this.setupCaptcha();
+
+    if (this.token == null || this.token === "") {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("verificationCodeRequired"),
+      );
+      return;
+    }
+
+    try {
+      this.formPromise = this.loginStrategyService.logInTwoFactor(
+        new TokenTwoFactorRequest(this.selectedProviderType, this.token, this.remember),
+        this.captchaToken,
+      );
+      const authResult: AuthResult = await this.formPromise;
+      this.logService.info("Successfully submitted two factor token");
+      await this.handleLoginResponse(authResult);
+    } catch {
+      this.logService.error("Error submitting two factor token");
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("invalidVerificationCode"),
+      );
+    }
+  }
+
+  async selectOtherTwofactorMethod() {
+    const dialogRef = TwoFactorOptionsComponent.open(this.dialogService);
+    const response: TwoFactorOptionsDialogResultType = await lastValueFrom(dialogRef.closed);
+    if (response.result === TwoFactorOptionsDialogResult.Provider) {
+      const providerData = await this.twoFactorService.getProviders().then((providers) => {
+        return providers.get(response.type);
+      });
+      this.providerData = providerData;
+      this.selectedProviderType = response.type;
+      await this.updateUIToProviderData();
+    }
+  }
+
+  protected handleMigrateEncryptionKey(result: AuthResult): boolean {
+    if (!result.requiresEncryptionKeyMigration) {
+      return false;
+    }
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.router.navigate(["migrate-legacy-encryption"]);
+    return true;
+  }
+
+  async updateUIToProviderData() {
+    if (this.selectedProviderType == null) {
+      this.title = this.i18nService.t("loginUnavailable");
+      return;
+    }
+
+    this.title = (TwoFactorProviders as any)[this.selectedProviderType].name;
+  }
+
+  private async handleLoginResponse(authResult: AuthResult) {
+    if (this.handleCaptchaRequired(authResult)) {
+      return;
+    } else if (this.handleMigrateEncryptionKey(authResult)) {
+      return;
+    }
+
+    // Save off the OrgSsoIdentifier for use in the TDE flows
+    // - TDE login decryption options component
+    // - Browser SSO on extension open
+    await this.ssoLoginService.setActiveUserOrganizationSsoIdentifier(this.orgIdentifier);
+    this.loginEmailService.clearValues();
+
+    // note: this flow affects both TDE & standard users
+    if (this.isForcePasswordResetRequired(authResult)) {
+      return await this.handleForcePasswordReset(this.orgIdentifier);
+    }
+
+    const userDecryptionOpts = await firstValueFrom(
+      this.userDecryptionOptionsService.userDecryptionOptions$,
+    );
+
+    const tdeEnabled = await this.isTrustedDeviceEncEnabled(userDecryptionOpts.trustedDeviceOption);
+
+    if (tdeEnabled) {
+      return await this.handleTrustedDeviceEncryptionEnabled(
+        authResult,
+        this.orgIdentifier,
+        userDecryptionOpts,
+      );
+    }
+
+    // User must set password if they don't have one and they aren't using either TDE or key connector.
+    const requireSetPassword =
+      !userDecryptionOpts.hasMasterPassword && userDecryptionOpts.keyConnectorOption === undefined;
+
+    if (requireSetPassword || authResult.resetMasterPassword) {
+      // Change implies going no password -> password in this case
+      return await this.handleChangePasswordRequired(this.orgIdentifier);
+    }
+
+    return await this.handleSuccessfulLogin();
+  }
+
+  private async isTrustedDeviceEncEnabled(
+    trustedDeviceOption: TrustedDeviceUserDecryptionOption,
+  ): Promise<boolean> {
+    const ssoTo2faFlowActive = this.route.snapshot.queryParamMap.get("sso") === "true";
+
+    return ssoTo2faFlowActive && trustedDeviceOption !== undefined;
+  }
+
+  private async handleTrustedDeviceEncryptionEnabled(
+    authResult: AuthResult,
+    orgIdentifier: string,
+    userDecryptionOpts: UserDecryptionOptions,
+  ): Promise<void> {
+    // If user doesn't have a MP, but has reset password permission, they must set a MP
+    if (
+      !userDecryptionOpts.hasMasterPassword &&
+      userDecryptionOpts.trustedDeviceOption.hasManageResetPasswordPermission
+    ) {
+      // Set flag so that auth guard can redirect to set password screen after decryption (trusted or untrusted device)
+      // Note: we cannot directly navigate to the set password screen in this scenario as we are in a pre-decryption state, and
+      // if you try to set a new MP before decrypting, you will invalidate the user's data by making a new user key.
+      const userId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
+      await this.masterPasswordService.setForceSetPasswordReason(
+        ForceSetPasswordReason.TdeUserWithoutPasswordHasPasswordResetPermission,
+        userId,
+      );
+    }
+
+    if (this.onSuccessfulLoginTde != null) {
+      // Note: awaiting this will currently cause a hang on desktop & browser as they will wait for a full sync to complete
+      // before navigating to the success route.
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.onSuccessfulLoginTde();
+    }
+
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.navigateViaCallbackOrRoute(
+      this.onSuccessfulLoginTdeNavigate,
+      // Navigate to TDE page (if user was on trusted device and TDE has decrypted
+      //  their user key, the login-initiated guard will redirect them to the vault)
+      [this.trustedDeviceEncRoute],
+    );
+  }
+
+  private async handleChangePasswordRequired(orgIdentifier: string) {
+    await this.router.navigate([this.changePasswordRoute], {
+      queryParams: {
+        identifier: orgIdentifier,
+      },
+    });
+  }
+
+  /**
+   * Determines if a user needs to reset their password based on certain conditions.
+   * Users can be forced to reset their password via an admin or org policy disallowing weak passwords.
+   * Note: this is different from the SSO component login flow as a user can
+   * login with MP and then have to pass 2FA to finish login and we can actually
+   * evaluate if they have a weak password at that time.
+   *
+   * @param {AuthResult} authResult - The authentication result.
+   * @returns {boolean} Returns true if a password reset is required, false otherwise.
+   */
+  private isForcePasswordResetRequired(authResult: AuthResult): boolean {
+    const forceResetReasons = [
+      ForceSetPasswordReason.AdminForcePasswordReset,
+      ForceSetPasswordReason.WeakMasterPassword,
+    ];
+
+    return forceResetReasons.includes(authResult.forcePasswordReset);
+  }
+
+  private async handleForcePasswordReset(orgIdentifier: string) {
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.router.navigate([this.forcePasswordResetRoute], {
+      queryParams: {
+        identifier: orgIdentifier,
+      },
+    });
+  }
+
+  private async handleSuccessfulLogin() {
+    if (this.onSuccessfulLogin != null) {
+      // Note: awaiting this will currently cause a hang on desktop & browser as they will wait for a full sync to complete
+      // before navigating to the success route.
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.onSuccessfulLogin();
+    }
+    await this.navigateViaCallbackOrRoute(this.onSuccessfulLoginNavigate, [this.successRoute]);
+  }
+
+  private async navigateViaCallbackOrRoute(
+    callback: () => Promise<unknown>,
+    commands: unknown[],
+    extras?: NavigationExtras,
+  ): Promise<void> {
+    if (callback) {
+      await callback();
+    } else {
+      await this.router.navigate(commands, extras);
+    }
+  }
+
+  private async authing(): Promise<boolean> {
+    return (await firstValueFrom(this.loginStrategyService.currentAuthType$)) !== null;
+  }
+
+  private async needsLock(): Promise<boolean> {
+    const authType = await firstValueFrom(this.loginStrategyService.currentAuthType$);
+    return authType == AuthenticationType.Sso || authType == AuthenticationType.UserApiKey;
+  }
+}

libs/angular/src/utils/two-factor-component-refactor-route-swap.ts

@@ -0,0 +1,31 @@
+import { Type, inject } from "@angular/core";
+import { Route, Routes } from "@angular/router";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import { componentRouteSwap } from "./component-route-swap";
+/**
+ * Helper function to swap between two components based on the TwoFactorComponentRefactor feature flag.
+ * @param defaultComponent - The current non-refactored component to render.
+ * @param refreshedComponent - The new refactored component to render.
+ * @param defaultOptions - The options to apply to the default component and the refactored component, if alt options are not provided.
+ * @param altOptions - The options to apply to the refactored component.
+ */
+export function twofactorRefactorSwap(
+  defaultComponent: Type<any>,
+  refreshedComponent: Type<any>,
+  defaultOptions: Route,
+  altOptions?: Route,
+): Routes {
+  return componentRouteSwap(
+    defaultComponent,
+    refreshedComponent,
+    async () => {
+      const configService = inject(ConfigService);
+      return configService.getFeatureFlag(FeatureFlag.TwoFactorComponentRefactor);
+    },
+    defaultOptions,
+    altOptions,
+  );
+}

libs/common/src/enums/feature-flag.enum.ts

@@ -20,6 +20,7 @@ export enum FeatureFlag {
   EmailVerification = "email-verification",
   InlineMenuFieldQualification = "inline-menu-field-qualification",
   MemberAccessReport = "ac-2059-member-access-report",
+  TwoFactorComponentRefactor = "two-factor-component-refactor",
   EnableTimeThreshold = "PM-5864-dollar-threshold",
   GroupsComponentRefactor = "groups-component-refactor",
   ProviderClientVaultPrivacyBanner = "ac-2833-provider-client-vault-privacy-banner",
@@ -53,6 +54,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.EmailVerification]: FALSE,
   [FeatureFlag.InlineMenuFieldQualification]: FALSE,
   [FeatureFlag.MemberAccessReport]: FALSE,
+  [FeatureFlag.TwoFactorComponentRefactor]: FALSE,
   [FeatureFlag.EnableTimeThreshold]: FALSE,
   [FeatureFlag.GroupsComponentRefactor]: FALSE,
   [FeatureFlag.ProviderClientVaultPrivacyBanner]: FALSE,