react-native-password-strength-checker

A react-native password input with strength checker for both IOS and Android

Features

• Use zxcvbn to check password strength, combine with custom rules and password length
• Support for both IOS and Android, use ES6 React native
• Animated strength bar
• Check password is too short
• Check password not match rules
• Custom strength level (corresponding to 5 levels)
• Custom style for password input and password strength

Dependencies

This Component is built using Dropbox zxcvbn password strength estimator library

Screenshots

Installation

npm install react-native-password-strength-checker --save

Usage

Basic

Import this module:

import PasswordStrengthChecker from 'react-native-password-strength-checker';

Use as a component:

// Define streng level list
const strengLevels = [
      {
        label: 'Weak',
        labelColor: '#fff',
        widthPercent: '33',
        innerBarColor: '#fe6c6c'
      },
      {
        label: 'Weak',
        labelColor: '#fff',
        widthPercent: '33',
        innerBarColor: '#fe6c6c'
      },
      {
        label: 'Fair',
        labelColor: '#fff',
        widthPercent: '67',
        innerBarColor: '#feb466'
      },
      {
        label: 'Fair',
        labelColor: '#fff',
        widthPercent: '67',
        innerBarColor: '#feb466'
      },
      {
        label: 'Strong',
        labelColor: '#fff',
        widthPercent: '100',
        innerBarColor: '#6cfeb5'
      }
];
 
// Define too short object
const tooShort = {
      enabled: true,
      label: 'Too short',
      labelColor: 'red'
};
 
render() {
  return (
    ...
    <PasswordStrength
        secureTextEntry
        minLength={4}
        ruleNames="symbols|words"
        strengthLevels={strengthLevels}
        tooShort={tooShort}
        minLevel={0}
        barWidthPercent={65}
        showBarOnEmpty={true}
        barColor="#ccc"
        onChangeText={(text, isValid) => this.setState({ password: { value: text, isValid: isValid } })} 
    />
  )
}

Customization

• Define min length for password.
  Default: 0
• Rules: digits, letters, words, symbols, upperCase, lowerCase.
  Separate rules with |.
  Default: { ruleNames: 'lowerCase|upperCase|digits|symbols' }
• Define min level to pass validation (0,1,2,3,4)
  Default: { minLevel: 2}
• Define and enable too short case:
  Default: { tooShort: { enabled: false, labelColor: '#fff', label: 'Too short', widthPercent: '33', innerBarColor: '#fe6c6c' } }
  If you want to show 'too short', Enable it to show when password length is too short
• Define strength labels and label colors, strength bar colors, percentage of width for each level
  Default: { strengthLevels: [ { label: 'Weak', labelColor: '#fff', widthPercent: '33', innerBarColor: '#fe6c6c' }, { label: 'Weak', labelColor: '#fff', widthPercent: '33', innerBarColor: '#fe6c6c' }, { label: 'Fair', labelColor: '#fff', widthPercent: '67', innerBarColor: '#feb466' }, { label: 'Fair', labelColor: '#fff', widthPercent: '67', innerBarColor: '#feb466' }, { label: 'Strong', labelColor: '#fff', widthPercent: '100', innerBarColor: '#6cfeb5' } ] }

Properties

This component uses the same props as . Below are additional props for this component:

Strength level object:

Too short object:

Example

See EXAMPLE

git clone https://github.com/ttdung11t2/react-native-password-strength-checker.git
cd react-native-password-strength-checker/example
npm install
react-native run-ios / react-native run-android

License

react-native-password-strength-checker is released under the MIT license. See LICENSE for details.

Any question or support will welcome.