Skip to Content
FrontendAppsAccountAccount FlowsChange Password

Change Password

What it is used for

Lets the logged-in user set a new password without knowing the old one. A one-time code is sent to their email; they enter that code plus the new password. Used for self-service password reset while already authenticated (e.g. from account settings).

User flow (what the user will do)

Page path: /[locale]/change-password & /[locale]/change-password/form

  1. Start change password From the account page, the user clicks Change Password (e.g. in the actions bar).

  2. Request a code The user clicks “Request verification code”. A one-time code is sent to their email address.

  3. Enter code and new password The user enters the code from the email, their new password, and confirmation of the new password, then submits. On success, they see a success message and can log in with the new password.

How it is implemented

  • Routes: /[locale]/change-password, /[locale]/change-password/form.
  • Entry point: Account page -> Change Password button in the actions bar.
  • UI: src/containers/ChangePassword/index.tsx wraps src/components/ResetPassword/index.tsx (ResetPasswordForm).
  • API flow:
    1. Request code: User clicks “Request verification code”.
      • changePasswordRequest(tenant, { csrf, recaptcha_token }) -> POST users/logged_user/change_password/request.
      • No body (or minimal). Backend sends a code to the user’s email.
    2. Submit new password: User enters the code from email, new password, and confirmation.
      • changePassword({ code, newPassword, csrf?, recaptcha_token? }, tenant, t) -> PATCH users/logged_user/change_password.
      • Success: green toast; then user can log in with the new password.
  • API helpers: src/utils/apiUser.ts
    • changePasswordRequest(tenant, body) — request code.
    • changePassword(body, tenant, t, successMessage?) — submit code + new password. Handles password-strength errors and shows a translated message when the backend rejects weak passwords.
  • Validation: src/lib/passwordValidation.ts (e.g. getValidatedPlainPassword) and Zod schema in ResetPassword: length, strength, and “passwords match” checks.
  • reCAPTCHA: Used on both request and submit (action and token passed in request body).
  • Translations: ChangePassword namespace.

Account flows index

Last updated on
Change EmailSetup 2FA