merge main

2025-12-17 08:43:33 +00:00 · 2024-08-30 11:40:21 -07:00
parent a5fec368c6 95d04f264f
commit 669585a87f
615 changed files with 20276 additions and 5305 deletions
--- a/libs/angular/src/auth/components/base-login-decryption-options.component.ts
+++ b/libs/angular/src/auth/components/base-login-decryption-options.component.ts
@@ -39,6 +39,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";

 enum State {
  NewUser,
@@ -104,6 +105,7 @@ export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
    protected passwordResetEnrollmentService: PasswordResetEnrollmentServiceAbstraction,
    protected ssoLoginService: SsoLoginServiceAbstraction,
    protected accountService: AccountService,
+    protected toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -275,11 +277,11 @@ export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
      const keysRequest = new KeysRequest(publicKey, privateKey.encryptedString);
      await this.apiService.postAccountKeys(keysRequest);

-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("accountSuccessfullyCreated"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("accountSuccessfullyCreated"),
+      });

      await this.passwordResetEnrollmentService.enroll(this.data.organizationId);

--- a/libs/angular/src/auth/components/captcha-protected.component.ts
+++ b/libs/angular/src/auth/components/captcha-protected.component.ts
@@ -6,6 +6,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ToastService } from "@bitwarden/components";

@Directive()
 export abstract class CaptchaProtectedComponent {
@@ -17,6 +18,7 @@ export abstract class CaptchaProtectedComponent {
    protected environmentService: EnvironmentService,
    protected i18nService: I18nService,
    protected platformUtilsService: PlatformUtilsService,
+    protected toastService: ToastService,
  ) {}

  async setupCaptcha() {
@@ -31,10 +33,18 @@ export abstract class CaptchaProtectedComponent {
        this.captchaToken = token;
      },
      (error: string) => {
-        this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), error);
+        this.toastService.showToast({
+          variant: "error",
+          title: this.i18nService.t("errorOccurred"),
+          message: error,
+        });
      },
      (info: string) => {
-        this.platformUtilsService.showToast("info", this.i18nService.t("info"), info);
+        this.toastService.showToast({
+          variant: "info",
+          title: this.i18nService.t("info"),
+          message: info,
+        });
      },
    );
  }
--- a/libs/angular/src/auth/components/change-password.component.ts
+++ b/libs/angular/src/auth/components/change-password.component.ts
@@ -15,7 +15,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { UserKey, MasterKey } from "@bitwarden/common/types/key";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { PasswordColorText } from "../../tools/password-strength/password-strength.component";
@@ -49,6 +49,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
    protected kdfConfigService: KdfConfigService,
    protected masterPasswordService: InternalMasterPasswordServiceAbstraction,
    protected accountService: AccountService,
+    protected toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -127,27 +128,27 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {

  async strongPassword(): Promise<boolean> {
    if (this.masterPassword == null || this.masterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
      return false;
    }
    if (this.masterPassword.length < this.minimumLength) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordMinimumlength", this.minimumLength),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordMinimumlength", this.minimumLength),
+      });
      return false;
    }
    if (this.masterPassword !== this.masterPasswordRetype) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPassDoesntMatch"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPassDoesntMatch"),
+      });
      return false;
    }

@@ -161,11 +162,11 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
        this.enforcedPolicyOptions,
      )
    ) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
+      });
      return false;
    }

--- a/libs/angular/src/auth/components/environment.component.ts
+++ b/libs/angular/src/auth/components/environment.component.ts
@@ -7,6 +7,7 @@ import {
 } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

 import { ModalService } from "../../services/modal.service";

