Password Strength Checker in React

Today we’ll show you how to build a password strength checker in React. In this short article, we’ll implement the password strength bar in ReactJS using npm package.

We have already written a several articles using the React Package.

Steps to implement password strength checker

Create a react application
Add npm dependency
Write a logic to check password strength
Output

1. Create a react application

First of all, we will create a simple react app using the `create-react-app` package. Run the following command to create a react app.

npx create-react-app password-strength-checker-react

2. Add npm dependency

Here, we’ll use the react-password-strength-bar npm package to check the password strength. Run the following command to install the package.

npm i react-password-strength-bar

3. Write a logic to check password strength

Let’s write a logic to integrate the `react-password-strength-bar` package in the react component. For the demo purpose, we’ll simply take an input password field and check the entered password strength.

App.js

import React, { useState } from "react";
import PasswordStrengthBar from 'react-password-strength-bar';

function App() {
  const [password, setPassword] = useState('');

  return (
    <div class="App">
      <h3>Password Strength Checker in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <div class="pwd-container">
        <input type="password" placeholder="Enter Password" value={password} onchange="{e" ==""> setPassword(e.target.value)}
        />
        <passwordstrengthbar password={password}>
      </passwordstrengthbar></div>
    </div>
  );
}

export default App;

Here, we used the default setting to check the password strength. You can configure it based on your requirement. You can also update the styling and the score settings. Refer these props for more information.

4. Output

Run the application and check the output in the browser.

Output - Password Strength Checker in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project