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
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.
1 | 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.
1 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, { useState } from "react"; import PasswordStrengthBar from 'react-password-strength-bar'; function App() { const [password, setPassword] = useState(''); return ( <div className="App"> <h3>Password Strength Checker in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <div className="pwd-container"> <input type="password" placeholder="Enter Password" value={password} onChange={e => setPassword(e.target.value)} /> <PasswordStrengthBar password={password} /> </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.
That’s it for today.
Thank you for reading. Happy Coding..!!
