Build password strength checker in React

To build a password strength checker/indicator/meter in React, follow the below steps.

1. Create a state variable to hold the password input value.
2. Create a function to determine strength using a regular expression to check uppercase letters, lowercase letters, numbers, special characters, and password length.
3. Using this function, create a PasswordStrength component to check password strength.
4. Pass state variable into PasswordStrength component as props.
5. Add a progress bar in the PasswordStrength component to show password strength.

Let us explain all steps in detail.

The first step is to create an input field to enter a password and create a state variable to hold the password input value.

import React, { useState, useEffect } from "react";
import PasswordStrength from './PasswordStrength';
function App() {
  	const [password, setPassword] = useState("");
	const passwordChangeHandler = (event) => {
		setPassword(event.target.value);
	}
	return (
		<div>
			<label htmlFor="password">Password:</label>
			<input type="password" id="password" value={password} onChange={passwordChangeHandler} />
			<PasswordStrength password={password}/>
    	</div>
	);  	
}
export default App;

When the user enters some value in the input field, the passwordChangeHandler will be executed and the value will be stored in the state variable password.

In our example, we have created a password strength checker as a separate component that can be reused anywhere in our React application. This component was imported and the state variable password is passed into the PasswordStrength component as props. When the user changes the password input, the PasswordStrength component will re-evaluate the strength and rerender the component to show the updated progress bar.

Here is our PasswordStrength component.

import './passwordStrength.css';
function PasswordStrength(props){
    const strengthChecker = () => {      
      	let strengthValue = 0;
      	let regexList = ["[A-Z]", "[a-z]", "[0-9]", "\\W"];
      	let strengthText = ["", "unacceptable", "weak", "average", "good", "strong"];
	
      	regexList.forEach((regex) => {
        	if (new RegExp(regex).test(props.password)) {
          		strengthValue += 1;
        	}
      	});
      	if(props.password.length >=8){
        	strengthValue += 1;
      	}
      	return { text: strengthText[strengthValue], value: strengthValue }
    };
    return <div > 
        <progress
            className={`pwd-checker-bar strength-${strengthChecker().text}`}
            value={strengthChecker().value}
            max="5"
          /> {strengthChecker().text}
      </div>;
}
export default PasswordStrength;

The main functionality of PasswordStrength component is to check the strength of the password that is passed as props. In our example, strengthChecker function does this check. To become a password strong, it should contain uppercase letters, lowercase letters, numbers, special characters, and a minimum password length of 8 characters. There are many ways to check password strength, but we are using regular expressions to check for certain characters, such as uppercase letters, lowercase letters, numbers, and special characters. The strengthChecker function will determine the strength and return the strength value(0 to 5) and strength text(unacceptable, weak, average, good, or strong).

The <progress> element is used to display a progress bar to show password strength. To give a different color to different strengths starting from weak to strong we are using the below CSS codes.

  .pwd-checker-bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
  }
  .strength-unacceptable::-webkit-progress-value {
    background-color: #e20b07;
  }
  .strength-weak::-webkit-progress-value {
    background-color: #ff7a00;
  }
  .strength-average::-webkit-progress-value {
    background-color: #ebbd04;
  }
  .strength-good::-webkit-progress-value {
    background-color: #0b75ed;
  }
  .strength-strong::-webkit-progress-value {
    background-color: #01a917;
  }
  .pwd-checker-bar::-webkit-progress-bar {
    background-color: rgb(246, 241, 241);   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }
  .pwd-checker-bar::-webkit-progress-value {
    background-size: 30px 18px, 100% 100%, 100% 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }

Password strength check using react-password-strength-bar package

The react-password-strength-bar is a package that provides a password strength bar component for React. It is based on the package zxcvbn which is a password strength estimator inspired by password crackers.

Install react-password-strength-bar using the below command.

# npm command
npm install react-password-strength-bar
# yarn command
yarn add react-password-strength-bar

Next, import PasswordStrengthBar from react-password-strength-bar package.

import PasswordStrengthBar from 'react-password-strength-bar';

Then, use the package as follows.

<PasswordStrengthBar password={password} />

The password is the state variable that holds the input password value.

Conclusion

To build a password strength checker/indicator/meter in React, create a state variable to store the password input value first. Then create a function that checks for uppercase, lowercase, digits, special characters, and password length using a regular expression to ascertain the strength of the password. Next, create a PasswordStrength component that uses this function to check the strength of the password and pass the state variable as props to the PasswordStrength component. To display the password strength graphically, you can add a progress bar to the PasswordStrength component. Alternatively, you can use of react-password-strength-bar package to check the password strength.