@@ -27,6 +28,7 @@ export class EnvironmentComponent {
    protected environmentService: EnvironmentService,
    protected i18nService: I18nService,
    private modalService: ModalService,
+    private toastService: ToastService,
  ) {
    this.environmentService.environment$.pipe(takeUntilDestroyed()).subscribe((env) => {
      if (env.getRegion() !== Region.SelfHosted) {
@@ -59,7 +61,11 @@ export class EnvironmentComponent {
      notifications: this.notificationsUrl,
    });

-    this.platformUtilsService.showToast("success", null, this.i18nService.t("environmentSaved"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("environmentSaved"),
+    });
    this.saved();
  }

--- a/libs/angular/src/auth/components/hint.component.ts
+++ b/libs/angular/src/auth/components/hint.component.ts
@@ -7,6 +7,7 @@ import { PasswordHintRequest } from "@bitwarden/common/auth/models/request/passw
 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 { ToastService } from "@bitwarden/components";

@Directive()
 export class HintComponent implements OnInit {
@@ -23,6 +24,7 @@ export class HintComponent implements OnInit {
    protected platformUtilsService: PlatformUtilsService,
    private logService: LogService,
    private loginEmailService: LoginEmailServiceAbstraction,
+    protected toastService: ToastService,
  ) {}

  ngOnInit(): void {
@@ -31,26 +33,30 @@ export class HintComponent implements OnInit {

  async submit() {
    if (this.email == null || this.email === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("emailRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("emailRequired"),
+      });
      return;
    }
    if (this.email.indexOf("@") === -1) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidEmail"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidEmail"),
+      });
      return;
    }

    try {
      this.formPromise = this.apiService.postPasswordHint(new PasswordHintRequest(this.email));
      await this.formPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("masterPassSent"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("masterPassSent"),
+      });
      if (this.onSuccessfulSubmit != null) {
        this.onSuccessfulSubmit();
      } else if (this.router != null) {
--- a/libs/angular/src/auth/components/lock.component.ts
+++ b/libs/angular/src/auth/components/lock.component.ts
@@ -30,12 +30,13 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { BiometricStateService } from "@bitwarden/common/platform/biometrics/biometric-state.service";
+import { BiometricsService } from "@bitwarden/common/platform/biometrics/biometric.service";
 import { KeySuffixOptions } from "@bitwarden/common/platform/enums";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { UserId } from "@bitwarden/common/types/guid";
 import { UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

@Directive()
 export class LockComponent implements OnInit, OnDestroy {
@@ -84,10 +85,12 @@ export class LockComponent implements OnInit, OnDestroy {
    protected userVerificationService: UserVerificationService,
    protected pinService: PinServiceAbstraction,
    protected biometricStateService: BiometricStateService,
+    protected biometricsService: BiometricsService,
    protected accountService: AccountService,
    protected authService: AuthService,
    protected kdfConfigService: KdfConfigService,
    protected syncService: SyncService,
+    protected toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -146,6 +149,13 @@ export class LockComponent implements OnInit, OnDestroy {
    return !!userKey;
  }

+  async isBiometricUnlockAvailable(): Promise<boolean> {
+    if (!(await this.biometricsService.supportsBiometric())) {
+      return false;
+    }
+    return this.biometricsService.isBiometricUnlockAvailable();
+  }
+
  togglePassword() {
    this.showPassword = !this.showPassword;
    const input = document.getElementById(this.pinEnabled ? "pin" : "masterPassword");
@@ -158,11 +168,11 @@ export class LockComponent implements OnInit, OnDestroy {

  private async handlePinRequiredUnlock() {
    if (this.pin == null || this.pin === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("pinRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("pinRequired"),
+      });
      return;
    }

@@ -186,36 +196,36 @@ export class LockComponent implements OnInit, OnDestroy {

      // Log user out if they have entered an invalid PIN too many times
      if (this.invalidPinAttempts >= MAX_INVALID_PIN_ENTRY_ATTEMPTS) {
-        this.platformUtilsService.showToast(
-          "error",
-          null,
-          this.i18nService.t("tooManyInvalidPinEntryAttemptsLoggingOut"),
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("tooManyInvalidPinEntryAttemptsLoggingOut"),
+        });
        this.messagingService.send("logout");
        return;
      }

-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidPin"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidPin"),
+      });
    } catch {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("unexpectedError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("unexpectedError"),
+      });
    }
  }

  private async handleMasterPasswordRequiredUnlock() {
    if (this.masterPassword == null || this.masterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
      return;
    }
    await this.doUnlockWithMasterPassword();
@@ -249,11 +259,11 @@ export class LockComponent implements OnInit, OnDestroy {
    }

    if (!passwordValid) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidMasterPassword"),
+      });
      return;
    }

