Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Password Checklist in ReactJS?
Nowadays, applications use a one-time password or magic link for authentication, but we can’t ignore the authentication using the username and password.
Whenever we allow users to register with a username and password, we should ensure that the password users have entered is strong. So, it can be unbreakable by hackers.
In this tutorial, we will learn to verify the security level of the password in ReactJS.
Create a Custom Validation Algorithm
We can create a custom validation algorithm to check if the password is strong or weak. We can create regular expressions for lowercase, uppercase, and numeric letters.
After that, we can use the match() method to match the password string with the regular expression. If any password string doesn’t match with any regular expression, we can show the message that the password is weak.
Syntax
Users can follow the syntax below to use the regular expressions to validate the password by creating the custom algorithm.
var lowerCase = /[a-z]/g; var upperCase = /[A-Z]/g; var numbers = /[0-9]/g; let bool = new_pass.match(regex)
In the above syntax, we have different regular expressions. We have used the match() method with every regular expression and got the result in the bool variable.
Algorithm
Step 1 – Create a regular expression for lowercase, uppercase, and numeric letters.
Step 2 – Use the match() method to match the password with a lowercase regular expression. If the match() method returns false, set an error message.
Step 3 – Match the numeric and uppercase regular expression with a password, and set the error message accordingly boolean value it returns.
Step 4 – Next, check the length of the password at last. If the length is less than 10, also set the error message.
Example 1
In the example below, we have created the password input. Whenever the user changes the password value, it will invoke the handlePassword() function. In the handlePassword() function, we have created various regular expressions and are matching them with the password string using the match() method.
In the output, users can see that if the password doesn’t follow any condition, it will show the error message accordingly.
import React, { useState } from "react"; const App = () => { const [password, setPassword] = useState("Abc.@678"); const [errorMessage, setErrorMessage] = useState(""); function handlePassword(event) { let new_pass = event.target.value; setPassword(new_pass); // regular expressions to validate password var lowerCase = /[a-z]/g; var upperCase = /[A-Z]/g; var numbers = /[0-9]/g; if (!new_pass.match(lowerCase)) { setErrorMessage("Password should contains lowercase letters!"); } else if (!new_pass.match(upperCase)) { setErrorMessage("Password should contain uppercase letters!"); } else if (!new_pass.match(numbers)) { setErrorMessage("Password should contains numbers also!"); } else if (new_pass.length < 10) { setErrorMessage("Password length should be more than 10."); } else { setErrorMessage("Password is strong!"); } } return ( <div> <h2> {" "} Validate the password by creating the custom algorithm in ReactJS.{" "} </h2> <input type = "text" value = {password} onChange = {handlePassword} /> <div style = {{ color: "red" }}> {errorMessage} </div> </div> ); }; export default App;
Output
Use the React Password Checklist NPM package
The best thing about ReactJS is that it contains various libraries; we can use it directly in our app by installing it. The react-password-checklist library allows us to check the strength of the password based on various conditions.
For example, it validates the minimum and maximum length of the password, capital case, number, etc. Developers need to pass the props in the PasswordChecklist component, which validates the password accordingly.
Execute the below command to install the react-password-checklist in our app.
npm i react-password-checklist
Syntax
Users can follow the syntax below to use the react-password-checklist NPM package to validate the password.
<PasswordChecklist
rules={["capital", "match", "specialChar", "minLength", "number"]}
minLength={8}
value={password}
valueAgain={matchPassword}
/>
In the above syntax, we have used the PasswordChecklist component and passed props to validate the password.
Example 2
In the example below, we have imported the react-password-checklist library and used it as a component. We have passed the rules as a prop in the array format to validate the password. Also, we have bound the password to the value and the passwordMatch to the valueAgain in the PasswordCheckList component.
In the output, users can observe the cross sign before the message that rule doesn’t follow the password string.
import React, { useState } from "react"; import PasswordChecklist from "react-password-checklist"; const App = () => { const [password, setPassword] = useState("Abc.@678"); const [matchPassword, setMatchPassword] = useState("ABC.@678"); const [errorMessage, setErrorMessage] = useState(""); function handleSetPassword(event) { setPassword(event.target.value); } function handleSetMatchPassword(event) { setMatchPassword(event.target.value); } return ( <div> <h2> {" "} Validate the password using the <i> react-password-checklist </i> in ReactJS.{" "} </h2> <div> Enter the password: </div> <input type = "text" value = {password} onChange = {handleSetPassword} /> <div> Enter the password Again: </div> <input type = "text" value = {matchPassword} onChange = {handleSetMatchPassword} /> <PasswordChecklist rules = {["capital", "match", "specialChar", "minLength", "number"]} minLength = {8} value = {password} valueAgain = {matchPassword} /> </div> ); }; export default App;
Output
Example 3
In the example below, we have set up the custom validation message for every rule of password checking. Users can see how we have passed the message object as a prop of the PasswordChecklist component. In the message object, we have used the rule as a key and the message as its value.
import React, { useState } from "react"; import PasswordChecklist from "react-password-checklist"; const App = () => { const [password, setPassword] = useState("Abc.@678"); const [matchPassword, setMatchPassword] = useState("ABC.@678"); const [errorMessage, setErrorMessage] = useState(""); function handleSetPassword(event) { setPassword(event.target.value); } function handleSetMatchPassword(event) { setMatchPassword(event.target.value); } return ( <div> <h2> {" "} Validate the password using the <i> react-password-checklist </i> in ReactJS.{" "} </h2> <div> Enter the password: </div> <input type = "text" value = {password} onChange = {handleSetPassword} /> <div> Enter the password Again: </div> <input type = "text" value = {matchPassword} onChange = {handleSetMatchPassword} /> <PasswordChecklist rules = {[ "capital", "match", "specialChar", "minLength", "lowercase", "number", ]} minLength = {10} value = {password} valueAgain = {matchPassword} messages = {{ minLength: "The minimum length of the password should be 10.", specialChar: "The password should contain at least one special character.", number: "The password should contain at least one numeric letter.", capital: "The password should contain at least one uppercase letter.", match: "Password and password again should match.", lowercase: "The password should contain at least one lowercase letter.", }} /> </div> ); }; export default App;
Output
5K+ Views
