CREATING PASSWORD VALIDATION/CHECKLIST IN REACT.JS

One of your responsibilities as a developer is making sure your users create a strong password to secure their account,

And this can be achieved by adding some checklist and visual validation while they are creating their password.

In these few steps, I will explain how you can create a simple password checklist with regular expressions.

STEP 1

Outline the checklists;
In this post we will be checking for

• has uppercase
• has lowercase
• has special characters
• has number
• is greater/equal to 8 characters

STEP 2

Create the regular expression to match the checklists

  const lowerCase = /[a-z]/g;
  const upperCase = /[A-Z]/g;
  const numbers = /[0-9]/g;
  const specialCharacter = /[-._!"`'#%&,:;<>=@{}~\$\(\)\*\+\/\\\?\[\]\^\|]+/;

STEP 3

Create an input component for the password

   export default function PasswordComponent(){

   function passwordValidator(e){
        const enteredPassword = e.target.value
   }

   return (
        <input type='password' placeholder='Enter password' 
               onChange={passwordValidator} />
        )}

STEP 4

use useState hook to manage input and validity state state

  export default function PasswordComponent(){
     const [hasLowercase, setHasLowercase] = useState(false)
     const [hasUppercase, setHasUppercase] = useState(false)
     const [hasNumber, setHasNumbe] = useState(false)
     const [hasSpecialCharacter, setHasSpecialCharacter] = 
     useState(false)
     const [passwordIsValid, setPasswordIsValid] = 
     useState(false)

  function passwordValidator(e){
     const enteredPassword = e.target.value
  }

   return (
        <input type='password' placeholder='Enter password' 
              onChange={passwordValidator} />
        )}

STEP 5

Start matching the entered value with the regular expression

export default function PasswordComponent(){
     const [hasLowercase, setHasLowercase] = useState(false)
     const [hasUppercase, setHasUppercase] = useState(false)
     const [hasNumber, setHasNumbe] = useState(false)
     const [hasSpecialCharacter, setHasSpecialCharacter] = 
     useState(false)
     const [passwordIsValid, setPasswordIsValid] = 
     useState(false)

function passwordValidator(e){
    const enteredPassword = e.target.value

// check for lower case

  if (!new_pass.match(lowerCase))  
          setHasLowercase(false);
          setIsValid(false);
      } else {
          setHasLowercase(true);
          setIsValid(true);
      }

// check for uppercase
    if (enteredPassword.match(upperCase)) {
           setHasUppercase(true);
           setPasswordIsValid(true);
        } else {
            setHasUppercase(false);
            setPasswordIsValid(false);
         }

// check for number
     if (enteredPassword.match(numbers)) {
            setHasNumber(true);
            setPasswordIsValid(true);
         } else {
            setHasNumber(false);
            setPasswordIsValid(false);
         }

// check for 8 or more characters
      if (enteredPassword.length >= 8) {
            setIsEightChar(true);
            setPasswordIsValid(true);
          } else {
            setIsEightChar(false);
            setPasswordIsValid(false);
          }

// check for special character
       if (enteredPassword.match(regex)) {
            setHasSpecialCharacter(true);
            setPasswordIsValid(true);
           } else {
            setHasSpecialCharacter(false);
            setPasswordIsValid(false);
           }
     }

       return (
        <input type='password' placeholder='Enter password' 
            onChange={passwordValidator} />
        )}

STEP 6

The passwordIsValid state can be used to render an error to the user

Let me know what you think about this method in the comments section below!