@@ -327,7 +337,7 @@ export class LockComponent implements OnInit, OnDestroy {

    this.masterPasswordEnabled = await this.userVerificationService.hasMasterPassword();

-    this.supportsBiometric = await this.platformUtilsService.supportsBiometric();
+    this.supportsBiometric = await this.biometricsService.supportsBiometric();
    this.biometricLock =
      (await this.vaultTimeoutSettingsService.isBiometricLockSet()) &&
      ((await this.cryptoService.hasUserKeyStored(KeySuffixOptions.Biometric)) ||
--- a/libs/angular/src/auth/components/login-via-auth-request.component.ts
+++ b/libs/angular/src/auth/components/login-via-auth-request.component.ts
@@ -32,6 +32,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { CaptchaProtectedComponent } from "./captcha-protected.component";
@@ -88,8 +89,9 @@ export class LoginViaAuthRequestComponent
    private deviceTrustService: DeviceTrustServiceAbstraction,
    private authRequestService: AuthRequestServiceAbstraction,
    private loginStrategyService: LoginStrategyServiceAbstraction,
+    protected toastService: ToastService,
  ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);

    // TODO: I don't know why this is necessary.
    // Why would the existence of the email depend on the navigation?
@@ -105,7 +107,11 @@ export class LoginViaAuthRequestComponent
      .subscribe((id) => {
        // eslint-disable-next-line @typescript-eslint/no-floating-promises
        this.verifyAndHandleApprovedAuthReq(id).catch((e: Error) => {
-          this.platformUtilsService.showToast("error", this.i18nService.t("error"), e.message);
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("error"),
+            message: e.message,
+          });
          this.logService.error("Failed to use approved auth request: " + e.message);
        });
      });
@@ -135,7 +141,11 @@ export class LoginViaAuthRequestComponent
      const userId = (await firstValueFrom(this.accountService.activeAccount$)).id;

      if (!this.email) {
-        this.platformUtilsService.showToast("error", null, this.i18nService.t("userEmailMissing"));
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("userEmailMissing"),
+        });
        // 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(["/login-initiated"]);
@@ -158,7 +168,11 @@ export class LoginViaAuthRequestComponent
      this.email = this.loginEmailService.getEmail();

      if (!this.email) {
-        this.platformUtilsService.showToast("error", null, this.i18nService.t("userEmailMissing"));
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("userEmailMissing"),
+        });
        // 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(["/login"]);
@@ -402,7 +416,11 @@ export class LoginViaAuthRequestComponent
    // TODO: this should eventually be enforced via deleting this on the server once it is used
    await this.authRequestService.clearAdminAuthRequest(userId);

-    this.platformUtilsService.showToast("success", null, this.i18nService.t("loginApproved"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("loginApproved"),
+    });

    // Now that we have a decrypted user key in memory, we can check if we
    // need to establish trust on the current device
--- a/libs/angular/src/auth/components/login.component.ts
+++ b/libs/angular/src/auth/components/login.component.ts
@@ -23,6 +23,8 @@ 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 { Utils } from "@bitwarden/common/platform/misc/utils";
+import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import {
@@ -39,7 +41,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
  showPassword = false;
  formPromise: Promise<AuthResult>;
  onSuccessfulLogin: () => Promise<any>;
-  onSuccessfulLoginNavigate: () => Promise<any>;
+  onSuccessfulLoginNavigate: (userId: UserId) => Promise<any>;
  onSuccessfulLoginTwoFactorNavigate: () => Promise<any>;
  onSuccessfulLoginForceResetNavigate: () => Promise<any>;
  showLoginWithDevice: boolean;
@@ -91,8 +93,9 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
    protected ssoLoginService: SsoLoginServiceAbstraction,
    protected webAuthnLoginService: WebAuthnLoginServiceAbstraction,
    protected registerRouteService: RegisterRouteService,
+    protected toastService: ToastService,
  ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
  }

  async ngOnInit() {
@@ -136,7 +139,11 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
    //desktop, browser; This should be removed once all clients use reactive forms
    if (this.formGroup.invalid && showToast) {
      const errorText = this.getErrorToastMessage();
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), errorText);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: errorText,
+      });
      return;
    }

@@ -187,7 +194,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
        if (this.onSuccessfulLoginNavigate != 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.onSuccessfulLoginNavigate();
+          this.onSuccessfulLoginNavigate(response.userId);
        } else {
          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.
@@ -330,11 +337,11 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
      return false;
    }

