React Password Validator

This react component lets the user validate their password fields quick and easily.

Demo

Click here for full documentation and more examples

Features

• Fully customizable
• Good look and feel
• Light weight
• Responsive
• Well tested

Installation

Install react-password-validattor with npm. In your react project run:

  npm install react-password-validattor

Please note that react is a peer dependency of this package.

Basic usage example

In your App.css import the styles

@import url('../node_modules/react-password-validattor/dist/style.css');

Then, your component should look like this

import React, { useState } from 'react'
import PasswordValidattor from 'react-password-validattor';

const App = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const onValidatorChangeHandler = (result) => {
    // result should be true for valid password or false to invalid password
    // Handle here your password validation status
  }
  return (
    <>
      <div>
        <input type="password" onChange={(e) => setPassword(e.target.value)} value={password} name='password' placeholder="Enter your password" />
        <input type="password" onChange={(e) => setConfirmPassword(e.target.value)} value={confirmPassword} name="confirmedPassword" placeholder="Please re-enter your password" />
        <PasswordValidator 
          rules={['minLength', 
                  'maxLength', 
                  'specialChar', 
                  'number', 
                  'capital', 
                  'matches', 
                  'lowercase', 
                  'notEmpty', 
                  'shouldNotContain']}
          forbiddenWords={['John', 'Doe']} 
          minLength={8}
          maxLength={32}
          password={password}
          confirmedPassword={confirmPassword}
          iconSize={16}
          onValidatorChange={onValidatorChangeHandler}
          config={{ showProgressBar: true, showPasswordSuggestion: true }} />
      </div>
    </>
  )
}

export default App

Available rules

minLength

Verify if the provided password met the min length property

maxLength

Verify if the provided password met the max length property

specialChar

Verify if the password contains at least one special character

number

Verify if the password contains at least one number

capital

Verify if the password contains at least one capital letter

matches

Verify if the password matches with confirmedPassword value

lowercase

Verify if the password contains at least one lowercase letter

notEmpty

Verify if the password is not empty

shouldNotContains

Verify if the password contains forbidden words such as user's name, lastname, etc...

Props

| Prop | Description | Type | Required | Default | :-------- | :------- | :------ | :------- | :------- | | rules | Rules that can be passed to check password strength. The rules that can be passed are minLength, maxLength, specialChar, number, capital, matches, lowercase, notEmpty, shouldNotContains | Array | true | minLength | Min length allowed for the password | number | false | 8 | maxLength | Max length allowed for the password | number | false | 32 | iconSize | Size of the icons | number | false | 16 password | Password typed for the user | string | true | | confirmedPassword | Password re-entered for the user. Required if matches option is passed into the rules array | string | | config | Configuration object | object | false | | onValidatorChange | Function that will recieve the RPV status | function | true |

Example of complete configuration

In your App.css import the styles

@import url('../node_modules/react-password-validattor/dist/style.css');

Then in your component should look like this:

import React, { useState } from 'react'
import PasswordValidattor from 'react-password-validattor';

const App = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const onValidatorChangeHandler = (result) => {
    // result should be true for valid password or false to invalid password
    // Handle here your password validation status
  }
  return (
    <>
      <div>
        <input type="password" onChange={(e) => setPassword(e.target.value)} value={password} name='password' placeholder="Enter your password" />
        <input type="password" onChange={(e) => setConfirmPassword(e.target.value)} value={confirmPassword} name="confirmedPassword" placeholder="Please re-enter your password" />
        <PasswordValidator 
          rules={['minLength', 
                  'maxLength', 
                  'specialChar', 
                  'number', 
                  'capital', 
                  'matches', 
                  'lowercase', 
                  'notEmpty', 
                  'shouldNotContain']}
          forbiddenWords={['John', 'Doe']} 
          minLength={8}
          maxLength={32}
          password={password}
          confirmedPassword={confirmPassword}
          iconSize={16}
          onValidatorChange={onValidatorChangeHandler}
          config = {{
            // Custom message texts / Internationalization
            customText: {
                minLength: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                maxLength: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                specialChar: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                number: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                capital: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                matches: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                lowercase: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                notEmpty: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
                shouldNotContain: {
                    successText: 'My custom text',
                    errorText: 'My custom text'
                },
            },
            // Show porgress bar
            showProgressBar: false,
            // Show password suggestions
            showPasswordSuggestion: true,
            // Custom classes
            classNames: {
                containerClass: 'my-container-custom-class',
                gridClass: 'my-grid-custom-class',
                ruleClass: 'my-rule-custom-class',
                validProgressBarClass: 'my-valid-progress-bar-custom-class',
                invalidProgressBarClass: 'my-invalid-progress-bar-custom-class'
            }
        }} />
      </div>
    </>
  )
}

export default App

Contributing

Contributions are always welcome! PRs should be well tested and contains all the integration tests. Coverage should be always 100%. See contributing.md for ways to get started. Please be kind and respectful.

Run locally

npm install npm run dev

To run tests

npm run watch or npm run test