PasswordStrengthField

Password Strength Field

This component uses zxcvbn-ts and Redwood's PasswordField to validate a password meets a configurable, minimum unguessability-rating.

It will also display a "strength-meter", hinting to the end-user their current password's releative level of unguessability.

This directory also contains lib/zxcvbn.ts. It should be placed at src/lib/zxcvbn.ts. It contains a function which will lazy load zxcvbn's dictionaries when this component is used, helping to boost your application's performance.

Dependencies

• zxcvbn-ts
• i18next
• TailwindCSS (changes to swap out located in PasswordStrengthField.css)
• postcss-nested (changes to swap out located in PasswordStrengthField.css)
• clsx (optional, with slight modification)

Example Use

See result.score for an explanation as to the expected values of value, used in the strength validation below.

export const MyPage = () => {
  return (
    <PasswordStrengthField
      autoComplete="new-password"
      name="password"
      // ...
      validation={{
        strength: {
          message: 'Your password does not meet the minimum strength requirement.',
          value: 3, // my recommended "green zone"
        },
        // ...
      }}
    />
  )
}