-    this.platformUtilsService.showToast(
-      "error",
-      this.i18nService.t("errorOccured"),
-      this.i18nService.t("encryptionKeyMigrationRequired"),
-    );
+    this.toastService.showToast({
+      variant: "error",
+      title: this.i18nService.t("errorOccured"),
+      message: this.i18nService.t("encryptionKeyMigrationRequired"),
+    });
    return true;
  }

--- a/libs/angular/src/auth/components/register.component.ts
+++ b/libs/angular/src/auth/components/register.component.ts
@@ -17,7 +17,7 @@ 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 { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import {
@@ -97,8 +97,9 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
    protected logService: LogService,
    protected auditService: AuditService,
    protected dialogService: DialogService,
+    protected toastService: ToastService,
  ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
    this.showTerms = !platformUtilsService.isSelfHost();
    this.characterMinimumMessage = this.i18nService.t("characterMinimum", this.minimumLength);
  }
@@ -129,11 +130,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
      }
      if (this.isInTrialFlow) {
        if (!this.accountCreated) {
-          this.platformUtilsService.showToast(
-            "success",
-            null,
-            this.i18nService.t("trialAccountCreated"),
-          );
+          this.toastService.showToast({
+            variant: "success",
+            title: null,
+            message: this.i18nService.t("trialAccountCreated"),
+          });
        }
        const loginResponse = await this.logIn(email, masterPassword, this.captchaBypassToken);
        if (loginResponse.captchaRequired) {
@@ -141,11 +142,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
        }
        this.createdAccount.emit(this.formGroup.value.email);
      } else {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("newAccountCreated"),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("newAccountCreated"),
+        });
        // 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: { email: email } });
@@ -210,11 +211,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
    this.showErrorSummary = true;

    if (this.formGroup.get("acceptPolicies").hasError("required")) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("acceptPoliciesRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("acceptPoliciesRequired"),
+      });
      return { isValid: false };
    }

@@ -226,7 +227,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
    //desktop, browser
    if (this.formGroup.invalid && showToast) {
      const errorText = this.getErrorToastMessage();
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), errorText);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: errorText,
+      });
      return { isValid: false };
    }

--- a/libs/angular/src/auth/components/remove-password.component.ts
+++ b/libs/angular/src/auth/components/remove-password.component.ts
@@ -9,7 +9,7 @@ import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-con
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

@Directive()
 export class RemovePasswordComponent implements OnInit {
@@ -30,6 +30,7 @@ export class RemovePasswordComponent implements OnInit {
    private keyConnectorService: KeyConnectorService,
    private organizationApiService: OrganizationApiServiceAbstraction,
    private dialogService: DialogService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -47,17 +48,21 @@ export class RemovePasswordComponent implements OnInit {

    try {
      await this.actionPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("removedMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("removedMasterPassword"),
+      });
      await this.keyConnectorService.removeConvertAccountRequired();
      // 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([""]);
    } catch (e) {
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: e.message,
+      });
    }
  };

@@ -76,13 +81,21 @@ export class RemovePasswordComponent implements OnInit {
      this.leaving = true;
      this.actionPromise = this.organizationApiService.leave(this.organization.id);
      await this.actionPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("leftOrganization"),
+      });
      await this.keyConnectorService.removeConvertAccountRequired();
      // 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([""]);
    } catch (e) {
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: e,
+      });
    }
  };
 }
--- a/libs/angular/src/auth/components/set-password.component.ts
+++ b/libs/angular/src/auth/components/set-password.component.ts
@@ -32,7 +32,7 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { UserId } from "@bitwarden/common/types/guid";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
@@ -74,6 +74,7 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
    dialogService: DialogService,
    kdfConfigService: KdfConfigService,
    private encryptService: EncryptService,
+    protected toastService: ToastService,
  ) {
    super(
      i18nService,
@@ -87,6 +88,7 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
      kdfConfigService,
      masterPasswordService,
      accountService,
+      toastService,
    );
  }

@@ -137,7 +139,11 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
      )
      .subscribe({
        error: () => {
-          this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+          this.toastService.showToast({
+            variant: "error",
+            title: null,
+            message: this.i18nService.t("errorOccurred"),
+          });
        },
      });
  }
