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:

Prop	Type	Optional	Defaul	Description
minLength	number	Yes	0	Min length for password
ruleNames	string	Yes	Above	List of rule name to check password
strengLevels	object array	Yes	Above	List of password strength level with label, label color, percentage of width, bar color
tooShort	object	Yes	Above	enabled, label, label color, percentage of width, bar color for too short
minLevel	number	Yes	2	Min level to pass password validation
inputWraperStyle	object	Yes		Style for wrapped password input
inputStyle	object/style	Yes		Style for password input
strengthWrapperStyle	object/style	Yes		Style for wrapped password strength bar and description
strengthBarStyle	object/style	Yes		Style for password strength bar
innerStrengthBarStyle	object/style	Yes		Style for password strength bar based on strength level
strengthDescriptionStyle	object/style	Yes		Style for password strength description
barColor	string	Yes	'#ffffff'	Color of filled password strength bar
barWidthPercent	number	Yes	70	Percentage of password strength bar width
onChangeText	function	No		Trigger when user inputs and password input finishes validation. Returns value and validation result
showBarOnEmpty	boolean	Yes	true	Only show strength bar when input is empty or not

Strength level object:

Property	Type	Description
label	string	Label for strength level description
labelColor	string	Color for strength level description label
widthPercent	number	Percentage of width for inner strength level bar
innerBarColor	string	Color for inner strength level bar

Too short object:

Property	Type	Description
enabled	boolean	Enable too short description
label	string	Label for strength level description
labelColor	string	Color for strength level description label
widthPercent	number	Percentage of width for inner strength level bar
innerBarColor	string	Color for inner strength level bar

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.