Merge branch 'main' into km/new-encrypt-service-interface

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

@@ -1,6 +1,13 @@
 <ng-container>
   <bit-form-field>
     <bit-label>{{ "verificationCode" | i18n }}</bit-label>
-    <input bitInput type="text" appAutofocus appInputVerbatim [formControl]="tokenFormControl" />
+    <input
+      bitInput
+      type="text"
+      appAutofocus
+      appInputVerbatim
+      [formControl]="tokenFormControl"
+      (keyup)="onTokenChange($event)"
+    />
   </bit-form-field>
 </ng-container>

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

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { ReactiveFormsModule, FormsModule, FormControl } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -32,4 +32,10 @@ import {
 })
 export class TwoFactorAuthAuthenticatorComponent {
   @Input({ required: true }) tokenFormControl: FormControl | undefined = undefined;
+  @Output() tokenChange = new EventEmitter<{ token: string }>();
+
+  onTokenChange(event: Event) {
+    const tokenValue = (event.target as HTMLInputElement).value || "";
+    this.tokenChange.emit({ token: tokenValue });
+  }
 }

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-email/two-factor-auth-component-email-cache.service.spec.ts

@@ -0,0 +1,165 @@
+import { TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import {
+  TwoFactorAuthEmailComponentCache,
+  TwoFactorAuthEmailComponentCacheService,
+} from "./two-factor-auth-email-component-cache.service";
+
+describe("TwoFactorAuthEmailCache", () => {
+  describe("fromJSON", () => {
+    it("returns null when input is null", () => {
+      const result = TwoFactorAuthEmailComponentCache.fromJSON(null as any);
+      expect(result).toBeNull();
+    });
+
+    it("creates a TwoFactorAuthEmailCache instance from valid JSON", () => {
+      const jsonData = { emailSent: true };
+      const result = TwoFactorAuthEmailComponentCache.fromJSON(jsonData);
+
+      expect(result).not.toBeNull();
+      expect(result).toBeInstanceOf(TwoFactorAuthEmailComponentCache);
+      expect(result?.emailSent).toBe(true);
+    });
+  });
+});
+
+describe("TwoFactorAuthEmailComponentCacheService", () => {
+  let service: TwoFactorAuthEmailComponentCacheService;
+  let mockViewCacheService: MockProxy<ViewCacheService>;
+  let mockConfigService: MockProxy<ConfigService>;
+  let cacheData: BehaviorSubject<TwoFactorAuthEmailComponentCache | null>;
+  let mockSignal: any;
+
+  beforeEach(() => {
+    mockViewCacheService = mock<ViewCacheService>();
+    mockConfigService = mock<ConfigService>();
+    cacheData = new BehaviorSubject<TwoFactorAuthEmailComponentCache | null>(null);
+    mockSignal = jest.fn(() => cacheData.getValue());
+    mockSignal.set = jest.fn((value: TwoFactorAuthEmailComponentCache | null) =>
+      cacheData.next(value),
+    );
+    mockViewCacheService.signal.mockReturnValue(mockSignal);
+
+    TestBed.configureTestingModule({
+      providers: [
+        TwoFactorAuthEmailComponentCacheService,
+        { provide: ViewCacheService, useValue: mockViewCacheService },
+        { provide: ConfigService, useValue: mockConfigService },
+      ],
+    });
+
+    service = TestBed.inject(TwoFactorAuthEmailComponentCacheService);
+  });
+
+  it("creates the service", () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe("init", () => {
+    it("sets featureEnabled to true when flag is enabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+
+      await service.init();
+
+      expect(mockConfigService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+      );
+
+      service.cacheData({ emailSent: true });
+      expect(mockSignal.set).toHaveBeenCalled();
+    });
+
+    it("sets featureEnabled to false when flag is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+
+      await service.init();
+
+      expect(mockConfigService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+      );
+
+      service.cacheData({ emailSent: true });
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("cacheData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("caches email sent state when feature is enabled", () => {
+      service.cacheData({ emailSent: true });
+
+      expect(mockSignal.set).toHaveBeenCalledWith({
+        emailSent: true,
+      });
+    });
+
+    it("does not cache data when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      service.cacheData({ emailSent: true });
+
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("clearCachedData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("clears cached data when feature is enabled", () => {
+      service.clearCachedData();
+
+      expect(mockSignal.set).toHaveBeenCalledWith(null);
+    });
+
+    it("does not clear cached data when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      service.clearCachedData();
+
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("getCachedData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("returns cached data when feature is enabled", () => {
+      const testData = new TwoFactorAuthEmailComponentCache();
+      testData.emailSent = true;
+      cacheData.next(testData);
+
+      const result = service.getCachedData();
+
+      expect(result).toEqual(testData);
+      expect(mockSignal).toHaveBeenCalled();
+    });
+
+    it("returns null when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      const result = service.getCachedData();
+
+      expect(result).toBeNull();
+      expect(mockSignal).not.toHaveBeenCalled();
+    });
+  });
+});

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-email/two-factor-auth-email-component-cache.service.spec.ts

@@ -0,0 +1,165 @@
+import { TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import {
+  TwoFactorAuthEmailComponentCache,
+  TwoFactorAuthEmailComponentCacheService,
+} from "./two-factor-auth-email-component-cache.service";
+
+describe("TwoFactorAuthEmailComponentCache", () => {
+  describe("fromJSON", () => {
+    it("returns null when input is null", () => {
+      const result = TwoFactorAuthEmailComponentCache.fromJSON(null as any);
+      expect(result).toBeNull();
+    });
+
+    it("creates a TwoFactorAuthEmailCache instance from valid JSON", () => {
+      const jsonData = { emailSent: true };
+      const result = TwoFactorAuthEmailComponentCache.fromJSON(jsonData);
+
+      expect(result).not.toBeNull();
+      expect(result).toBeInstanceOf(TwoFactorAuthEmailComponentCache);
+      expect(result?.emailSent).toBe(true);
+    });
+  });
+});
+
+describe("TwoFactorAuthEmailComponentCacheService", () => {
+  let service: TwoFactorAuthEmailComponentCacheService;
+  let mockViewCacheService: MockProxy<ViewCacheService>;
+  let mockConfigService: MockProxy<ConfigService>;
+  let cacheData: BehaviorSubject<TwoFactorAuthEmailComponentCache | null>;
+  let mockSignal: any;
+
+  beforeEach(() => {
+    mockViewCacheService = mock<ViewCacheService>();
+    mockConfigService = mock<ConfigService>();
+    cacheData = new BehaviorSubject<TwoFactorAuthEmailComponentCache | null>(null);
+    mockSignal = jest.fn(() => cacheData.getValue());
+    mockSignal.set = jest.fn((value: TwoFactorAuthEmailComponentCache | null) =>
+      cacheData.next(value),
+    );
+    mockViewCacheService.signal.mockReturnValue(mockSignal);
+
+    TestBed.configureTestingModule({
+      providers: [
+        TwoFactorAuthEmailComponentCacheService,
+        { provide: ViewCacheService, useValue: mockViewCacheService },
+        { provide: ConfigService, useValue: mockConfigService },
+      ],
+    });
+
+    service = TestBed.inject(TwoFactorAuthEmailComponentCacheService);
+  });
+
+  it("creates the service", () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe("init", () => {
+    it("sets featureEnabled to true when flag is enabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+
+      await service.init();
+
+      expect(mockConfigService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+      );
+
+      service.cacheData({ emailSent: true });
+      expect(mockSignal.set).toHaveBeenCalled();
+    });
+
+    it("sets featureEnabled to false when flag is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+
+      await service.init();
+
+      expect(mockConfigService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+      );
+
+      service.cacheData({ emailSent: true });
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("cacheData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("caches email sent state when feature is enabled", () => {
+      service.cacheData({ emailSent: true });
+
+      expect(mockSignal.set).toHaveBeenCalledWith({
+        emailSent: true,
+      });
+    });
+
+    it("does not cache data when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      service.cacheData({ emailSent: true });
+
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("clearCachedData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("clears cached data when feature is enabled", () => {
+      service.clearCachedData();
+
+      expect(mockSignal.set).toHaveBeenCalledWith(null);
+    });
+
+    it("does not clear cached data when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      service.clearCachedData();
+
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("getCachedData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("returns cached data when feature is enabled", () => {
+      const testData = new TwoFactorAuthEmailComponentCache();
+      testData.emailSent = true;
+      cacheData.next(testData);
+
+      const result = service.getCachedData();
+
+      expect(result).toEqual(testData);
+      expect(mockSignal).toHaveBeenCalled();
+    });
+
+    it("returns null when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      const result = service.getCachedData();
+
+      expect(result).toBeNull();
+      expect(mockSignal).not.toHaveBeenCalled();
+    });
+  });
+});

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-email/two-factor-auth-email-component-cache.service.ts

