Build a password strength indicator in ReactJs.

Hello Devs,

This feature is the latest issue of my newsletter where I am building one complex frontend feature every week.

And share the breakdown of the thought process and design behind it.

Join the newsletter: https://diaryofadev.ck.page/

Today we are building a simple "Password Strength Indicator" in React.

So, let's dive in to build our second front-end feature.

What are we building?

Live Preview: https://stackblitz.com/edit/vitejs-vite-usrrut?file=src%2FApp.jsx

Let the coding begin.

If you have built anything in React previously, this one will be fairly simple for you.

I would suggest you go ahead and try to build this feature on your own first, then come back and check my solution.

First thing first, let's show an input element and a strength indicator text on the screen.

<input type="password" placeholder="Enter your password" />
<small>Password strength:</small>

Cool, now let's make it a controlled component by adding a state for the input value. Along with that, we will add a state to store the strength of the password.

const [password, setPassword] = useState("");
const [strength, setStrength] = useState("");
​
return (
  <input
    type="password"
    placeholder="Enter your password"
    value={password}
    onChange={(event) => setPassword(event.target.value)}
  />
​
  <small>Password strength: {strength}</small>
)

Now this is a controlled component with input being handled by a local state. We also added strength value in the strength indicator text.

But wait, How are we gonna calculate the strength of the password entered by the user?

First, let's decide what we consider as a strong password. A password is strong if it has the following features.

• Minimum 8 characters.
• Contains lowercase letters.
• Contains uppercase letters.
• Contains number.
• Contains special characters.

So, let's write a function that will evaluate the strength of a given password based on the above points.

function evaluatePasswordStrength(password) {
  let score = 0;
​
  if (!password) return '';
​
  // Check password length
  if (password.length > 8) score += 1;
  // Contains lowercase
  if (/[a-z]/.test(password)) score += 1;
  // Contains uppercase
  if (/[A-Z]/.test(password)) score += 1;
  // Contains numbers
  if (/\d/.test(password)) score += 1;
  // Contains special characters
  if (/[^A-Za-z0-9]/.test(password)) score += 1;
}

The above function adds 1 to the score for each password feature available. The more the score stronger the password. To check for features like lowercase, uppercase, number, and special characters we are using regex.

Regex is a tool to identify patterns in a string. If you are not familiar with it just google and read the basics of it. It is not that tough. And most of the time your desired regex pattern is just a search away.

• Score: 0-2 (Weak password)
• Score: 3 (Medium password)
• Score: 4-5 (Strong password)

Next, we determine and set the strength state based on the above points.

function evaluatePasswordStrength(password) {
  ....
​
  switch (score) {
    case 0:
    case 1:
    case 2:
    return "Weak";
  case 3:
    return "Medium";
  case 4:
  case 5:
    return "Strong";
  }
}

In the onChange callback where we set the password value, we will also set the strength state to the value that is returned from evaluatePasswordStrength function.

  <input
    ....
    onChange={(event) => {
      setPassword(event.target.value);
      setStrength(evaluatePasswordStrength(event.target.value));
    }}
  />

And, that is it. Our password strength indicator is ready.

There is a small addition we can make, but we won't do it here. I give it to you as a challenge to solve. You can check the solution in the final preview link.

Challenge

Add a feature to the strength indicator text so that it changes its color based on the strength.

• Weak passwords shows in red color.
• Medium password shows in orange color.
• Strong password shows in green color.

Alright!

That was neat. I will bring more complex features to our future issues.

Reply/comment to this email/post, if you have any suggestions on which feature should I build in future issues.

If you enjoyed this issue, you will love other issues of building complex frontend features every week

Check Here: https://diaryofadev.ck.page/

Thank You!