@@ -237,7 +243,11 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
        this.router.navigate([this.successRoute]);
      }
    } catch {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("errorOccurred"),
+      });
    }
  }

--- a/libs/angular/src/auth/components/sso.component.spec.ts
+++ b/libs/angular/src/auth/components/sso.component.spec.ts
@@ -28,6 +28,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { SsoComponent } from "./sso.component";
@@ -65,7 +66,7 @@ describe("SsoComponent", () => {

  let mockSsoLoginService: MockProxy<SsoLoginServiceAbstraction>;
  let mockStateService: MockProxy<StateService>;
-  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
+  let mockToastService: MockProxy<ToastService>;
  let mockApiService: MockProxy<ApiService>;
  let mockCryptoFunctionService: MockProxy<CryptoFunctionService>;
  let mockEnvironmentService: MockProxy<EnvironmentService>;
@@ -75,6 +76,7 @@ describe("SsoComponent", () => {
  let mockConfigService: MockProxy<ConfigService>;
  let mockMasterPasswordService: FakeMasterPasswordService;
  let mockAccountService: FakeAccountService;
+  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;

  // Mock authService.logIn params
  let code: string;
@@ -117,7 +119,7 @@ describe("SsoComponent", () => {

    mockSsoLoginService = mock();
    mockStateService = mock();
-    mockPlatformUtilsService = mock();
+    mockToastService = mock();
    mockApiService = mock();
    mockCryptoFunctionService = mock();
    mockEnvironmentService = mock();
@@ -127,6 +129,7 @@ describe("SsoComponent", () => {
    mockConfigService = mock();
    mockAccountService = mockAccountServiceWith(userId);
    mockMasterPasswordService = new FakeMasterPasswordService();
+    mockPlatformUtilsService = mock();

    // Mock loginStrategyService.logIn params
    code = "code";
@@ -196,7 +199,7 @@ describe("SsoComponent", () => {
        { provide: I18nService, useValue: mockI18nService },
        { provide: ActivatedRoute, useValue: mockActivatedRoute },
        { provide: StateService, useValue: mockStateService },
-        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
+        { provide: ToastService, useValue: mockToastService },

        { provide: ApiService, useValue: mockApiService },
        { provide: CryptoFunctionService, useValue: mockCryptoFunctionService },
@@ -214,6 +217,7 @@ describe("SsoComponent", () => {
        { provide: ConfigService, useValue: mockConfigService },
        { provide: InternalMasterPasswordServiceAbstraction, useValue: mockMasterPasswordService },
        { provide: AccountService, useValue: mockAccountService },
+        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
      ],
    });

@@ -594,12 +598,12 @@ describe("SsoComponent", () => {
      expect(mockLogService.error).toHaveBeenCalledTimes(1);
      expect(mockLogService.error).toHaveBeenCalledWith(error);

-      expect(mockPlatformUtilsService.showToast).toHaveBeenCalledTimes(1);
-      expect(mockPlatformUtilsService.showToast).toHaveBeenCalledWith(
-        "error",
-        null,
-        "ssoKeyConnectorError",
-      );
+      expect(mockToastService.showToast).toHaveBeenCalledTimes(1);
+      expect(mockToastService.showToast).toHaveBeenCalledWith({
+        variant: "error",
+        title: null,
+        message: "ssoKeyConnectorError",
+      });

      expect(mockRouter.navigate).not.toHaveBeenCalled();
    });
--- a/libs/angular/src/auth/components/sso.component.ts
+++ b/libs/angular/src/auth/components/sso.component.ts
@@ -26,6 +26,7 @@ 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 { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

@Directive()
@@ -71,6 +72,7 @@ export class SsoComponent implements OnInit {
    protected configService: ConfigService,
    protected masterPasswordService: InternalMasterPasswordServiceAbstraction,
    protected accountService: AccountService,
+    protected toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -111,11 +113,11 @@ export class SsoComponent implements OnInit {

  async submit(returnUri?: string, includeUserIdentifier?: boolean) {
    if (this.identifier == null || this.identifier === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("ssoValidationFailed"),
-        this.i18nService.t("ssoIdentifierRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("ssoValidationFailed"),
+        message: this.i18nService.t("ssoIdentifierRequired"),
+      });
      return;
    }

@@ -382,11 +384,11 @@ export class SsoComponent implements OnInit {

    // TODO: Key Connector Service should pass this error message to the logout callback instead of displaying here
    if (e.message === "Key Connector error") {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("ssoKeyConnectorError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("ssoKeyConnectorError"),
+      });
    }
  }

--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts
@@ -20,6 +20,7 @@ import {
  TypographyModule,
  FormFieldModule,
  AsyncActionsModule,
+  ToastService,
 } from "@bitwarden/components";

@Component({
@@ -55,6 +56,7 @@ export class TwoFactorAuthEmailComponent implements OnInit {
    protected logService: LogService,
    protected apiService: ApiService,
    protected appIdService: AppIdService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit(): Promise<void> {
@@ -74,11 +76,11 @@ export class TwoFactorAuthEmailComponent implements OnInit {
    }

    if ((await this.loginStrategyService.getEmail()) == null) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("sessionTimeout"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("sessionTimeout"),
+      });
      return;
    }

@@ -94,11 +96,11 @@ export class TwoFactorAuthEmailComponent implements OnInit {
      this.emailPromise = this.apiService.postTwoFactorEmail(request);
      await this.emailPromise;
      if (doToast) {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
+        });
      }
    } catch (e) {
      this.logService.error(e);
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts
@@ -21,6 +21,7 @@ import {
  TypographyModule,
  FormFieldModule,
  AsyncActionsModule,
+  ToastService,
 } from "@bitwarden/components";

@Component({
@@ -56,6 +57,7 @@ export class TwoFactorAuthWebAuthnComponent implements OnInit, OnDestroy {
    protected environmentService: EnvironmentService,
    protected twoFactorService: TwoFactorService,
    protected route: ActivatedRoute,
+    private toastService: ToastService,
  ) {
    this.webAuthnSupported = this.platformUtilsService.supportsWebAuthn(win);

@@ -85,11 +87,11 @@ export class TwoFactorAuthWebAuthnComponent implements OnInit, OnDestroy {
          this.token.emit(token);
        },
        (error: string) => {
-          this.platformUtilsService.showToast(
-            "error",
-            this.i18nService.t("errorOccurred"),
-            this.i18nService.t("webauthnCancelOrTimeout"),
-          );
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("errorOccurred"),
+            message: this.i18nService.t("webauthnCancelOrTimeout"),
+          });
        },
        (info: string) => {
          if (info === "ready") {
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html
@@ -1,79 +1,76 @@
 <form [bitSubmit]="submitForm" [formGroup]="formGroup" autocomplete="off">
-  <div class="tw-min-w-96">
-    <app-two-factor-auth-email
-      (token)="token = $event"
-      *ngIf="selectedProviderType === providerType.Email"
-    />
-    <app-two-factor-auth-authenticator
-      (token)="token = $event"
-      *ngIf="selectedProviderType === providerType.Authenticator"
-    />
-    <app-two-factor-auth-yubikey
-      (token)="token = $event"
-      *ngIf="selectedProviderType === providerType.Yubikey"
-    />
-    <app-two-factor-auth-webauthn
-      (token)="token = $event; submitForm()"
-      *ngIf="selectedProviderType === providerType.WebAuthn"
-    />
-    <app-two-factor-auth-duo
-      (token)="token = $event; submitForm()"
-      [providerData]="providerData"
+  <app-two-factor-auth-email
+    (token)="token = $event"
+    *ngIf="selectedProviderType === providerType.Email"
+  />
+  <app-two-factor-auth-authenticator
+    (token)="token = $event"
+    *ngIf="selectedProviderType === providerType.Authenticator"
+  />
+  <app-two-factor-auth-yubikey
+    (token)="token = $event"
+    *ngIf="selectedProviderType === providerType.Yubikey"
+  />
+  <app-two-factor-auth-webauthn
+    (token)="token = $event; submitForm()"
+    *ngIf="selectedProviderType === providerType.WebAuthn"
+  />
+  <app-two-factor-auth-duo
+    (token)="token = $event; submitForm()"
+    [providerData]="providerData"
+    *ngIf="
+      selectedProviderType === providerType.OrganizationDuo ||
+      selectedProviderType === providerType.Duo
+    "
+    #duoComponent
+  />
+  <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>
+  <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 === providerType.OrganizationDuo ||
-        selectedProviderType === providerType.Duo
+        selectedProviderType != null &&
+        selectedProviderType !== providerType.WebAuthn &&
+        selectedProviderType !== providerType.Duo &&
+        selectedProviderType !== providerType.OrganizationDuo
      "
-      #duoComponent
-    />
-    <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 &&
-          selectedProviderType !== providerType.WebAuthn &&
-          selectedProviderType !== providerType.Duo &&
-          selectedProviderType !== providerType.OrganizationDuo
-        "
-      >
-        <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ actionButtonText }} </span>
-      </button>
-      <button
-        type="button"
-        buttonType="primary"
-        bitButton
-        (click)="launchDuo()"
-        *ngIf="
-          selectedProviderType === providerType.Duo ||
-          selectedProviderType === providerType.OrganizationDuo
-        "
-      >
-        <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "launchDuo" | i18n }}</span>
-      </button>
+    >
+      <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ actionButtonText }} </span>
+    </button>
+    <button
+      type="button"
+      buttonType="primary"
+      bitButton
+      (click)="launchDuo()"
+      *ngIf="
+        selectedProviderType === providerType.Duo ||
+        selectedProviderType === providerType.OrganizationDuo
+      "
+    >
+      <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "launchDuo" | i18n }}</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>
+    <a routerLink="/login" bitButton buttonType="secondary">
+      {{ "cancel" | i18n }}
+    </a>
+  </div>
+  <div class="text-center">
+    <a bitLink href="#" appStopClick (click)="selectOtherTwofactorMethod()">{{
+      "useAnotherTwoStepMethod" | i18n
+    }}</a>
  </div>
 </form>
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts
@@ -35,7 +35,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 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 { DialogService, ToastService } from "@bitwarden/components";

 import { TwoFactorAuthComponent } from "./two-factor-auth.component";

@@ -76,6 +76,7 @@ describe("TwoFactorComponent", () => {
  let mockMasterPasswordService: FakeMasterPasswordService;
  let mockAccountService: FakeAccountService;
  let mockDialogService: MockProxy<DialogService>;
+  let mockToastService: MockProxy<ToastService>;

  let mockUserDecryptionOpts: {
    noMasterPassword: UserDecryptionOptions;
@@ -113,6 +114,7 @@ describe("TwoFactorComponent", () => {
    mockAccountService = mockAccountServiceWith(userId);
    mockMasterPasswordService = new FakeMasterPasswordService();
    mockDialogService = mock<DialogService>();
+    mockToastService = mock<ToastService>();

    mockUserDecryptionOpts = {
      noMasterPassword: new UserDecryptionOptions({
@@ -193,6 +195,7 @@ describe("TwoFactorComponent", () => {
        { provide: InternalMasterPasswordServiceAbstraction, useValue: mockMasterPasswordService },
        { provide: AccountService, useValue: mockAccountService },
        { provide: DialogService, useValue: mockDialogService },
+        { provide: ToastService, useValue: mockToastService },
      ],
    });

--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
@@ -34,6 +34,7 @@ import {
  ButtonModule,
  DialogService,
  FormFieldModule,
+  ToastService,
 } from "@bitwarden/components";

 import { CaptchaProtectedComponent } from "../captcha-protected.component";
@@ -142,8 +143,9 @@ export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements
    private accountService: AccountService,
    private formBuilder: FormBuilder,
    @Inject(WINDOW) protected win: Window,
+    protected toastService: ToastService,
  ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
  }

  async ngOnInit() {
@@ -184,11 +186,11 @@ export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements
    await this.setupCaptcha();

    if (this.token == null || this.token === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("verificationCodeRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("verificationCodeRequired"),
+      });
      return;
    }

@@ -202,11 +204,11 @@ export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements
      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"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidVerificationCode"),
+      });
    }
  }

--- a/libs/angular/src/auth/components/two-factor.component.ts
+++ b/libs/angular/src/auth/components/two-factor.component.ts
@@ -97,7 +97,7 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
    protected accountService: AccountService,
    protected toastService: ToastService,
  ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
    this.webAuthnSupported = this.platformUtilsService.supportsWebAuthn(win);
  }

@@ -135,7 +135,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
          this.submit();
        },
        (error: string) => {
-          this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), error);
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("errorOccurred"),
+            message: error,
+          });
        },
        (info: string) => {
          if (info === "ready") {
@@ -201,11 +205,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
    await this.setupCaptcha();

    if (this.token == null || this.token === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("verificationCodeRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("verificationCodeRequired"),
+      });
      return;
    }

@@ -243,11 +247,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
      return false;
    }

-    this.platformUtilsService.showToast(
-      "error",
-      this.i18nService.t("errorOccured"),
-      this.i18nService.t("encryptionKeyMigrationRequired"),
-    );
+    this.toastService.showToast({
+      variant: "error",
+      title: this.i18nService.t("errorOccured"),
+      message: this.i18nService.t("encryptionKeyMigrationRequired"),
+    });
    return true;
  }

@@ -414,11 +418,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
    }

    if ((await this.loginStrategyService.getEmail()) == null) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("sessionTimeout"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("sessionTimeout"),
+      });
      return;
    }

