refactor(set-change-password): [Auth/PM-18458] Create new ChangePasswordComponent (#14226)

This PR creates a new ChangePasswordComponent. The first use-case of the ChangePasswordComponent is to place it inside a new PasswordSettingsComponent, which is accessed by going to Account Settings > Security. The ChangePasswordComponent will be updated in future PRs to handle more change password scenarios. Feature Flags: PM16117_ChangeExistingPasswordRefactor
2025-12-18 17:23:37 +00:00 · 2025-05-16 10:41:46 -07:00
parent d16a5cb73e
commit afbddeaf86
37 changed files with 1349 additions and 310 deletions
--- a/libs/auth/src/angular/input-password/input-password.component.html
+++ b/libs/auth/src/angular/input-password/input-password.component.html
@@ -6,8 +6,8 @@

  <bit-form-field
    *ngIf="
-      inputPasswordFlow === InputPasswordFlow.ChangePassword ||
-      inputPasswordFlow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
+      flow === InputPasswordFlow.ChangePassword ||
+      flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
    "
  >
    <bit-label>{{ "currentMasterPass" | i18n }}</bit-label>
@@ -58,12 +58,12 @@
  </div>

  <bit-form-field>
-    <bit-label>{{ "confirmMasterPassword" | i18n }}</bit-label>
+    <bit-label>{{ "confirmNewMasterPass" | i18n }}</bit-label>
    <input
-      id="input-password-form_confirm-new-password"
+      id="input-password-form_new-password-confirm"
      bitInput
      type="password"
-      formControlName="confirmNewPassword"
+      formControlName="newPasswordConfirm"
    />
    <button
      type="button"
@@ -76,21 +76,33 @@

  <bit-form-field>
    <bit-label>{{ "masterPassHintLabel" | i18n }}</bit-label>
-    <input bitInput formControlName="hint" />
+    <input id="input-password-form_new-password-hint" bitInput formControlName="newPasswordHint" />
    <bit-hint>
-      {{ "masterPassHintText" | i18n: formGroup.value.hint.length : maxHintLength.toString() }}
+      {{
+        "masterPassHintText"
+          | i18n: formGroup.value.newPasswordHint.length : maxHintLength.toString()
+      }}
    </bit-hint>
  </bit-form-field>

  <bit-form-control>
-    <input type="checkbox" bitCheckbox formControlName="checkForBreaches" />
+    <input
+      id="input-password-form_check-for-breaches"
+      type="checkbox"
+      bitCheckbox
+      formControlName="checkForBreaches"
+    />
    <bit-label>{{ "checkForBreaches" | i18n }}</bit-label>
  </bit-form-control>

-  <bit-form-control
-    *ngIf="inputPasswordFlow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation"
-  >
-    <input type="checkbox" bitCheckbox formControlName="rotateUserKey" />
+  <bit-form-control *ngIf="flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation">
+    <input
+      id="input-password-form_rotate-user-key"
+      type="checkbox"
+      bitCheckbox
+      formControlName="rotateUserKey"
+      (change)="rotateUserKeyClicked()"
+    />
    <bit-label>
      {{ "rotateAccountEncKey" | i18n }}
      <a
--- a/libs/auth/src/angular/input-password/input-password.component.ts
+++ b/libs/auth/src/angular/input-password/input-password.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from "@angular/forms";
+import { ReactiveFormsModule, FormBuilder, Validators, FormControl } from "@angular/forms";
+import { firstValueFrom } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
@@ -9,9 +10,13 @@ import {
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
+import { MasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { HashPurpose } from "@bitwarden/common/platform/enums";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import {
  AsyncActionsModule,
  ButtonModule,
@@ -23,7 +28,12 @@ import {
  ToastService,
  Translation,
 } from "@bitwarden/components";
-import { DEFAULT_KDF_CONFIG, KeyService } from "@bitwarden/key-management";
+import {
+  DEFAULT_KDF_CONFIG,
+  KdfConfig,
+  KdfConfigService,
+  KeyService,
+} from "@bitwarden/key-management";

 // FIXME: remove `src` and fix import
 // eslint-disable-next-line no-restricted-imports
@@ -34,30 +44,41 @@ import { compareInputs, ValidationGoal } from "../validators/compare-inputs.vali
 import { PasswordInputResult } from "./password-input-result";

 /**
- * Determines which form input elements will be displayed in the UI.
+ * Determines which form elements will be displayed in the UI
+ * and which cryptographic keys will be created and emitted.
 */
 // FIXME: update to use a const object instead of a typescript enum
 // eslint-disable-next-line @bitwarden/platform/no-enums
 export enum InputPasswordFlow {
  /**
-   * - Input: New password
-   * - Input: Confirm new password
-   * - Input: Hint
-   * - Checkbox: Check for breaches
+   * Form elements displayed:
+   * - [Input] New password
+   * - [Input] New password confirm
+   * - [Input] New password hint
+   * - [Checkbox] Check for breaches
   */
-  SetInitialPassword,
-  /**
-   * Everything above, plus:
-   * - Input: Current password (as the first element in the UI)
+  AccountRegistration, // important: this flow does not involve an activeAccount/userId
+  SetInitialPasswordAuthedUser,
+  /*
+   * All form elements above, plus: [Input] Current password (as the first element in the UI)
   */
  ChangePassword,
  /**
-   * Everything above, plus:
-   * - Checkbox: Rotate account encryption key (as the last element in the UI)
+   * All form elements above, plus: [Checkbox] Rotate account encryption key (as the last element in the UI)
   */
  ChangePasswordWithOptionalUserKeyRotation,
 }

+interface InputPasswordForm {
+  newPassword: FormControl<string>;
+  newPasswordConfirm: FormControl<string>;
+  newPasswordHint: FormControl<string>;
+  checkForBreaches: FormControl<boolean>;
+
+  currentPassword?: FormControl<string>;
+  rotateUserKey?: FormControl<boolean>;
+}
+
@Component({
  standalone: true,
  selector: "auth-input-password",
@@ -80,9 +101,10 @@ export class InputPasswordComponent implements OnInit {
  @Output() onPasswordFormSubmit = new EventEmitter<PasswordInputResult>();
  @Output() onSecondaryButtonClick = new EventEmitter<void>();

-  @Input({ required: true }) inputPasswordFlow!: InputPasswordFlow;
-  @Input({ required: true }) email!: string;
+  @Input({ required: true }) flow!: InputPasswordFlow;
+  @Input({ required: true, transform: (val: string) => val.trim().toLowerCase() }) email!: string;

+  @Input() userId?: UserId;
  @Input() loading = false;
  @Input() masterPasswordPolicyOptions: MasterPasswordPolicyOptions | null = null;

@@ -93,6 +115,7 @@ export class InputPasswordComponent implements OnInit {
  protected secondaryButtonTextStr: string = "";

  protected InputPasswordFlow = InputPasswordFlow;
+  private kdfConfig: KdfConfig | null = null;
  private minHintLength = 0;
  protected maxHintLength = 50;
  protected minPasswordLength = Utils.minimumPasswordLength;
@@ -101,64 +124,93 @@ export class InputPasswordComponent implements OnInit {
  protected showErrorSummary = false;
  protected showPassword = false;

-  protected formGroup = this.formBuilder.nonNullable.group(
+  protected formGroup = this.formBuilder.nonNullable.group<InputPasswordForm>(
    {
-      newPassword: ["", [Validators.required, Validators.minLength(this.minPasswordLength)]],
-      confirmNewPassword: ["", Validators.required],
-      hint: [
-        "", // must be string (not null) because we check length in validation
-        [Validators.minLength(this.minHintLength), Validators.maxLength(this.maxHintLength)],
-      ],
-      checkForBreaches: [true],
+      newPassword: this.formBuilder.nonNullable.control("", [
+        Validators.required,
+        Validators.minLength(this.minPasswordLength),
+      ]),
+      newPasswordConfirm: this.formBuilder.nonNullable.control("", Validators.required),
+      newPasswordHint: this.formBuilder.nonNullable.control("", [
+        Validators.minLength(this.minHintLength),
+        Validators.maxLength(this.maxHintLength),
+      ]),
+      checkForBreaches: this.formBuilder.nonNullable.control(true),
    },
    {
      validators: [
        compareInputs(
          ValidationGoal.InputsShouldMatch,
          "newPassword",
-          "confirmNewPassword",
+          "newPasswordConfirm",
          this.i18nService.t("masterPassDoesntMatch"),
        ),
        compareInputs(
          ValidationGoal.InputsShouldNotMatch,
          "newPassword",
-          "hint",
+          "newPasswordHint",
          this.i18nService.t("hintEqualsPassword"),
        ),
      ],
    },
  );

+  protected get minPasswordLengthMsg() {
+    if (
+      this.masterPasswordPolicyOptions != null &&
+      this.masterPasswordPolicyOptions.minLength > 0
+    ) {
+      return this.i18nService.t("characterMinimum", this.masterPasswordPolicyOptions.minLength);
+    } else {
+      return this.i18nService.t("characterMinimum", this.minPasswordLength);
+    }
+  }
+
  constructor(
    private auditService: AuditService,
-    private keyService: KeyService,
+    private cipherService: CipherService,
    private dialogService: DialogService,
    private formBuilder: FormBuilder,
    private i18nService: I18nService,
+    private kdfConfigService: KdfConfigService,
+    private keyService: KeyService,
+    private masterPasswordService: MasterPasswordServiceAbstraction,
+    private platformUtilsService: PlatformUtilsService,
    private policyService: PolicyService,
    private toastService: ToastService,
  ) {}

  ngOnInit(): void {
+    this.addFormFieldsIfNecessary();
+    this.setButtonText();
+  }
+
+  private addFormFieldsIfNecessary() {
    if (
-      this.inputPasswordFlow === InputPasswordFlow.ChangePassword ||
-      this.inputPasswordFlow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
+      this.flow === InputPasswordFlow.ChangePassword ||
+      this.flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
    ) {
-      // https://github.com/angular/angular/issues/48794
-      (this.formGroup as FormGroup<any>).addControl(
+      this.formGroup.addControl(
        "currentPassword",
-        this.formBuilder.control("", Validators.required),
+        this.formBuilder.nonNullable.control("", Validators.required),
      );
+
+      this.formGroup.addValidators([
+        compareInputs(
+          ValidationGoal.InputsShouldNotMatch,
+          "currentPassword",
+          "newPassword",
+          this.i18nService.t("yourNewPasswordCannotBeTheSameAsYourCurrentPassword"),
+        ),
+      ]);
    }

-    if (this.inputPasswordFlow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation) {
-      // https://github.com/angular/angular/issues/48794
-      (this.formGroup as FormGroup<any>).addControl(
-        "rotateUserKey",
-        this.formBuilder.control(false),
-      );
+    if (this.flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation) {
+      this.formGroup.addControl("rotateUserKey", this.formBuilder.nonNullable.control(false));
    }
+  }

+  private setButtonText() {
    if (this.primaryButtonText) {
      this.primaryButtonTextStr = this.i18nService.t(
        this.primaryButtonText.key,
@@ -174,22 +226,9 @@ export class InputPasswordComponent implements OnInit {
    }
  }

-  get minPasswordLengthMsg() {
-    if (
-      this.masterPasswordPolicyOptions != null &&
-      this.masterPasswordPolicyOptions.minLength > 0
-    ) {
-      return this.i18nService.t("characterMinimum", this.masterPasswordPolicyOptions.minLength);
-    } else {
-      return this.i18nService.t("characterMinimum", this.minPasswordLength);
-    }
-  }
-
-  getPasswordStrengthScore(score: PasswordStrengthScore) {
-    this.passwordStrengthScore = score;
-  }
-
  protected submit = async () => {
+    this.verifyFlowAndUserId();
+
    this.formGroup.markAllAsTouched();

    if (this.formGroup.invalid) {
@@ -197,79 +236,204 @@ export class InputPasswordComponent implements OnInit {
      return;
    }

-    const newPassword = this.formGroup.controls.newPassword.value;
-
-    const passwordEvaluatedSuccessfully = await this.evaluateNewPassword(
-      newPassword,
-      this.passwordStrengthScore,
-      this.formGroup.controls.checkForBreaches.value,
-    );
-
-    if (!passwordEvaluatedSuccessfully) {
-      return;
-    }
-
-    // Create and hash new master key
-    const kdfConfig = DEFAULT_KDF_CONFIG;
-
-    if (this.email == null) {
+    if (!this.email) {
      throw new Error("Email is required to create master key.");
    }

-    const masterKey = await this.keyService.makeMasterKey(
+    const currentPassword = this.formGroup.controls.currentPassword?.value ?? "";
+    const newPassword = this.formGroup.controls.newPassword.value;
+    const newPasswordHint = this.formGroup.controls.newPasswordHint.value;
+    const checkForBreaches = this.formGroup.controls.checkForBreaches.value;
+
+    // 1. Determine kdfConfig
+    if (this.flow === InputPasswordFlow.AccountRegistration) {
+      this.kdfConfig = DEFAULT_KDF_CONFIG;
+    } else {
+      if (!this.userId) {
+        throw new Error("userId not passed down");
+      }
+      this.kdfConfig = await firstValueFrom(this.kdfConfigService.getKdfConfig$(this.userId));
+    }
+
+    if (this.kdfConfig == null) {
+      throw new Error("KdfConfig is required to create master key.");
+    }
+
+    // 2. Verify current password is correct (if necessary)
+    if (
+      this.flow === InputPasswordFlow.ChangePassword ||
+      this.flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
+    ) {
+      const currentPasswordVerified = await this.verifyCurrentPassword(
+        currentPassword,
+        this.kdfConfig,
+      );
+      if (!currentPasswordVerified) {
+        return;
+      }
+    }
+
+    // 3. Verify new password
+    const newPasswordVerified = await this.verifyNewPassword(
      newPassword,
-      this.email.trim().toLowerCase(),
-      kdfConfig,
+      this.passwordStrengthScore,
+      checkForBreaches,
+    );
+    if (!newPasswordVerified) {
+      return;
+    }
+
+    // 4. Create cryptographic keys and build a PasswordInputResult object
+    const newMasterKey = await this.keyService.makeMasterKey(
+      newPassword,
+      this.email,
+      this.kdfConfig,
    );

-    const serverMasterKeyHash = await this.keyService.hashMasterKey(
+    const newServerMasterKeyHash = await this.keyService.hashMasterKey(
      newPassword,
-      masterKey,
+      newMasterKey,
      HashPurpose.ServerAuthorization,
    );

-    const localMasterKeyHash = await this.keyService.hashMasterKey(
+    const newLocalMasterKeyHash = await this.keyService.hashMasterKey(
      newPassword,
-      masterKey,
+      newMasterKey,
      HashPurpose.LocalAuthorization,
    );

    const passwordInputResult: PasswordInputResult = {
      newPassword,
-      hint: this.formGroup.controls.hint.value,
-      kdfConfig,
-      masterKey,
-      serverMasterKeyHash,
-      localMasterKeyHash,
+      newMasterKey,
+      newServerMasterKeyHash,
+      newLocalMasterKeyHash,
+      newPasswordHint,
+      kdfConfig: this.kdfConfig,
    };

    if (
-      this.inputPasswordFlow === InputPasswordFlow.ChangePassword ||
-      this.inputPasswordFlow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
+      this.flow === InputPasswordFlow.ChangePassword ||
+      this.flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation
    ) {
-      passwordInputResult.currentPassword = this.formGroup.get("currentPassword")?.value;
+      const currentMasterKey = await this.keyService.makeMasterKey(
+        currentPassword,
+        this.email,
+        this.kdfConfig,
+      );
+
+      const currentServerMasterKeyHash = await this.keyService.hashMasterKey(
+        currentPassword,
+        currentMasterKey,
+        HashPurpose.ServerAuthorization,
+      );
+
+      const currentLocalMasterKeyHash = await this.keyService.hashMasterKey(
+        currentPassword,
+        currentMasterKey,
+        HashPurpose.LocalAuthorization,
+      );
+
+      passwordInputResult.currentPassword = currentPassword;
+      passwordInputResult.currentMasterKey = currentMasterKey;
+      passwordInputResult.currentServerMasterKeyHash = currentServerMasterKeyHash;
+      passwordInputResult.currentLocalMasterKeyHash = currentLocalMasterKeyHash;
    }

-    if (this.inputPasswordFlow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation) {
-      passwordInputResult.rotateUserKey = this.formGroup.get("rotateUserKey")?.value;
+    if (this.flow === InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation) {
+      passwordInputResult.rotateUserKey = this.formGroup.controls.rotateUserKey?.value;
    }

+    // 5. Emit cryptographic keys and other password related properties
    this.onPasswordFormSubmit.emit(passwordInputResult);
  };

-  // Returns true if the password passes all checks, false otherwise
-  private async evaluateNewPassword(
+  /**
+   * This method prevents a dev from passing down the wrong `InputPasswordFlow`
+   * from the parent component or from failing to pass down a `userId` for flows
+   * that require it.
+   *
+   * We cannot mark the `userId` `@Input` as required because in an account registration
+   * flow we will not have an active account `userId` to pass down.
+   */
+  private verifyFlowAndUserId() {
+    /**
+     * There can be no active account (and thus no userId) in an account registration
+     * flow. If there is a userId, it means the dev passed down the wrong InputPasswordFlow
+     * from the parent component.
+     */
+    if (this.flow === InputPasswordFlow.AccountRegistration) {
+      if (this.userId) {
+        throw new Error(
+          "There can be no userId in an account registration flow. Please pass down the appropriate InputPasswordFlow from the parent component.",
+        );
+      }
+    }
+
+    /**
+     * There MUST be an active account (and thus a userId) in all other flows.
+     * If no userId is passed down, it means the dev either:
+     *  (a) passed down the wrong InputPasswordFlow, or
+     *  (b) passed down the correct InputPasswordFlow but failed to pass down a userId
+     */
+    if (this.flow !== InputPasswordFlow.AccountRegistration) {
+      if (!this.userId) {
+        throw new Error("The selected InputPasswordFlow requires that a userId be passed down");
+      }
+    }
+  }
+
+  /**
+   * Returns `true` if the current password is correct (it can be used to successfully decrypt
+   * the masterKeyEncrypedUserKey), `false` otherwise
+   */
+  private async verifyCurrentPassword(
+    currentPassword: string,
+    kdfConfig: KdfConfig,
+  ): Promise<boolean> {
+    const currentMasterKey = await this.keyService.makeMasterKey(
+      currentPassword,
+      this.email,
+      kdfConfig,
+    );
+
+    if (!this.userId) {
+      throw new Error("userId not passed down");
+    }
+
+    const decryptedUserKey = await this.masterPasswordService.decryptUserKeyWithMasterKey(
+      currentMasterKey,
+      this.userId,
+    );
+
+    if (decryptedUserKey == null) {
+      this.toastService.showToast({
+        variant: "error",
+        title: "",
+        message: this.i18nService.t("invalidMasterPassword"),
+      });
+
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Returns `true` if the new password is not weak or breached and it passes
+   * any enforced org policy options, `false` otherwise
+   */
+  private async verifyNewPassword(
    newPassword: string,
    passwordStrengthScore: PasswordStrengthScore,
    checkForBreaches: boolean,
-  ) {
+  ): Promise<boolean> {
    // Check if the password is breached, weak, or both
    const passwordIsBreached =
-      checkForBreaches && (await this.auditService.passwordLeaked(newPassword));
+      checkForBreaches && (await this.auditService.passwordLeaked(newPassword)) > 0;

-    const passwordWeak = passwordStrengthScore != null && passwordStrengthScore < 3;
+    const passwordIsWeak = passwordStrengthScore != null && passwordStrengthScore < 3;

-    if (passwordIsBreached && passwordWeak) {
+    if (passwordIsBreached && passwordIsWeak) {
      const userAcceptedDialog = await this.dialogService.openSimpleDialog({
        title: { key: "weakAndExposedMasterPassword" },
        content: { key: "weakAndBreachedMasterPasswordDesc" },
@@ -279,7 +443,7 @@ export class InputPasswordComponent implements OnInit {
      if (!userAcceptedDialog) {
        return false;
      }
-    } else if (passwordWeak) {
+    } else if (passwordIsWeak) {
      const userAcceptedDialog = await this.dialogService.openSimpleDialog({
        title: { key: "weakMasterPasswordDesc" },
        content: { key: "weakMasterPasswordDesc" },
@@ -321,4 +485,67 @@ export class InputPasswordComponent implements OnInit {

    return true;
  }
+
+  protected async rotateUserKeyClicked() {
+    const rotateUserKeyCtrl = this.formGroup.controls.rotateUserKey;
+
+    const rotateUserKey = rotateUserKeyCtrl?.value;
+
+    if (rotateUserKey) {
+      if (!this.userId) {
+        throw new Error("userId not passed down");
+      }
+
+      const ciphers = await this.cipherService.getAllDecrypted(this.userId);
+
+      let hasOldAttachments = false;
+
+      if (ciphers != null) {
+        for (let i = 0; i < ciphers.length; i++) {
+          if (ciphers[i].organizationId == null && ciphers[i].hasOldAttachments) {
+            hasOldAttachments = true;
+            break;
+          }
+        }
+      }
+
+      if (hasOldAttachments) {
+        const learnMore = await this.dialogService.openSimpleDialog({
+          title: { key: "warning" },
+          content: { key: "oldAttachmentsNeedFixDesc" },
+          acceptButtonText: { key: "learnMore" },
+          cancelButtonText: { key: "close" },
+          type: "warning",
+        });
+
+        if (learnMore) {
+          this.platformUtilsService.launchUri(
+            "https://bitwarden.com/help/attachments/#add-storage-space",
+          );
+        }
+
+        rotateUserKeyCtrl.setValue(false);
+        return;
+      }
+
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "rotateEncKeyTitle" },
+        content:
+          this.i18nService.t("updateEncryptionKeyWarning") +
+          " " +
+          this.i18nService.t("updateEncryptionKeyAccountExportWarning") +
+          " " +
+          this.i18nService.t("rotateEncKeyConfirmation"),
+        type: "warning",
+      });
+
+      if (!result) {
+        rotateUserKeyCtrl.setValue(false);
+      }
+    }
+  }
+
+  protected getPasswordStrengthScore(score: PasswordStrengthScore) {
+    this.passwordStrengthScore = score;
+  }
 }
--- a/libs/auth/src/angular/input-password/input-password.mdx
+++ b/libs/auth/src/angular/input-password/input-password.mdx
@@ -6,9 +6,10 @@ import * as stories from "./input-password.stories.ts";

 # InputPassword Component

-The `InputPasswordComponent` allows a user to enter master password related credentials. On
-submission it creates a master key, master key hash, and emits those values to the parent (along
-with the other values found in `PasswordInputResult`).
+The `InputPasswordComponent` allows a user to enter master password related credentials. On form
+submission, the component creates cryptographic properties (`newMasterKey`,
+`newServerMasterKeyHash`, etc.) and emits those properties to the parent (along with the other
+values defined in `PasswordInputResult`).

 The component is intended for re-use in different scenarios throughout the application. Therefore it
 is mostly presentational and simply emits values rather than acting on them itself. It is the job of
@@ -16,12 +17,27 @@ the parent component to act on those values as needed.

 <br />

+## Table of Contents
+
+- [@Inputs](#inputs)
+- [@Outputs](#outputs)
+- [The InputPasswordFlow](#the-inputpasswordflow)
+  - [HTML - Form Fields](#html---form-fields)
+  - [TypeScript - Credential Generation](#typescript---credential-generation)
+  - [Difference between AccountRegistration and SetInitialPasswordAuthedUser](#difference-between-accountregistration-and-setinitialpasswordautheduser)
+- [Validation](#validation)
+- [Submit Logic](#submit-logic)
+- [Example](#example)
+
+<br />
+
 ## `@Input()`'s

 **Required**

- `inputPasswordFlow` - the parent component must provide the correct flow, which is used to
-  determine which form input elements will be displayed in the UI.
+- `flow` - the parent component must provide an `InputPasswordFlow`, which is used to determine
+  which form input elements will be displayed in the UI and which cryptographic keys will be created
+  and emitted.
 - `email` - the parent component must provide an email so that the `InputPasswordComponent` can
  create a master key.

@@ -29,13 +45,15 @@ the parent component to act on those values as needed.

 - `loading` - a boolean used to indicate that the parent component is performing some
  long-running/async operation and that the form should be disabled until the operation is complete.
-  The primary button will also show a spinner if `loading` true.
+  The primary button will also show a spinner if `loading` is true.
 - `masterPasswordPolicyOptions` - used to display and enforce master password policy requirements.
 - `inlineButtons` - takes a boolean that determines if the button(s) should be displayed inline (as
  opposed to full-width)
 - `primaryButtonText` - takes a `Translation` object that can be used as button text
 - `secondaryButtonText` - takes a `Translation` object that can be used as button text

+<br />
+
 ## `@Output()`'s

 - `onPasswordFormSubmit` - on form submit, emits a `PasswordInputResult` object
@@ -45,25 +63,31 @@ the parent component to act on those values as needed.

 <br />

-## Form Input Fields
+## The `InputPasswordFlow`

-The `InputPasswordComponent` can handle up to 6 different form input fields, depending on the
-`InputPasswordFlow` provided by the parent component.
+The `InputPasswordFlow` is a crucial and required `@Input` that influences both the HTML and the
+credential generation logic of the component.

-**InputPasswordFlow.SetInitialPassword**
+<br />
+
+### HTML - Form Fields
+
+The `InputPasswordFlow` determines which form fields get displayed in the UI.
+
+**`InputPasswordFlow.AccountRegistration`** and **`InputPasswordFlow.SetInitialPasswordAuthedUser`**

 - Input: New password
 - Input: Confirm new password
 - Input: Hint
 - Checkbox: Check for breaches

-**InputPasswordFlow.ChangePassword**
+**`InputPasswordFlow.ChangePassword`**

 Includes everything above, plus:

 - Input: Current password (as the first element in the UI)

-**InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation**
+**`InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation`**

 Includes everything above, plus:

@@ -71,49 +95,122 @@ Includes everything above, plus:

 <br />

+### TypeScript - Credential Generation
+
+- The `AccountRegistration` and `SetInitialPasswordAuthedUser` flows involve a user setting their
+  password for the first time. Therefore on submit the component will only generate new credentials
+  (`newMasterKey`) and not current credentials (`currentMasterKey`).
+- The `ChangePassword` and `ChangePasswordWithOptionalUserKeyRotation` flows both require the user
+  to enter a current password along with a new password. Therefore on submit the component will
+  generate current credentials (`currentMasterKey`) along with new credentials (`newMasterKey`).
+
+<br />
+
+### Difference between `AccountRegistration` and `SetInitialPasswordAuthedUser`
+
+These two flows are similar in that they display the same form fields and only generate new
+credentials, but we need to keep them separate for the following reasons:
+
+- `AccountRegistration` involves scenarios where we have no existing user, and **thus NO active
+  account `userId`**:
+
+  - Standard Account Registration
+  - Email Invite Account Registration
+  - Trial Initiation Account Registration
+
+<br />
+
+- `SetInitialPasswordAuthedUser` involves scenarios where we do have an existing and authed user,
+  and **thus an active account `userId`**:
+  - A "just-in-time" (JIT) provisioned user joins a master password (MP) encryption org and must set
+    their initial password
+  - A "just-in-time" (JIT) provisioned user joins a trusted device encryption (TDE) org with a
+    starting role that requires them to have/set their initial password
+    - A note on JIT provisioned user flows:
+      - Even though a JIT provisioned user is a brand-new user who was “just” created, we consider
+        them to be an “existing authed user” _from the perspective of the set-password flow_. This
+        is because at the time they set their initial password, their account already exists in the
+        database (before setting their password) and they have already authenticated via SSO.
+      - The same is not true in the account registration flows above&mdash;that is, during account
+        registration when a user reaches the `/finish-signup` or `/trial-initiation` page to set
+        their initial password, their account does not yet exist in the database, and will only be
+        created once they set an initial password.
+  - An existing user in a TDE org logs in after the org admin upgraded the user to a role that now
+    requires them to have/set their initial password
+  - An existing user logs in after their org admin offboarded the org from TDE, and the user must
+    now have/set their initial password
+
+The presence or absence of an active account `userId` is important because it determines how we get
+the correct `kdfConfig` prior to key generation:
+
+- If there is no `userId` passed down from the parent, we default to `DEFAULT_KDF_CONFIG`
+- If there is a `userId` passed down from the parent, we get the `kdfConfig` from state using the
+  `userId`
+
+That said, we cannot mark the `userId` as a required via `@Input({ required: true })` because
+`AccountRegistration` flows will not have a `userId`. But we still want to require a `userId` in a
+`SetInitialPasswordAuthedUser` flow. Therefore the `InputPasswordComponent` has init logic that
+ensures the following:
+
+- If the passed down flow is `AccountRegistration`, require that the parent **MUST NOT** have passed
+  down a `userId`
+- If the passed down flow is `SetInitialPasswordAuthedUser` require that the parent must also have
+  passed down a `userId`
+
+If either of these checks is not met, the component throws to alert the dev of a mistake.
+
+<br />
+
 ## Validation

-Validation ensures that:
+Form validators ensure that:

 - The current password and new password are NOT the same
 - The new password and confirmed new password are the same
 - The new password and password hint are NOT the same

+Additional submit logic validation ensures that:
+
+- The new password adheres to any enforced master password policy options (that were passed down
+  from the parent)
+
 <br />

-## On Submit
+## Submit Logic

 When the form is submitted, the `InputPasswordComponent` does the following in order:

-1. If the user selected the checkbox to check for password breaches, they will recieve a popup
-   dialog if their entered password is found in a breach. The popup will give them the option to
-   continue with the password or to back out and choose a different password.
-2. If there is a master password policy being enforced by an org, it will check to make sure the
-   entered master password meets the policy requirements.
-3. The component will use the password, email, and default kdfConfig to create a master key and
-   master key hash.
-4. The component will emit the following values (defined in the `PasswordInputResult` interface) to
-   be used by the parent component as needed:
+1. Verifies inputs:
+   - Checks that the current password is correct (if it was required in the flow)
+   - Checks if the new password is found in a breach and warns the user if so (if the user selected
+     the checkbox)
+   - Checks that the new password meets any master password policy requirements enforced by an org
+2. Uses the form inputs to create cryptographic properties (`newMasterKey`,
+   `newServerMasterKeyHash`, etc.)
+3. Emits those cryptographic properties up to the parent (along with other values defined in
+   `PasswordInputResult`) to be used by the parent as needed.

 ```typescript
 export interface PasswordInputResult {
+  // Properties starting with "current..." are included if the flow is ChangePassword or ChangePasswordWithOptionalUserKeyRotation
+  currentPassword?: string;
+  currentMasterKey?: MasterKey;
+  currentServerMasterKeyHash?: string;
+  currentLocalMasterKeyHash?: string;
+
  newPassword: string;
-  hint: string;
-  kdfConfig: PBKDF2KdfConfig;
-  masterKey: MasterKey;
-  serverMasterKeyHash: string;
-  localMasterKeyHash: string;
-  currentPassword?: string; // included if the flow is ChangePassword or ChangePasswordWithOptionalUserKeyRotation
+  newPasswordHint: string;
+  newMasterKey: MasterKey;
+  newServerMasterKeyHash: string;
+  newLocalMasterKeyHash: string;
+
+  kdfConfig: KdfConfig;
  rotateUserKey?: boolean; // included if the flow is ChangePasswordWithOptionalUserKeyRotation
 }
 ```

-# Example - InputPasswordFlow.SetInitialPassword
+# Example

-<Story of={stories.SetInitialPassword} />
+**`InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation`**

-<br />
-
-# Example - With Policy Requrements
-
-<Story of={stories.WithPolicies} />
+<Story of={stories.ChangePasswordWithOptionalUserKeyRotation} />
--- a/libs/auth/src/angular/input-password/input-password.stories.ts
+++ b/libs/auth/src/angular/input-password/input-password.stories.ts
@@ -2,14 +2,20 @@ import { importProvidersFrom } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, applicationConfig } from "@storybook/angular";
+import { of } from "rxjs";
 import { ZXCVBNResult } from "zxcvbn";

 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { MasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { DialogService, ToastService } from "@bitwarden/components";
-import { KeyService } from "@bitwarden/key-management";
+import { DEFAULT_KDF_CONFIG, KdfConfigService, KeyService } from "@bitwarden/key-management";

 // FIXME: remove `/apps` import from `/libs`
 // FIXME: remove `src` and fix import
@@ -26,12 +32,47 @@ export default {
      providers: [
        importProvidersFrom(PreloadedEnglishI18nModule),
        importProvidersFrom(BrowserAnimationsModule),
+        {
+          provide: AccountService,
+          useValue: {
+            activeAccount$: of({
+              id: "1" as UserId,
+              name: "User",
+              email: "user@email.com",
+              emailVerified: true,
+            }),
+          },
+        },
        {
          provide: AuditService,
          useValue: {
            passwordLeaked: () => Promise.resolve(1),
          } as Partial<AuditService>,
        },
+        {
+          provide: CipherService,
+          useValue: {
+            getAllDecrypted: () => Promise.resolve([]),
+          },
+        },
+        {
+          provide: KdfConfigService,
+          useValue: {
+            getKdfConfig$: () => of(DEFAULT_KDF_CONFIG),
+          },
+        },
+        {
+          provide: MasterPasswordServiceAbstraction,
+          useValue: {
+            decryptUserKeyWithMasterKey: () => Promise.resolve("example-decrypted-user-key"),
+          },
+        },
+        {
+          provide: PlatformUtilsService,
+          useValue: {
+            launchUri: () => Promise.resolve(true),
+          },
+        },
        {
          provide: KeyService,
          useValue: {
@@ -87,11 +128,14 @@ export default {
  ],
  args: {
    InputPasswordFlow: {
-      SetInitialPassword: InputPasswordFlow.SetInitialPassword,
+      AccountRegistration: InputPasswordFlow.AccountRegistration,
+      SetInitialPasswordAuthedUser: InputPasswordFlow.SetInitialPasswordAuthedUser,
      ChangePassword: InputPasswordFlow.ChangePassword,
      ChangePasswordWithOptionalUserKeyRotation:
        InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation,
    },
+    userId: "1" as UserId,
+    email: "user@email.com",
    masterPasswordPolicyOptions: {
      minComplexity: 4,
      minLength: 14,
@@ -108,11 +152,27 @@ export default {

 type Story = StoryObj<InputPasswordComponent>;

-export const SetInitialPassword: Story = {
+export const AccountRegistration: Story = {
  render: (args) => ({
    props: args,
    template: `
-      <auth-input-password [inputPasswordFlow]="InputPasswordFlow.SetInitialPassword"></auth-input-password>
+      <auth-input-password
+        [flow]="InputPasswordFlow.AccountRegistration"
+        [email]="email"
+      ></auth-input-password>
+    `,
+  }),
+};
+
+export const SetInitialPasswordAuthedUser: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <auth-input-password
+        [flow]="InputPasswordFlow.SetInitialPasswordAuthedUser"
+        [email]="email"
+        [userId]="userId"
+      ></auth-input-password>
    `,
  }),
 };
@@ -121,7 +181,11 @@ export const ChangePassword: Story = {
  render: (args) => ({
    props: args,
    template: `
-      <auth-input-password [inputPasswordFlow]="InputPasswordFlow.ChangePassword"></auth-input-password>
+      <auth-input-password
+        [flow]="InputPasswordFlow.ChangePassword"
+        [email]="email"
+        [userId]="userId"
+      ></auth-input-password>
    `,
  }),
 };
@@ -131,7 +195,9 @@ export const ChangePasswordWithOptionalUserKeyRotation: Story = {
    props: args,
    template: `
      <auth-input-password
-        [inputPasswordFlow]="InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation"
+        [flow]="InputPasswordFlow.ChangePasswordWithOptionalUserKeyRotation"
+        [email]="email"
+        [userId]="userId"
      ></auth-input-password>
    `,
  }),
@@ -142,7 +208,9 @@ export const WithPolicies: Story = {
    props: args,
    template: `
      <auth-input-password
-        [inputPasswordFlow]="InputPasswordFlow.SetInitialPassword"
+        [flow]="InputPasswordFlow.SetInitialPasswordAuthedUser"
+        [email]="email"
+        [userId]="userId"
        [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
      ></auth-input-password>
    `,
@@ -154,7 +222,8 @@ export const SecondaryButton: Story = {
    props: args,
    template: `
      <auth-input-password
-        [inputPasswordFlow]="InputPasswordFlow.SetInitialPassword"
+        [flow]="InputPasswordFlow.AccountRegistration"
+        [email]="email"
        [secondaryButtonText]="{ key: 'cancel' }"
        (onSecondaryButtonClick)="onSecondaryButtonClick()"
      ></auth-input-password>
@@ -167,7 +236,8 @@ export const SecondaryButtonWithPlaceHolderText: Story = {
    props: args,
    template: `
      <auth-input-password
-        [inputPasswordFlow]="InputPasswordFlow.SetInitialPassword"
+        [flow]="InputPasswordFlow.AccountRegistration"
+        [email]="email"
        [secondaryButtonText]="{ key: 'backTo', placeholders: ['homepage'] }"
        (onSecondaryButtonClick)="onSecondaryButtonClick()"
      ></auth-input-password>
@@ -180,7 +250,8 @@ export const InlineButton: Story = {
    props: args,
    template: `
      <auth-input-password
-        [inputPasswordFlow]="InputPasswordFlow.SetInitialPassword"
+        [flow]="InputPasswordFlow.AccountRegistration"
+        [email]="email"
        [inlineButtons]="true"
      ></auth-input-password>
    `,
@@ -192,7 +263,8 @@ export const InlineButtons: Story = {
    props: args,
    template: `
      <auth-input-password
-        [inputPasswordFlow]="InputPasswordFlow.SetInitialPassword"
+        [flow]="InputPasswordFlow.AccountRegistration"
+        [email]="email"
        [secondaryButtonText]="{ key: 'cancel' }"
        [inlineButtons]="true"
        (onSecondaryButtonClick)="onSecondaryButtonClick()"
--- a/libs/auth/src/angular/input-password/password-input-result.ts
+++ b/libs/auth/src/angular/input-password/password-input-result.ts
@@ -1,13 +1,18 @@
 import { MasterKey } from "@bitwarden/common/types/key";
-import { PBKDF2KdfConfig } from "@bitwarden/key-management";
+import { KdfConfig } from "@bitwarden/key-management";

 export interface PasswordInputResult {
-  newPassword: string;
-  hint: string;
-  kdfConfig: PBKDF2KdfConfig;
-  masterKey: MasterKey;
-  serverMasterKeyHash: string;
-  localMasterKeyHash: string;
  currentPassword?: string;
+  currentMasterKey?: MasterKey;
+  currentServerMasterKeyHash?: string;
+  currentLocalMasterKeyHash?: string;
+
+  newPassword: string;
+  newPasswordHint: string;
+  newMasterKey: MasterKey;
+  newServerMasterKeyHash: string;
+  newLocalMasterKeyHash: string;
+
+  kdfConfig: KdfConfig;
  rotateUserKey?: boolean;
 }