@@ -0,0 +1,95 @@
+import { inject, Injectable, WritableSignal } from "@angular/core";
+import { Jsonify } from "type-fest";
+
+import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+/**
+ * The key for the email two factor auth component cache.
+ */
+export const TWO_FACTOR_AUTH_EMAIL_COMPONENT_CACHE_KEY = "two-factor-auth-email-component-cache";
+
+/**
+ * Cache model for the email two factor auth component.
+ */
+export class TwoFactorAuthEmailComponentCache {
+  emailSent: boolean = false;
+
+  static fromJSON(
+    obj: Partial<Jsonify<TwoFactorAuthEmailComponentCache>>,
+  ): TwoFactorAuthEmailComponentCache | null {
+    // Return null if the cache is empty
+    if (obj == null) {
+      return null;
+    }
+
+    return Object.assign(new TwoFactorAuthEmailComponentCache(), obj);
+  }
+}
+
+/**
+ * Cache service for the two factor auth email component.
+ */
+@Injectable()
+export class TwoFactorAuthEmailComponentCacheService {
+  private viewCacheService: ViewCacheService = inject(ViewCacheService);
+  private configService: ConfigService = inject(ConfigService);
+
+  /** True when the feature flag is enabled */
+  private featureEnabled: boolean = false;
+
+  /**
+   * Signal for the cached email state.
+   */
+  private emailCache: WritableSignal<TwoFactorAuthEmailComponentCache | null> =
+    this.viewCacheService.signal<TwoFactorAuthEmailComponentCache | null>({
+      key: TWO_FACTOR_AUTH_EMAIL_COMPONENT_CACHE_KEY,
+      initialValue: null,
+      deserializer: TwoFactorAuthEmailComponentCache.fromJSON,
+    });
+
+  /**
+   * Must be called once before interacting with the cached data.
+   */
+  async init() {
+    this.featureEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+    );
+  }
+
+  /**
+   * Cache the email sent state.
+   */
+  cacheData(data: { emailSent: boolean }): void {
+    if (!this.featureEnabled) {
+      return;
+    }
+
+    this.emailCache.set({
+      emailSent: data.emailSent,
+    } as TwoFactorAuthEmailComponentCache);
+  }
+
+  /**
+   * Clear the cached email data.
+   */
+  clearCachedData(): void {
+    if (!this.featureEnabled) {
+      return;
+    }
+
+    this.emailCache.set(null);
+  }
+
+  /**
+   * Get whether the email has been sent.
+   */
+  getCachedData(): TwoFactorAuthEmailComponentCache | null {
+    if (!this.featureEnabled) {
+      return null;
+    }
+
+    return this.emailCache();
+  }
+}

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

@@ -1,6 +1,13 @@
 <bit-form-field class="!tw-mb-0">
   <bit-label>{{ "verificationCode" | i18n }}</bit-label>
-  <input bitInput type="text" appAutofocus appInputVerbatim [formControl]="tokenFormControl" />
+  <input
+    bitInput
+    type="text"
+    appAutofocus
+    appInputVerbatim
+    [formControl]="tokenFormControl"
+    (keyup)="onTokenChange($event)"
+  />
 </bit-form-field>
 
 <div class="tw-mb-4">

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

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
 import { ReactiveFormsModule, FormsModule, FormControl } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -22,6 +22,7 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
