Password fields

Your application will require customers to enter their password on several pages (registration, login, password recovery, etc...). This page contains all the information about how to adapt the default Front-Commerce behaviors.

Front-Commerce contains some default components and mechanisms for providing a good user experience while ensuring that passwords match the security criteria you may have. Here is how to adapt them to your needs.

Configure password validity

Front-Commerce expects a certain level of complexity for the password entered by users. The default is:

• A minimum of 8 characters
• At least 3 types of characters among: lowercase letters, uppercase letters, digits and special characters

You can customize those default rules by overriding theme/components/atoms/Forms/Input/Password/passwordConfig.ts

The configuration expects a list of rules to be satisfied and status to be displayed to users. It should follow the format below:

theme/components/atoms/Forms/Input/Password/passwordConfig.ts

import { defineMessages } from "react-intl";

const messages = defineMessages({
  invalid: {
    id: "components.atoms.Form.Input.PasswordStrengthHint.Status.invalid",
    defaultMessage: "This is an invalid password",
  },
  tooShort: {
    id: "components.atoms.Form.Input.PasswordStrengthHint.Status.tooShort",
    defaultMessage: "Too short",
  },
});

export default {
  rules: [
    {
      // technical ID, must be unique
      id: "a-unique-technical-id",
      // optional, enforces this status if isValid returns false
      invalidStatus: "TOO_SHORT",
      // optional, label to display for this rule in the hint. If it is not defined, the rule is not displayed.
      label: messages.invalid,
      // validation method for this rule
      isValid: (password) => true,
    },
  ],
  status: {
    // status key, used by rule.invalidStatus
    TOO_SHORT: {
      // message to display for this status
      label: messages.tooShort,
      // the status to be used from the ProgressStatus component
      status: "error",
      // minimum number of valid criterias for this status to be display, only the first valid status sorted by minCriterias will be shown
      minCriterias: 0,
      // is this status sufficient to validate the password
      isValid: false,
    },
  },
};

Disable password strength hints

Front-Commerce provides a <PasswordStrengthHint> component to provide detailed feedback to users about the expected password complexity.

You can deactivate this feature by adding the variable FRONT_COMMERCE_WEB_PASSWORD_HINT_DISABLE=true to your environment file.