Introduction When building applications, you cannot avoid handling authentication and one of the ways to handle authentication is by receiving user data via a signup or registration form and such forms contain passwords. You don't just want your users to use strong passwords that meet certain criteria but also visually inform them of how strong their passwords are during account creation. In as much as password validation is done on the backend, the frontend validation helps guide the user in sending what the backend expects which ensures that your users, as well as your systems, are more secure. This article will show how to implement password validation from scratch(no library) as well as show the strength of the current password as the user types. Demo Here is a demo of what we will be building. stackblitz Password validation criteria For users to fulfill our " "🪄 validation criteria, their passwords must contain; mysterious One uppercase character One lowercase character One numeric character One special character Eight or more characters Or else, We will be using these regex patterns in the code snippet below to handle the validation: const atLeastOneUppercase = /[A-Z]/g; // capital letters from A to Z const atLeastOneLowercase = /[a-z]/g; // small letters from a to z const atLeastOneNumeric = /[0-9]/g; // numbers from 0 to 9 const atLeastOneSpecialChar = /[#?!@$%^&*-]/g; // any of the special characters within the square brackets const eightCharsOrMore= /.{8,}/g; // eight characters or more Handling component state State handling is inevitable and gladly a lot easier with React hooks. Let's outline the states to track. const [meter, setMeter] = React.useState(false); const [password, setPassword] = React.useState(''); : This handles the visibility of the password strength meter. meter : This takes care of the actual password the user types into the password field. password : Just a local variable that stores all the characters that pass validation criteria as well as each criterion that they pass. It does so by storing the return value of the method(which is an array of the passing character(s)) to the property in the an object that corresponds with the validation criteria. passwordTracker match() passwordTracker const passwordTracker = { uppercase: password.match(atLeastOneUppercase), lowercase: password.match(atLeastOneLowercase), number: password.match(atLeastOneNumeric), specialChar: password.match(atLeastOneSpecialChar), eightCharsOrGreater: password.match(eightCharsOrMore), } The password input field and strength meter This is a simple input field with functions to execute based on browser events. When a user focuses on the field, an anonymous function sets the state to thereby displaying the password strength meter and validation criteria. The event updates the state of the actual password as the user types. meter true onChange <form> <input onFocus={() => setMeter(true)} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Enter password...pwetty please" value={password} name="password" /> {meter && ( <div> <div className="password-strength-meter"></div> <div> {passwordStrength < 5 && 'Must contain '} {!passwordTracker.uppercase && 'uppercase, '} {!passwordTracker.lowercase && 'lowercase, '} {!passwordTracker.specialChar && 'special character, '} {!passwordTracker.number && 'number, '} {!passwordTracker.eightCharsOrGreater && 'eight characters or more'} </div> </div> )} </form> In the validation criteria section, the negated value of a property is used to determine whether criteria should be rendered or not. For example, if a password passes the regex, the value of the property is updated to a truthy value so that when negated( ), becomes and does not render the part anymore. atLeastOneUppercase uppercase ! false 'uppercase, ' When falsy( ) it negates the value and becomes truthy which renders the part letting users know that they still have to fulfill that criterion. null 'uppercase, ' Lastly, we have the variable whose value is gotten from the number of values in object. passwordStrength truthy passwordTracker const passwordStrength = Object.values(passwordTracker).filter(value => value).length; The idea is if 3 validation criteria are passed, the corresponding properties will have truthy values while the rest have falsy values ( ). To know the number of criteria passed, we use the method, which returns an array of . null Object.values() passwordTracker values Then we filter for the truthy values and then obtain the length of the array with a . is mainly used to determine the color and width of the password strength meter and also show or hide the part based on if all criteria are passed or not. .length passwordStrength 'Must contain ' With CSS-in-JS, we are able to execute JavaScript in our CSS styles using which assigns various colors to the property. The width of the meter is given in percentage by multiplying the ratio of the number of passed criteria(which could be 1,2,3,4 or 5) to the total number of criteria(5) by 100 short circuit evaluation background-color .password-strength-meter::before { content: ""; background-color: ${ ['red', 'orange', '#03a2cc', '#03a2cc', '#0ce052'] [passwordStrength - 1] || '' }; height: 100%; width: ${(passwordStrength / 5) * 100}%; display: block; border-radius: 3px; transition: width 0.2s; } Conclusion It is more aesthetically pleasing and has a better user experience to pinpoint the requirements a user needs to fulfill in order to navigate your app smoothly. I really hope you've gained some insight in this article on how to implement password validation with a password strength meter. I would love to know if there are any improvements that can be made to this implementation and also if you would prefer using a library over self-implementation. Feel free to share other implementations you have come across, suggestions, comments, or questions. Thanks for reading and happy coding. Connect If you would like to connect with me, I'm available on: Discord: brunoelo#8120 Twitter: BrunoElo Also published . here