@@ -434,11 +438,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
      this.emailPromise = this.apiService.postTwoFactorEmail(request);
      await this.emailPromise;
      if (doToast) {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
+        });
      }
    } catch (e) {
      this.logService.error(e);
--- a/libs/angular/src/auth/components/update-password.component.ts
+++ b/libs/angular/src/auth/components/update-password.component.ts
@@ -19,7 +19,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
@@ -50,6 +50,7 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
    kdfConfigService: KdfConfigService,
    masterPasswordService: InternalMasterPasswordServiceAbstraction,
    accountService: AccountService,
+    toastService: ToastService,
  ) {
    super(
      i18nService,
@@ -63,6 +64,7 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
      kdfConfigService,
      masterPasswordService,
      accountService,
+      toastService,
    );
  }

@@ -77,11 +79,11 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {

  async setupSubmitActions(): Promise<boolean> {
    if (this.currentMasterPassword == null || this.currentMasterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
      return false;
    }

@@ -92,7 +94,11 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
    try {
      await this.userVerificationService.verifyUser(secret);
    } catch (e) {
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: e.message,
+      });
      return false;
    }

@@ -120,11 +126,11 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      this.apiService.postPassword(request);

-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("masterPasswordChanged"),
-        this.i18nService.t("logBackIn"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("masterPasswordChanged"),
+        message: this.i18nService.t("logBackIn"),
+      });

      if (this.onSuccessfulChangePassword != null) {
        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
--- a/libs/angular/src/auth/components/update-temp-password.component.ts
+++ b/libs/angular/src/auth/components/update-temp-password.component.ts
@@ -24,7 +24,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
@@ -64,6 +64,7 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent imp
    kdfConfigService: KdfConfigService,
    accountService: AccountService,
    masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    toastService: ToastService,
  ) {
    super(
      i18nService,
@@ -77,6 +78,7 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent imp
      kdfConfigService,
      masterPasswordService,
      accountService,
+      toastService,
    );
  }

@@ -176,11 +178,11 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent imp
      }

      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("updatedMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("updatedMasterPassword"),
+      });

      const userId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
      await this.masterPasswordService.setForceSetPasswordReason(
--- a/libs/angular/src/auth/components/user-verification-prompt.component.ts
+++ b/libs/angular/src/auth/components/user-verification-prompt.component.ts
@@ -5,6 +5,7 @@ import { UserVerificationService } from "@bitwarden/common/auth/abstractions/use
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

 import { ModalRef } from "../../components/modal/modal.ref";

@@ -37,6 +38,7 @@ export class UserVerificationPromptComponent {
    private formBuilder: FormBuilder,
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
+    private toastService: ToastService,
  ) {}

  get secret() {
@@ -56,7 +58,11 @@ export class UserVerificationPromptComponent {
      this.invalidSecret = false;
    } catch (e) {
      this.invalidSecret = true;
-      this.platformUtilsService.showToast("error", this.i18nService.t("error"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("error"),
+        message: e.message,
+      });
      return;
    }