+import { TwoFactorAuthEmailComponentCacheService } from "./two-factor-auth-email-component-cache.service";
 import { TwoFactorAuthEmailComponentService } from "./two-factor-auth-email-component.service";
 
 @Component({
@@ -40,14 +41,20 @@ import { TwoFactorAuthEmailComponentService } from "./two-factor-auth-email-comp
     AsyncActionsModule,
     FormsModule,
   ],
-  providers: [],
+  providers: [
+    {
+      provide: TwoFactorAuthEmailComponentCacheService,
+      useClass: TwoFactorAuthEmailComponentCacheService,
+    },
+  ],
 })
 export class TwoFactorAuthEmailComponent implements OnInit {
   @Input({ required: true }) tokenFormControl: FormControl | undefined = undefined;
+  @Output() tokenChange = new EventEmitter<{ token: string }>();
 
   twoFactorEmail: string | undefined = undefined;
-  emailPromise: Promise<any> | undefined = undefined;
-  tokenValue: string = "";
+  emailPromise: Promise<any> | undefined;
+  emailSent = false;
 
   constructor(
     protected i18nService: I18nService,
@@ -59,14 +66,22 @@ export class TwoFactorAuthEmailComponent implements OnInit {
     protected appIdService: AppIdService,
     private toastService: ToastService,
     private twoFactorAuthEmailComponentService: TwoFactorAuthEmailComponentService,
+    private cacheService: TwoFactorAuthEmailComponentCacheService,
   ) {}
 
   async ngOnInit(): Promise<void> {
     await this.twoFactorAuthEmailComponentService.openPopoutIfApprovedForEmail2fa?.();
+    await this.cacheService.init();
+
+    // Check if email was already sent
+    const cachedData = this.cacheService.getCachedData();
+    if (cachedData?.emailSent) {
+      this.emailSent = true;
+    }
 
     const providers = await this.twoFactorService.getProviders();
 
-    if (!providers) {
+    if (!providers || providers.size === 0) {
       throw new Error("User has no 2FA Providers");
     }
 
@@ -78,11 +93,20 @@ export class TwoFactorAuthEmailComponent implements OnInit {
 
     this.twoFactorEmail = email2faProviderData.Email;
 
-    if (providers.size > 1) {
+    if (!this.emailSent) {
       await this.sendEmail(false);
     }
   }
 
+  /**
+   * Emits the token value to the parent component
+   * @param event - The event object from the input field
+   */
+  onTokenChange(event: Event) {
+    const tokenValue = (event.target as HTMLInputElement).value || "";
+    this.tokenChange.emit({ token: tokenValue });
+  }
+
   async sendEmail(doToast: boolean) {
     if (this.emailPromise !== undefined) {
       return;
@@ -113,6 +137,10 @@ export class TwoFactorAuthEmailComponent implements OnInit {
       request.authRequestId = (await this.loginStrategyService.getAuthRequestId()) ?? "";
       this.emailPromise = this.apiService.postTwoFactorEmail(request);
       await this.emailPromise;
+
+      this.emailSent = true;
+      this.cacheService.cacheData({ emailSent: this.emailSent });
+
       if (doToast) {
         this.toastService.showToast({
           variant: "success",

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

@@ -0,0 +1,191 @@
+import { TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
+import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import {
+  TwoFactorAuthComponentCache,
+  TwoFactorAuthComponentCacheService,
+  TwoFactorAuthComponentData,
+} from "./two-factor-auth-component-cache.service";
+
+describe("TwoFactorAuthCache", () => {
+  describe("fromJSON", () => {
+    it("returns null when input is null", () => {
+      const result = TwoFactorAuthComponentCache.fromJSON(null as any);
+      expect(result).toBeNull();
+    });
+
+    it("creates a TwoFactorAuthCache instance from valid JSON", () => {
+      const jsonData = {
+        token: "123456",
+        remember: true,
+        selectedProviderType: TwoFactorProviderType.Email,
+      };
+      const result = TwoFactorAuthComponentCache.fromJSON(jsonData as any);
+
+      expect(result).not.toBeNull();
+      expect(result).toBeInstanceOf(TwoFactorAuthComponentCache);
+      expect(result?.token).toBe("123456");
+      expect(result?.remember).toBe(true);
+      expect(result?.selectedProviderType).toBe(TwoFactorProviderType.Email);
+    });
+  });
+});
+
+describe("TwoFactorAuthComponentCacheService", () => {
+  let service: TwoFactorAuthComponentCacheService;
+  let mockViewCacheService: MockProxy<ViewCacheService>;
+  let mockConfigService: MockProxy<ConfigService>;
+  let cacheData: BehaviorSubject<TwoFactorAuthComponentCache | null>;
+  let mockSignal: any;
+
+  beforeEach(() => {
+    mockViewCacheService = mock<ViewCacheService>();
+    mockConfigService = mock<ConfigService>();
+    cacheData = new BehaviorSubject<TwoFactorAuthComponentCache | null>(null);
+    mockSignal = jest.fn(() => cacheData.getValue());
+    mockSignal.set = jest.fn((value: TwoFactorAuthComponentCache | null) => cacheData.next(value));
+    mockViewCacheService.signal.mockReturnValue(mockSignal);
+
+    TestBed.configureTestingModule({
+      providers: [
+        TwoFactorAuthComponentCacheService,
+        { provide: ViewCacheService, useValue: mockViewCacheService },
+        { provide: ConfigService, useValue: mockConfigService },
+      ],
+    });
+
+    service = TestBed.inject(TwoFactorAuthComponentCacheService);
+  });
+
+  it("creates the service", () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe("init", () => {
+    it("sets featureEnabled to true when flag is enabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+
+      await service.init();
+
+      expect(mockConfigService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+      );
+
+      service.cacheData({ token: "123456" });
+      expect(mockSignal.set).toHaveBeenCalled();
+    });
+
+    it("sets featureEnabled to false when flag is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+
+      await service.init();
+
+      expect(mockConfigService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+      );
+
+      service.cacheData({ token: "123456" });
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("cacheData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("caches complete data when feature is enabled", () => {
+      const testData: TwoFactorAuthComponentData = {
+        token: "123456",
+        remember: true,
+        selectedProviderType: TwoFactorProviderType.Email,
+      };
+
+      service.cacheData(testData);
+
+      expect(mockSignal.set).toHaveBeenCalledWith({
+        token: "123456",
+        remember: true,
+        selectedProviderType: TwoFactorProviderType.Email,
+      });
+    });
+
+    it("caches partial data when feature is enabled", () => {
+      service.cacheData({ token: "123456" });
+
+      expect(mockSignal.set).toHaveBeenCalledWith({
+        token: "123456",
+        remember: undefined,
+        selectedProviderType: undefined,
+      });
+    });
+
+    it("does not cache data when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      service.cacheData({ token: "123456" });
+
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("clearCachedData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("clears cached data when feature is enabled", () => {
+      service.clearCachedData();
+
+      expect(mockSignal.set).toHaveBeenCalledWith(null);
+    });
+
+    it("does not clear cached data when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      service.clearCachedData();
+
+      expect(mockSignal.set).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("getCachedData", () => {
+    beforeEach(async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(true);
+      await service.init();
+    });
+
+    it("returns cached data when feature is enabled", () => {
+      const testData = new TwoFactorAuthComponentCache();
+      testData.token = "123456";
+      testData.remember = true;
+      testData.selectedProviderType = TwoFactorProviderType.Email;
+      cacheData.next(testData);
+
+      const result = service.getCachedData();
+
+      expect(result).toEqual(testData);
+      expect(mockSignal).toHaveBeenCalled();
+    });
+
+    it("returns null when feature is disabled", async () => {
+      mockConfigService.getFeatureFlag.mockResolvedValue(false);
+      await service.init();
+
+      const result = service.getCachedData();
+
+      expect(result).toBeNull();
+      expect(mockSignal).not.toHaveBeenCalled();
+    });
+  });
+});

libs/auth/src/angular/two-factor-auth/two-factor-auth-component-cache.service.ts

@@ -0,0 +1,105 @@
+import { inject, Injectable, WritableSignal } from "@angular/core";
+import { Jsonify } from "type-fest";
+
+import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
+import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+const TWO_FACTOR_AUTH_COMPONENT_CACHE_KEY = "two-factor-auth-component-cache";
+
+/**
+ * Cache model for the two factor authentication data.
+ */
+export class TwoFactorAuthComponentCache {
+  token: string | undefined = undefined;
+  remember: boolean | undefined = undefined;
+  selectedProviderType: TwoFactorProviderType | undefined = undefined;
+
+  static fromJSON(
+    obj: Partial<Jsonify<TwoFactorAuthComponentCache>>,
+  ): TwoFactorAuthComponentCache | null {
+    // Return null if the cache is empty
+    if (obj == null) {
+      return null;
+    }
+
+    return Object.assign(new TwoFactorAuthComponentCache(), obj);
+  }
+}
+
+export interface TwoFactorAuthComponentData {
+  token?: string;
+  remember?: boolean;
+  selectedProviderType?: TwoFactorProviderType;
+}
+
+/**
+ * Cache service used for the two factor auth component.
+ */
+@Injectable()
+export class TwoFactorAuthComponentCacheService {
+  private viewCacheService: ViewCacheService = inject(ViewCacheService);
+  private configService: ConfigService = inject(ConfigService);
+
+  /** True when the `PM9115_TwoFactorExtensionDataPersistence` flag is enabled */
+  private featureEnabled: boolean = false;
+
+  /**
+   * Signal for the cached TwoFactorAuthData.
+   */
+  private twoFactorAuthComponentCache: WritableSignal<TwoFactorAuthComponentCache | null> =
+    this.viewCacheService.signal<TwoFactorAuthComponentCache | null>({
+      key: TWO_FACTOR_AUTH_COMPONENT_CACHE_KEY,
+      initialValue: null,
+      deserializer: TwoFactorAuthComponentCache.fromJSON,
+    });
+
+  constructor() {}
+
+  /**
+   * Must be called once before interacting with the cached data.
+   */
+  async init() {
+    this.featureEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.PM9115_TwoFactorExtensionDataPersistence,
+    );
+  }
+
+  /**
+   * Update the cache with the new TwoFactorAuthData.
+   */
+  cacheData(data: TwoFactorAuthComponentData): void {
+    if (!this.featureEnabled) {
+      return;
+    }
+
+    this.twoFactorAuthComponentCache.set({
+      token: data.token,
+      remember: data.remember,
+      selectedProviderType: data.selectedProviderType,
+    } as TwoFactorAuthComponentCache);
+  }
+
+  /**
+   * Clears the cached TwoFactorAuthData.
+   */
+  clearCachedData(): void {
+    if (!this.featureEnabled) {
+      return;
+    }
+
+    this.twoFactorAuthComponentCache.set(null);
+  }
+
+  /**
+   * Returns the cached TwoFactorAuthData (when available).
+   */
+  getCachedData(): TwoFactorAuthComponentCache | null {
+    if (!this.featureEnabled) {
+      return null;
+    }
+
+    return this.twoFactorAuthComponentCache();
+  }
+}

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

@@ -13,11 +13,13 @@
   >
     <app-two-factor-auth-email
       [tokenFormControl]="tokenFormControl"
+      (tokenChange)="saveFormDataWithPartialData($event)"
       *ngIf="selectedProviderType === providerType.Email"
     />
 
     <app-two-factor-auth-authenticator
       [tokenFormControl]="tokenFormControl"
+      (tokenChange)="saveFormDataWithPartialData($event)"
       *ngIf="selectedProviderType === providerType.Authenticator"
     />
     <app-two-factor-auth-yubikey
@@ -36,7 +38,7 @@
     />
     <bit-form-control *ngIf="!hideRememberMe()">
       <bit-label>{{ "dontAskAgainOnThisDeviceFor30Days" | i18n }}</bit-label>
-      <input type="checkbox" bitCheckbox formControlName="remember" />
+      <input type="checkbox" bitCheckbox formControlName="remember" (change)="onRememberChange()" />
     </bit-form-control>
 
     <app-two-factor-auth-webauthn

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

@@ -1,8 +1,6 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Component } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { ActivatedRoute, convertToParamMap, Router } from "@angular/router";
+import { ActivatedRoute, Router, convertToParamMap } from "@angular/router";
 import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";
 
@@ -38,6 +36,7 @@ import { DialogService, ToastService } from "@bitwarden/components";
 
 import { AnonLayoutWrapperDataService } from "../anon-layout/anon-layout-wrapper-data.service";
 
+import { TwoFactorAuthComponentCacheService } from "./two-factor-auth-component-cache.service";
 import { TwoFactorAuthComponentService } from "./two-factor-auth-component.service";
 import { TwoFactorAuthComponent } from "./two-factor-auth.component";
 
@@ -72,6 +71,7 @@ describe("TwoFactorAuthComponent", () => {
   let anonLayoutWrapperDataService: MockProxy<AnonLayoutWrapperDataService>;
   let mockEnvService: MockProxy<EnvironmentService>;
   let mockLoginSuccessHandlerService: MockProxy<LoginSuccessHandlerService>;
+  let mockTwoFactorAuthCompCacheService: MockProxy<TwoFactorAuthComponentCacheService>;
 
   let mockUserDecryptionOpts: {
     noMasterPassword: UserDecryptionOptions;
@@ -112,6 +112,10 @@ describe("TwoFactorAuthComponent", () => {
 
     anonLayoutWrapperDataService = mock<AnonLayoutWrapperDataService>();
 
+    mockTwoFactorAuthCompCacheService = mock<TwoFactorAuthComponentCacheService>();
+    mockTwoFactorAuthCompCacheService.getCachedData.mockReturnValue(null);
+    mockTwoFactorAuthCompCacheService.init.mockResolvedValue();
+
     mockUserDecryptionOpts = {
       noMasterPassword: new UserDecryptionOptions({
         hasMasterPassword: false,
@@ -155,7 +159,9 @@ describe("TwoFactorAuthComponent", () => {
       }),
     };
 
-    selectedUserDecryptionOptions = new BehaviorSubject<UserDecryptionOptions>(undefined);
+    selectedUserDecryptionOptions = new BehaviorSubject<UserDecryptionOptions>(
+      mockUserDecryptionOpts.withMasterPassword,
+    );
     mockUserDecryptionOptionsService.userDecryptionOptions$ = selectedUserDecryptionOptions;
 
     TestBed.configureTestingModule({
@@ -194,6 +200,10 @@ describe("TwoFactorAuthComponent", () => {
         { provide: EnvironmentService, useValue: mockEnvService },
         { provide: AnonLayoutWrapperDataService, useValue: anonLayoutWrapperDataService },
         { provide: LoginSuccessHandlerService, useValue: mockLoginSuccessHandlerService },
+        {
+          provide: TwoFactorAuthComponentCacheService,
+          useValue: mockTwoFactorAuthCompCacheService,
+        },
       ],
     });
 

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

@@ -60,6 +60,10 @@ import { TwoFactorAuthDuoComponent } from "./child-components/two-factor-auth-du
 import { TwoFactorAuthEmailComponent } from "./child-components/two-factor-auth-email/two-factor-auth-email.component";
 import { TwoFactorAuthWebAuthnComponent } from "./child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component";
 import { TwoFactorAuthYubikeyComponent } from "./child-components/two-factor-auth-yubikey.component";
+import {
+  TwoFactorAuthComponentCacheService,
+  TwoFactorAuthComponentData,
+} from "./two-factor-auth-component-cache.service";
 import {
   DuoLaunchAction,
   LegacyKeyMigrationAction,
@@ -90,7 +94,11 @@ import {
     TwoFactorAuthYubikeyComponent,
     TwoFactorAuthWebAuthnComponent,
   ],
-  providers: [],
+  providers: [
+    {
+      provide: TwoFactorAuthComponentCacheService,
+    },
+  ],
 })
 export class TwoFactorAuthComponent implements OnInit, OnDestroy {
   @ViewChild("continueButton", { read: ElementRef, static: false }) continueButton:
@@ -160,6 +168,7 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
     private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
     private environmentService: EnvironmentService,
     private loginSuccessHandlerService: LoginSuccessHandlerService,
+    private twoFactorAuthComponentCacheService: TwoFactorAuthComponentCacheService,
   ) {}
 
   async ngOnInit() {
@@ -168,7 +177,33 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
 
     this.listenForAuthnSessionTimeout();
 
-    await this.setSelected2faProviderType();
+    // Initialize the cache
+    await this.twoFactorAuthComponentCacheService.init();
+
+    // Load cached form data if available
+    let loadedCachedProviderType = false;
+    const cachedData = this.twoFactorAuthComponentCacheService.getCachedData();
+    if (cachedData) {
+      if (cachedData.token) {
+        this.form.patchValue({ token: cachedData.token });
+      }
+      if (cachedData.remember !== undefined) {
+        this.form.patchValue({ remember: cachedData.remember });
+      }
+      if (cachedData.selectedProviderType !== undefined) {
+        this.selectedProviderType = cachedData.selectedProviderType;
+        loadedCachedProviderType = true;
+      }
+    }
+
+    // If we don't have a cached provider type, set it to the default and cache it
+    if (!loadedCachedProviderType) {
+      this.selectedProviderType = await this.initializeSelected2faProviderType();
+      this.twoFactorAuthComponentCacheService.cacheData({
+        selectedProviderType: this.selectedProviderType,
+      });
+    }
+
     await this.set2faProvidersAndData();
     await this.setAnonLayoutDataByTwoFactorProviderType();
 
@@ -181,7 +216,29 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
     this.loading = false;
   }
 
-  private async setSelected2faProviderType() {
+  /**
+   * Save specific form data fields to the cache
+   */
+  async saveFormDataWithPartialData(data: Partial<TwoFactorAuthComponentData>) {
+    // Get current cached data
+    const currentData = this.twoFactorAuthComponentCacheService.getCachedData();
+
+    this.twoFactorAuthComponentCacheService.cacheData({
+      token: data?.token ?? currentData?.token ?? "",
+      remember: data?.remember ?? currentData?.remember ?? false,
+      selectedProviderType: data?.selectedProviderType ?? currentData?.selectedProviderType,
+    });
+  }
+
+  /**
+   * Save the remember value to the cache when the checkbox is checked or unchecked
+   */
+  async onRememberChange() {
+    const rememberValue = !!this.rememberFormControl.value;
+    await this.saveFormDataWithPartialData({ remember: rememberValue });
+  }
+
+  private async initializeSelected2faProviderType(): Promise<TwoFactorProviderType> {
     const webAuthnSupported = this.platformUtilsService.supportsWebAuthn(this.win);
 
     if (
@@ -190,18 +247,19 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
     ) {
       const webAuthn2faResponse = this.activatedRoute.snapshot.paramMap.get("webAuthnResponse");
       if (webAuthn2faResponse) {
-        this.selectedProviderType = TwoFactorProviderType.WebAuthn;
-        return;
+        return TwoFactorProviderType.WebAuthn;
       }
     }
 
-    this.selectedProviderType = await this.twoFactorService.getDefaultProvider(webAuthnSupported);
+    return await this.twoFactorService.getDefaultProvider(webAuthnSupported);
   }
 
   private async set2faProvidersAndData() {
     this.twoFactorProviders = await this.twoFactorService.getProviders();
-    const providerData = this.twoFactorProviders?.get(this.selectedProviderType);
-    this.selectedProviderData = providerData;
+    if (this.selectedProviderType !== undefined) {
+      const providerData = this.twoFactorProviders?.get(this.selectedProviderType);
+      this.selectedProviderData = providerData;
+    }
   }
 
   private listenForAuthnSessionTimeout() {
@@ -267,6 +325,13 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
     // In all flows but WebAuthn, the remember value is taken from the form.
     const rememberValue = remember ?? this.rememberFormControl.value ?? false;
 
+    // Cache form data before submitting
+    this.twoFactorAuthComponentCacheService.cacheData({
+      token: tokenValue,
+      remember: rememberValue,
+      selectedProviderType: this.selectedProviderType,
+    });
+
     try {
       this.formPromise = this.loginStrategyService.logInTwoFactor(
         new TokenTwoFactorRequest(this.selectedProviderType, tokenValue, rememberValue),
@@ -274,6 +339,7 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
       );
       const authResult: AuthResult = await this.formPromise;
       this.logService.info("Successfully submitted two factor token");
+
       await this.handleAuthResult(authResult);
     } catch {
       this.logService.error("Error submitting two factor token");
@@ -299,6 +365,13 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
       this.selectedProviderType = response.type;
       await this.setAnonLayoutDataByTwoFactorProviderType();
 
+      // Update the cached provider type when a new one is chosen
+      this.twoFactorAuthComponentCacheService.cacheData({
+        token: "",
+        remember: false,
+        selectedProviderType: response.type,
+      });
+
       this.form.reset();
       this.form.updateValueAndValidity();
     }
@@ -376,6 +449,9 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
   }
 
   private async handleAuthResult(authResult: AuthResult) {
+    // Clear form cache
+    this.twoFactorAuthComponentCacheService.clearCachedData();
+
     if (await this.handleMigrateEncryptionKey(authResult)) {
       return; // stop login process
     }

libs/auth/src/common/services/auth-request/auth-request.service.spec.ts

@@ -123,7 +123,9 @@ describe("AuthRequestService", () => {
     });
 
     it("should use the user key if the master key and hash do not exist", async () => {
-      keyService.getUserKey.mockResolvedValueOnce({ key: new Uint8Array(64) } as UserKey);
+      keyService.getUserKey.mockResolvedValueOnce(
+        new SymmetricCryptoKey(new Uint8Array(64)) as UserKey,
+      );
 
       await sut.approveOrDenyAuthRequest(
         true,
@@ -131,7 +133,7 @@ describe("AuthRequestService", () => {
       );
 
       expect(encryptService.encapsulateKeyUnsigned).toHaveBeenCalledWith(
-        { key: new Uint8Array(64) },
+        new SymmetricCryptoKey(new Uint8Array(64)),
         expect.anything(),
       );
     });

libs/auth/src/common/services/pin/pin.service.spec.ts

@@ -434,7 +434,7 @@ describe("PinService", () => {
         .fn()
         .mockResolvedValue(pinKeyEncryptedUserKeyPersistant);
       sut.makePinKey = jest.fn().mockResolvedValue(mockPinKey);
-      encryptService.decryptToBytes.mockResolvedValue(mockUserKey.key);
+      encryptService.decryptToBytes.mockResolvedValue(mockUserKey.toEncoded());
     }
 
     function mockPinEncryptedKeyDataByPinLockType(pinLockType: PinLockType) {

libs/common/src/auth/services/webauthn-login/webauthn-login-prf-key.service.spec.ts

@@ -21,7 +21,7 @@ describe("WebAuthnLoginPrfKeyService", () => {
 
       const result = await service.createSymmetricKeyFromPrf(randomBytes(32));
 
-      expect(result.key.length).toBe(64);
+      expect(result.toEncoded().length).toBe(64);
     });
   });
 });

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

@@ -17,6 +17,7 @@ export enum FeatureFlag {
 
   /* Auth */
   PM9112_DeviceApprovalPersistence = "pm-9112-device-approval-persistence",
+  PM9115_TwoFactorExtensionDataPersistence = "pm-9115-two-factor-extension-data-persistence",
 
   /* Autofill */
   BlockBrowserInjectionsByDomain = "block-browser-injections-by-domain",
@@ -54,7 +55,6 @@ export enum FeatureFlag {
   PM9111ExtensionPersistAddEditForm = "pm-9111-extension-persist-add-edit-form",
   NewDeviceVerificationTemporaryDismiss = "new-device-temporary-dismiss",
   NewDeviceVerificationPermanentDismiss = "new-device-permanent-dismiss",
-  VaultBulkManagementAction = "vault-bulk-management-action",
   SecurityTasks = "security-tasks",
   CipherKeyEncryption = "cipher-key-encryption",
   PM18520_UpdateDesktopCipherForm = "pm-18520-desktop-cipher-forms",
@@ -108,7 +108,6 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM9111ExtensionPersistAddEditForm]: FALSE,
   [FeatureFlag.NewDeviceVerificationTemporaryDismiss]: FALSE,
   [FeatureFlag.NewDeviceVerificationPermanentDismiss]: FALSE,
-  [FeatureFlag.VaultBulkManagementAction]: FALSE,
   [FeatureFlag.SecurityTasks]: FALSE,
   [FeatureFlag.CipherKeyEncryption]: FALSE,
   [FeatureFlag.PM18520_UpdateDesktopCipherForm]: FALSE,
@@ -116,6 +115,7 @@ export const DefaultFeatureFlagValue = {
 
   /* Auth */
   [FeatureFlag.PM9112_DeviceApprovalPersistence]: FALSE,
+  [FeatureFlag.PM9115_TwoFactorExtensionDataPersistence]: FALSE,
 
   /* Billing */
   [FeatureFlag.TrialPaymentOptional]: FALSE,

libs/common/src/key-management/crypto/services/encrypt.service.implementation.ts

@@ -103,7 +103,7 @@ export class EncryptServiceImplementation implements EncryptService {
       throw new Error("No wrappingKey provided for wrapping.");
     }
 
-    return await this.encryptUint8Array(keyToBeWrapped.key, wrappingKey);
+    return await this.encryptUint8Array(keyToBeWrapped.toEncoded(), wrappingKey);
   }
 
   async unwrapDecapsulationKey(
@@ -166,7 +166,7 @@ export class EncryptServiceImplementation implements EncryptService {
     }
 
     if (this.blockType0) {
-      if (key.inner().type === EncryptionType.AesCbc256_B64 || key.key.byteLength < 64) {
+      if (key.inner().type === EncryptionType.AesCbc256_B64) {
         throw new Error("Type 0 encryption is not supported.");
       }
     }
@@ -196,7 +196,7 @@ export class EncryptServiceImplementation implements EncryptService {
     }
 
     if (this.blockType0) {
-      if (key.inner().type === EncryptionType.AesCbc256_B64 || key.key.byteLength < 64) {
+      if (key.inner().type === EncryptionType.AesCbc256_B64) {
         throw new Error("Type 0 encryption is not supported.");
       }
     }

libs/common/src/key-management/crypto/services/encrypt.service.spec.ts

@@ -58,10 +58,9 @@ describe("EncryptService", () => {
     it("fails if type 0 key is provided with flag turned on", async () => {
       (encryptService as any).blockType0 = true;
       const mock32Key = mock<SymmetricCryptoKey>();
-      mock32Key.key = makeStaticByteArray(32);
       mock32Key.inner.mockReturnValue({
         type: 0,
-        encryptionKey: mock32Key.key,
+        encryptionKey: makeStaticByteArray(32),
       });
 
       await expect(encryptService.wrapSymmetricKey(mock32Key, mock32Key)).rejects.toThrow(
@@ -99,10 +98,9 @@ describe("EncryptService", () => {
     it("throws if type 0 key is provided with flag turned on", async () => {
       (encryptService as any).blockType0 = true;
       const mock32Key = mock<SymmetricCryptoKey>();
-      mock32Key.key = makeStaticByteArray(32);
       mock32Key.inner.mockReturnValue({
         type: 0,
-        encryptionKey: mock32Key.key,
+        encryptionKey: makeStaticByteArray(32),
       });
 
       await expect(
@@ -140,10 +138,9 @@ describe("EncryptService", () => {
     it("throws if type 0 key is provided with flag turned on", async () => {
       (encryptService as any).blockType0 = true;
       const mock32Key = mock<SymmetricCryptoKey>();
-      mock32Key.key = makeStaticByteArray(32);
       mock32Key.inner.mockReturnValue({
         type: 0,
-        encryptionKey: mock32Key.key,
+        encryptionKey: makeStaticByteArray(32),
       });
 
       await expect(
@@ -187,10 +184,9 @@ describe("EncryptService", () => {
       (encryptService as any).blockType0 = true;
       const key = new SymmetricCryptoKey(makeStaticByteArray(32));
       const mock32Key = mock<SymmetricCryptoKey>();
-      mock32Key.key = makeStaticByteArray(32);
       mock32Key.inner.mockReturnValue({
         type: 0,
-        encryptionKey: mock32Key.key,
+        encryptionKey: makeStaticByteArray(32),
       });
 
       await expect(encryptService.encrypt(null!, key)).rejects.toThrow(
@@ -273,10 +269,9 @@ describe("EncryptService", () => {
       (encryptService as any).blockType0 = true;
       const key = new SymmetricCryptoKey(makeStaticByteArray(32));
       const mock32Key = mock<SymmetricCryptoKey>();
-      mock32Key.key = makeStaticByteArray(32);
       mock32Key.inner.mockReturnValue({
         type: 0,
-        encryptionKey: mock32Key.key,
+        encryptionKey: makeStaticByteArray(32),
       });
 
       await expect(encryptService.encryptToBytes(plainValue, key)).rejects.toThrow(
@@ -666,7 +661,7 @@ describe("EncryptService", () => {
         const actual = await encryptService.encapsulateKeyUnsigned(testKey, publicKey);
 
         expect(cryptoFunctionService.rsaEncrypt).toBeCalledWith(
-          expect.toEqualBuffer(testKey.key),
+          expect.toEqualBuffer(testKey.toEncoded()),
           expect.toEqualBuffer(publicKey),
           "sha1",
         );
@@ -717,7 +712,7 @@ describe("EncryptService", () => {
           "sha1",
         );
 
-        expect(actual.key).toEqualBuffer(data);
+        expect(actual.toEncoded()).toEqualBuffer(data);
       });
     });
   });

libs/common/src/key-management/device-trust/services/device-trust.service.implementation.ts

@@ -221,8 +221,8 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
           }
 
           const newEncryptedPublicKey = await this.encryptService.encrypt(publicKey, newUserKey);
-          const newEncryptedUserKey = await this.encryptService.rsaEncrypt(
-            newUserKey.key,
+          const newEncryptedUserKey = await this.encryptService.encapsulateKeyUnsigned(
+            newUserKey,
             publicKey,
           );
 

libs/common/src/key-management/device-trust/services/device-trust.service.spec.ts

@@ -450,7 +450,7 @@ describe("deviceTrustService", () => {
 
         // RsaEncrypt must be called w/ a user key array buffer of 64 bytes
         const userKey = cryptoSvcRsaEncryptSpy.mock.calls[0][0];
-        expect(userKey.key.byteLength).toBe(64);
+        expect(userKey.inner().type).toBe(EncryptionType.AesCbc256_HmacSha256_B64);
 
         expect(encryptServiceWrapDecapsulationKeySpy).toHaveBeenCalledTimes(1);
         expect(encryptServiceWrapEncapsulationKeySpy).toHaveBeenCalledTimes(1);
@@ -706,7 +706,9 @@ describe("deviceTrustService", () => {
         );
         encryptService.decryptToBytes.mockResolvedValue(null);
         encryptService.encrypt.mockResolvedValue(new EncString("test_encrypted_data"));
-        encryptService.rsaEncrypt.mockResolvedValue(new EncString("test_encrypted_data"));
+        encryptService.encapsulateKeyUnsigned.mockResolvedValue(
+          new EncString("test_encrypted_data"),
+        );
 
         const protectedDeviceResponse = new ProtectedDeviceResponse({
           id: "id",
@@ -861,8 +863,8 @@ describe("deviceTrustService", () => {
 
           // Mock the decryption of the public key with the old user key
           encryptService.decryptToBytes.mockImplementationOnce((_encValue, privateKeyValue) => {
-            expect(privateKeyValue.key.byteLength).toBe(64);
-            expect(new Uint8Array(privateKeyValue.key)[0]).toBe(FakeOldUserKeyMarker);
+            expect(privateKeyValue.inner().type).toBe(EncryptionType.AesCbc256_HmacSha256_B64);
+            expect(new Uint8Array(privateKeyValue.toEncoded())[0]).toBe(FakeOldUserKeyMarker);
             const data = new Uint8Array(250);
             data.fill(FakeDecryptedPublicKeyMarker, 0, 1);
             return Promise.resolve(data);
@@ -870,8 +872,8 @@ describe("deviceTrustService", () => {
 
           // Mock the encryption of the new user key with the decrypted public key
           encryptService.encapsulateKeyUnsigned.mockImplementationOnce((data, publicKey) => {
-            expect(data.key.byteLength).toBe(64); // New key should also be 64 bytes
-            expect(new Uint8Array(data.key)[0]).toBe(FakeNewUserKeyMarker); // New key should have the first byte be '1';
+            expect(data.inner().type).toBe(EncryptionType.AesCbc256_HmacSha256_B64); // New key should also be 64 bytes
+            expect(new Uint8Array(data.toEncoded())[0]).toBe(FakeNewUserKeyMarker); // New key should have the first byte be '1';
 
             expect(new Uint8Array(publicKey)[0]).toBe(FakeDecryptedPublicKeyMarker);
             return Promise.resolve(new EncString("4.ZW5jcnlwdGVkdXNlcg=="));
@@ -882,7 +884,7 @@ describe("deviceTrustService", () => {
             expect(plainValue).toBeInstanceOf(Uint8Array);
             expect(new Uint8Array(plainValue as Uint8Array)[0]).toBe(FakeDecryptedPublicKeyMarker);
 
-            expect(new Uint8Array(key.key)[0]).toBe(FakeNewUserKeyMarker);
+            expect(new Uint8Array(key.toEncoded())[0]).toBe(FakeNewUserKeyMarker);
             return Promise.resolve(
               new EncString("2.ZW5jcnlwdGVkcHVibGlj|ZW5jcnlwdGVkcHVibGlj|ZW5jcnlwdGVkcHVibGlj"),
             );

libs/common/src/platform/models/domain/symmetric-crypto-key.spec.ts

@@ -19,7 +19,6 @@ describe("SymmetricCryptoKey", () => {
       const cryptoKey = new SymmetricCryptoKey(key);
 
       expect(cryptoKey).toEqual({
-        key: key,
         keyB64: "AAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8=",
         innerKey: {
           type: EncryptionType.AesCbc256_B64,
@@ -33,7 +32,6 @@ describe("SymmetricCryptoKey", () => {
       const cryptoKey = new SymmetricCryptoKey(key);
 
       expect(cryptoKey).toEqual({
-        key: key,
         keyB64:
           "AAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+Pw==",
         innerKey: {

libs/common/src/platform/models/domain/symmetric-crypto-key.ts

@@ -24,7 +24,6 @@ export type Aes256CbcKey = {
 export class SymmetricCryptoKey {
   private innerKey: Aes256CbcHmacKey | Aes256CbcKey;
 
-  key: Uint8Array;
   keyB64: string;
 
   /**
@@ -40,7 +39,6 @@ export class SymmetricCryptoKey {
         type: EncryptionType.AesCbc256_B64,
         encryptionKey: key,
       };
-      this.key = key;
       this.keyB64 = this.toBase64();
     } else if (key.byteLength === 64) {
       this.innerKey = {
@@ -48,7 +46,6 @@ export class SymmetricCryptoKey {
         encryptionKey: key.slice(0, 32),
         authenticationKey: key.slice(32),
       };
-      this.key = key;
       this.keyB64 = this.toBase64();
     } else {
       throw new Error(`Unsupported encType/key length ${key.byteLength}`);

libs/common/src/platform/services/key-generation.service.spec.ts

@@ -4,6 +4,7 @@ import { PBKDF2KdfConfig, Argon2KdfConfig } from "@bitwarden/key-management";
 
 import { CryptoFunctionService } from "../../key-management/crypto/abstractions/crypto-function.service";
 import { CsprngArray } from "../../types/csprng";
+import { EncryptionType } from "../enums";
 
 import { KeyGenerationService } from "./key-generation.service";
 
@@ -52,7 +53,7 @@ describe("KeyGenerationService", () => {
 
         expect(salt).toEqual(inputSalt);
         expect(material).toEqual(inputMaterial);
-        expect(derivedKey.key.length).toEqual(64);
+        expect(derivedKey.inner().type).toEqual(EncryptionType.AesCbc256_HmacSha256_B64);
       },
     );
   });
@@ -67,7 +68,7 @@ describe("KeyGenerationService", () => {
 
       const key = await sut.deriveKeyFromMaterial(material, salt, purpose);
 
-      expect(key.key.length).toEqual(64);
+      expect(key.inner().type).toEqual(EncryptionType.AesCbc256_HmacSha256_B64);
     });
   });
 
@@ -81,7 +82,7 @@ describe("KeyGenerationService", () => {
 
       const key = await sut.deriveKeyFromPassword(password, salt, kdfConfig);
 
-      expect(key.key.length).toEqual(32);
+      expect(key.inner().type).toEqual(EncryptionType.AesCbc256_B64);
     });
 
     it("should derive a 32 byte key from a password using argon2id", async () => {
@@ -94,7 +95,7 @@ describe("KeyGenerationService", () => {
 
       const key = await sut.deriveKeyFromPassword(password, salt, kdfConfig);
 
-      expect(key.key.length).toEqual(32);
+      expect(key.inner().type).toEqual(EncryptionType.AesCbc256_B64);
     });
   });
 });

libs/common/src/platform/services/key-generation.service.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { MasterKey, PinKey } from "@bitwarden/common/types/key";
 import { KdfConfig, PBKDF2KdfConfig, Argon2KdfConfig, KdfType } from "@bitwarden/key-management";
 
 import { CryptoFunctionService } from "../../key-management/crypto/abstractions/crypto-function.service";
@@ -78,10 +79,21 @@ export class KeyGenerationService implements KeyGenerationServiceAbstraction {
     return new SymmetricCryptoKey(key);
   }
 
-  async stretchKey(key: SymmetricCryptoKey): Promise<SymmetricCryptoKey> {
+  async stretchKey(key: MasterKey | PinKey): Promise<SymmetricCryptoKey> {
     const newKey = new Uint8Array(64);
-    const encKey = await this.cryptoFunctionService.hkdfExpand(key.key, "enc", 32, "sha256");
-    const macKey = await this.cryptoFunctionService.hkdfExpand(key.key, "mac", 32, "sha256");
+    // Master key and pin key are always 32 bytes
+    const encKey = await this.cryptoFunctionService.hkdfExpand(
+      key.inner().encryptionKey,
+      "enc",
+      32,
+      "sha256",
+    );
+    const macKey = await this.cryptoFunctionService.hkdfExpand(
+      key.inner().encryptionKey,
+      "mac",
+      32,
+      "sha256",
+    );
 
     newKey.set(new Uint8Array(encKey));
     newKey.set(new Uint8Array(macKey), 32);

libs/common/src/vault/services/cipher.service.ts

@@ -124,12 +124,8 @@ export class CipherService implements CipherServiceAbstraction {
    * decryption is in progress. The latest decrypted ciphers will be emitted once decryption is complete.
    */
   cipherViews$ = perUserCache$((userId: UserId): Observable<CipherView[] | null> => {
-    return combineLatest([
-      this.encryptedCiphersState(userId).state$,
-      this.localData$(userId),
-      this.keyService.cipherDecryptionKeys$(userId, true),
-    ]).pipe(
-      filter(([ciphers, keys]) => ciphers != null && keys != null), // Skip if ciphers haven't been loaded yor synced yet
+    return combineLatest([this.encryptedCiphersState(userId).state$, this.localData$(userId)]).pipe(
+      filter(([ciphers]) => ciphers != null), // Skip if ciphers haven't been loaded yor synced yet
       switchMap(() => this.getAllDecrypted(userId)),
     );
   }, this.clearCipherViewsForUser$);

libs/components/src/button/button.component.ts

@@ -1,12 +1,10 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { NgClass } from "@angular/common";
-import { Input, HostBinding, Component, model, computed } from "@angular/core";
+import { Input, HostBinding, Component, model, computed, input } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
-import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
+import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
 
 const focusRing = [
   "focus-visible:tw-ring-2",
@@ -15,6 +13,11 @@ const focusRing = [
   "focus-visible:tw-z-10",
 ];
 
+const buttonSizeStyles: Record<ButtonSize, string[]> = {
+  small: ["tw-py-1", "tw-px-3", "tw-text-sm"],
+  default: ["tw-py-1.5", "tw-px-3"],
+};
+
 const buttonStyles: Record<ButtonType, string[]> = {
   primary: [
     "tw-border-primary-600",
@@ -59,8 +62,6 @@ export class ButtonComponent implements ButtonLikeAbstraction {
   @HostBinding("class") get classList() {
     return [
       "tw-font-semibold",
-      "tw-py-1.5",
-      "tw-px-3",
       "tw-rounded-full",
       "tw-transition",
       "tw-border-2",
@@ -85,7 +86,8 @@ export class ButtonComponent implements ButtonLikeAbstraction {
               "disabled:hover:tw-no-underline",
             ]
           : [],
-      );
+      )
+      .concat(buttonSizeStyles[this.size() || "default"]);
   }
 
   protected disabledAttr = computed(() => {
@@ -105,7 +107,9 @@ export class ButtonComponent implements ButtonLikeAbstraction {
     return this.showLoadingStyle() || (this.disabledAttr() && this.loading() === false);
   });
 
-  @Input() buttonType: ButtonType;
+  @Input() buttonType: ButtonType = "secondary";
+
+  size = input<ButtonSize>("default");
 
   private _block = false;
 

libs/components/src/button/button.stories.ts

@@ -9,6 +9,13 @@ export default {
     buttonType: "primary",
     disabled: false,
     loading: false,
+    size: "default",
+  },
+  argTypes: {
+    size: {
+      options: ["small", "default"],
+      control: { type: "radio" },
+    },
   },
   parameters: {
     design: {
@@ -24,19 +31,19 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-    <div class="tw-flex tw-gap-4 tw-mb-6">
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover">Button:hover</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-active">Button:active</button>
+    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
     </div>
-    <div class="tw-flex tw-gap-4">
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Anchor</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover">Anchor:hover</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-active">Anchor:active</a>
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
     </div>
     `,
   }),
@@ -59,6 +66,22 @@ export const Danger: Story = {
   },
 };
 
+export const Small: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
+    </div>
+    `,
+  }),
+  args: {
+    size: "small",
+  },
+};
+
 export const Loading: Story = {
   render: (args) => ({
     props: args,

libs/components/src/shared/button-like.abstraction.ts

@@ -4,6 +4,8 @@ import { ModelSignal } from "@angular/core";
 // @ts-strict-ignore
 export type ButtonType = "primary" | "secondary" | "danger" | "unstyled";
 
+export type ButtonSize = "default" | "small";
+
 export abstract class ButtonLikeAbstraction {
   loading: ModelSignal<boolean>;
   disabled: ModelSignal<boolean>;

libs/key-management/src/key.service.spec.ts

@@ -497,7 +497,7 @@ describe("keyService", () => {
       const output = new Uint8Array(64);
       output.set(encryptedPrivateKey.dataBytes);
       output.set(
-        key.key.subarray(0, 64 - encryptedPrivateKey.dataBytes.length),
+        key.toEncoded().subarray(0, 64 - encryptedPrivateKey.dataBytes.length),
         encryptedPrivateKey.dataBytes.length,
       );
       return output;
@@ -827,7 +827,7 @@ describe("keyService", () => {
         masterPasswordService.masterKeyHashSubject.next(storedMasterKeyHash);
 
         cryptoFunctionService.pbkdf2
-          .calledWith(masterKey.key, masterPassword as string, "sha256", 2)
+          .calledWith(masterKey.inner().encryptionKey, masterPassword as string, "sha256", 2)
           .mockResolvedValue(Utils.fromB64ToArray(mockReturnedHash));
 
         const actualDidMatch = await keyService.compareKeyHash(

libs/key-management/src/key.service.ts

@@ -26,7 +26,7 @@ import { KeyGenerationService } from "@bitwarden/common/platform/abstractions/ke
 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 { KeySuffixOptions, HashPurpose } from "@bitwarden/common/platform/enums";
+import { KeySuffixOptions, HashPurpose, EncryptionType } from "@bitwarden/common/platform/enums";
 import { convertValues } from "@bitwarden/common/platform/misc/convert-values";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EFFLongWordList } from "@bitwarden/common/platform/misc/wordlist";
@@ -346,7 +346,12 @@ export class DefaultKeyService implements KeyServiceAbstraction {
     }
 
     const iterations = hashPurpose === HashPurpose.LocalAuthorization ? 2 : 1;
-    const hash = await this.cryptoFunctionService.pbkdf2(key.key, password, "sha256", iterations);
+    const hash = await this.cryptoFunctionService.pbkdf2(
+      key.inner().encryptionKey,
+      password,
+      "sha256",
+      iterations,
+    );
     return Utils.fromBufferToB64(hash);
   }
 
@@ -823,13 +828,13 @@ export class DefaultKeyService implements KeyServiceAbstraction {
     newSymKey: SymmetricCryptoKey,
   ): Promise<[T, EncString]> {
     let protectedSymKey: EncString;
-    if (encryptionKey.key.byteLength === 32) {
+    if (encryptionKey.inner().type === EncryptionType.AesCbc256_B64) {
       const stretchedEncryptionKey = await this.keyGenerationService.stretchKey(encryptionKey);
       protectedSymKey = await this.encryptService.wrapSymmetricKey(
         newSymKey,
         stretchedEncryptionKey,
       );
-    } else if (encryptionKey.key.byteLength === 64) {
+    } else if (encryptionKey.inner().type === EncryptionType.AesCbc256_HmacSha256_B64) {
       protectedSymKey = await this.encryptService.wrapSymmetricKey(newSymKey, encryptionKey);
     } else {
       throw new Error("Invalid key size.");