Build a Simple Password Strength Checker

Providing instant feedback is the in-thing right now. Why limit yourself to checking usernames and email addresses? Why not extend this to provide quick visual feedback about the strength of the password the user has input? Today, we'll take a look at how to create a simple password strength checker using regular expressions and a simple algorithm.

As most security experts will tell you, the user is always the weakest link. Even the most secure systems are vulnerable when a user chooses an extremely ill-advised password. With that in mind, the recent trend seems to be providing quick feedback to the user regarding the strength of the password so the user can extend or modify the password to make it more secure.

Today, we are going to use the jQuery library, a bunch of regular expressions, and a very simple algorithm to create a basic password strength checker. Interested? Let's get started right away! Here is a demo of what we are trying to build today:

Design Goals

Our design goals for this specific functionality are relatively small.

Provide visual feedback to the user regarding the strength of their password.
The feedback has to be instantaneous. This means no clicking on a button to test the strength.
The trigger event can be any of the keyboard events. I've chosen keyup since this is the most appropriate for our specific need.
For the visual feedback, modifying the text alone, while useful, is severely lacking. I've chosen to change the background colors as well to draw the user's attention to this.
Provide additional quantifiable feedback so the user knows in which departments the password lacks strength and how it can be improved.

Now that we've adequately figured out our needs, we can move on to the next stage.

Plan of Action

We'll now decide on the order of the individual steps that need to be done.

Hook up the event handler to the keyup event of the input box.
Let the event handler check the input but delegate everything else to individual helper methods.
The helper methods should take care of parsing the input and analyzing it, computing the complexity and printing out the results.
Make sure the event handler fires off the helper methods only if the length of the input is greater than the expected minimum so as to not waste CPU cycles on invalid entries.
Return control to the event handler in case anything else needs to be done.

The Algorithm

In the interest of keeping this write-up succinct and approachable, I've decided to go with a very basic algorithm. The algorithm analyzes the string, giving bonuses for extra length and using numbers, symbols, and uppercase letters, and penalties for letter- or number-only inputs. We aren't going to look at checking the input against a dictionary since this is out of the scope of the article.

First, we check the length of the input string. If it's greater than the minimum length, give it a base score of 50. Else make it 0. Next, iterate through each character of the string and check if it is a symbol, number, or uppercase letter. If so, make a note of it.

Then check how many extra characters the string has over the recommended minimum, and grant a bonus for each character. Also grant a bonus if the string contains a combination of uppercase letters, numbers, and symbols, or all three. Grant a bonus for the presence of each of them.

Check if the string only contains either lowercase letters or numbers and, if so, penalize.

Add up all the numbers and decide the strength of the password accordingly.

That's the long and short of the algorithm. It's not going to be exceedingly complex, but it will catch a lot of bad passwords. You'll understand this better once we see it in code.

Core Markup

The HTML markup of the demo page looks like so:

<div id="container">

  <h1>A simple password strength checker</h1>

  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>

  <div class="block">
    <input id="password" />
    <div id="complexity" class="default">Enter a random value</div>
  </div>

  <div class="block">
    <div id="results" class="default">Breakdown of points</div>
    <div id="details"></div>
    <p class="message"></p>
  </div>

</div>

Disregard all the usual markup. Do notice the input element with an id of password, the div element with an id of complexity which shows the complexity of the password, and the div element with an id of details which shows the breakdown of points.

CSS Styling

input {
  width: 400px;
  margin: 2rem 0 0.1rem 0;
  padding: 0.2rem;
  font-size: 1.5rem;
  font-family: "Lato";
  outline: none;
  border: none;
  border-bottom: 2px solid black;
}

#container {
  width: 800px;
  margin: 0 auto;
  padding: 50px 0 0 0;
}

.block {
  width: 400px;
  margin: 0 auto;
}

#complexity,
#results {
  width: 400px;
  padding: 3px 0;
  height: 20px;
  color: #000;
  font-size: 1.25rem;
  text-align: center;
  color: white;
  font-weight: bold;
}

div#complexity {
  width: fit-content;
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
}

#results {
  margin: 30px 0 20px 0;
}

The above snippet is just boilerplate CSS for the layouts and typography. You will notice that we have set the width of our password complexity div to fit-content. This allows us to keep it only as wide as it needs to be to fit the content.

We will also need some additional CSS that will be useful for differentiating between different password strengths. The paragraph with message class will contain a message about penalties, so we have made it bold and red in color.

.default {
  background-color: black;
}
.weak {
  background-color: #C62828;
}
.strong {
  background-color: #FF8F00;
}
.stronger {
  background-color: #1976D2;
}
.strongest {
  background-color: #388E3C;
}

span.value {
  font-weight: bold;
  float: right;
}

p.message {
  color: red;
  font-weight: bold;
}

JavaScript Implementation

Now that we have a solid framework and some basic styling in place, we can start coding up the required functionality. Do note that we make extensive use of jQuery. Feel free to link to Google's CDN if necessary.

Variables and Event Handling

Since a lot of number juggling is going to go on, we need a bunch of variables to hold the values. Since this is a demo and not production code, I decided to declare the variables as global and access them through the helper methods instead of declaring them internally and then passing them to the functions.

let baseScore = 0;
let score = 0;
const minPasswordLength = 8;

const complexity = document.querySelector("#complexity");
const passwordInput = document.querySelector("#password");

let num = {
  excess: 0,
  upper: 0,
  numbers: 0,
  symbols: 0
};

let bonus = {
  excess: 3,
  upper: 4,
  numbers: 5,
  symbols: 5,
  combo: 0,
  onlyLower: 0,
  onlyNumber: 0,
  uniqueChars: 0,
  repetition: 0
};

We have three constants. The first one, called minPasswordLength, determines the minimum password length for us to start specifying the password strength. The two other constants store a reference to the input element and the div that will contain the strength indicator.

We create two objects to store numbers for our calculation. The first one, called num, holds the number of extra characters, uppercase characters, numbers, and symbols. We do the same for the second object, called bonus. The num object holds the number of characters, while the bonus object holds the bonus multipliers and penalty values. You can just create individual variables, but I think this looks cleaner.

Don't forget to hook up the event handler to the event.

1	passwordInput.addEventListener("keyup", checkVal);

The checkVal function will be called whenever there is a keyup event on our passwordInput element.

The Event Handler

Let's begin by writing the code for our event handler callback function. We first get the password that was entered by the user and then do some variable initialization within the init() function which resets the value of a lot of variables to 0.

function checkVal() {
  
  let strPassword = passwordInput.value; 
  init();

  if (strPassword.length >= minPasswordLength) {
    baseScore = 50;
    analyzeString(strPassword);
    calcComplexity();
  } else {
    baseScore = 0;
  }

  outputResult(strPassword);
}

function init() {
  num.excess = 0;
  num.upper = 0;
  num.numbers = 0;
  num.symbols = 0;
  bonus.combo = 0;
  bonus.onlyLower = 0;
  bonus.onlyNumber = 0;
  bonus.uniqueChars = 0;
  bonus.repetition = 0;
  baseScore = 0;
  score = 0;
}

Next, we check the length of the input string. If it is greater than or equal to the minimum specified length, we can proceed. We set the base score to 50 and call the helper functions which take care of analyzing the string and computing its complexity.

If it's less than the expected length, we just set the base score to 0.

We then call the outputResult() function, which takes care of making sense of the computed computations. We'll see how it works later.

Analyzing the Input

We will now define the analyzeString() function to find out the type of characters in the password and assign bonuses and penalties accordingly. This may look a bit complicated, but I promise you, it's only because of the regular expressions. Let's go over the code part by part.

function analyzeString(strPassword) {
  let charPassword = strPassword.split("");

  for (i = 0; i < charPassword.length; i++) {
    if (charPassword[i].match(/[A-Z]/g)) {
      num.upper++;
    }
    if (charPassword[i].match(/[0-9]/g)) {
      num.numbers++;
    }
    if (charPassword[i].match(/(.*[!,@,#,$,%,^,&,*,?,_,~])/g)) {
      num.symbols++;
    }
  }

  num.excess = charPassword.length - minPasswordLength;

  if (num.upper && num.numbers && num.symbols) {
    bonus.combo = 25;
  } else if (
    (num.upper && num.numbers) ||
    (num.upper && num.symbols) ||
    (num.numbers && num.symbols)
  ) {
    bonus.combo = 15;
  }

  if (strPassword.match(/^[\sa-z]+$/)) {
    bonus.onlyLower = -15;
  }

  if (strPassword.match(/^[\s0-9]+$/)) {
    bonus.onlyNumber = -35;
  }
}

First, we need to figure out the composition of the string in question. So we need to figure out whether the string contains uppercase letters, numbers, or symbols, and if so, how many of them are present. With this in mind, we iterate through the character array and check each character to see its type. The match() method lets us match a string against a regular expression. If you are new to regular expressions, I suggest you read Vasili's great article about must-know regular expressions.

9 Regular Expressions You Should Know

Vasili

23 Oct 2022

Next, we have to determine the difference between the length of the input string and the specified minimum length of the password. This gives us the excess number of characters to play around with.

We then check if the string has uppercase, numbers, and symbols. If so, grant a bonus. We also check to see whether it has combinations of two of them and grant a smaller bonus if so.

Finally, we check to see whether the string is flat: whether it contains only lowercase letters or only numbers. We check this with a regular expression and, if so, penalize the password for this practice.

Calculate the Complexity

Calculating the complexity is relatively easy as we just have to do simple addition and multiplication of the values we assigned to our variables earlier. We add the base score to the product of the number of excess characters and its multiplier. We do the same for uppercase letters, numbers, and symbols. We then add a bonus for combinations, if present, and add penalties if the string is flat.

function calcComplexity() {
  score =
    baseScore +
    num.excess * bonus.excess +
    num.upper * bonus.upper +
    num.numbers * bonus.numbers +
    num.symbols * bonus.symbols +
    bonus.combo +
    bonus.onlyLower +
    bonus.onlyNumber;
}

Updating the UI

Now that all the computation is behind us, we can update the UI to reflect the changes. Here are each of the states.

We will define two functions here. The main function called outputResult() determines the text inside our div, the classes to be removed, and the classes to be added. The helper function called updateComplexity() actually makes the updates.

function updateComplexity(message, removeClasses, addClass) {
  complexity.innerHTML = message;
  complexity.classList.remove(...removeClasses);
  complexity.classList.add(addClass);
}

function outputResult(strPassword) {
  let removeClasses = ["weak", "strong", "stronger", "strongest"];
  if (passwordInput.value == "") {
    updateComplexity("Enter a random value", removeClasses, "default");
  } else if (strPassword.length < minPasswordLength) {
    updateComplexity(
      `At least ${minPasswordLength} characters please!`,
      removeClasses,
      "weak"
    );
  } else if (score < 50) {
    updateComplexity("Weak!", removeClasses, "weak");
  } else if (score >= 50 && score < 75) {
    updateComplexity("Average!", removeClasses, "strong");
  } else if (score >= 75 && score < 100) {
    updateComplexity("Strong!", removeClasses, "stronger");
  } else if (score >= 100) {
    updateComplexity("Secure!", removeClasses, "strongest");
  }
}

Nothing fancy here, but we'll go through it line by line.

We first check to see whether the input is empty. If so, change the result's text and add a default class to change its background color back to its original black.

If it's less than the minimum specified length, we change the text accordingly and add a weak class so that its background is red. We do the same if the total score is less than 50 but change the text to weak.

As the score increases, we change the text accordingly and add the necessary classes. Feel free to change the baseline scores for each rating. I just put in unscientific values to get the demo going.

Updating the Detailed Breakdown

With the main result updated, we can look at updating the stats now.

function outputResult(strPassword) {
    
  // Previous Code
  
  document.querySelector("#details").innerHTML = `Base Score :<span class="value">${baseScore}</span><br />
     Length Bonus :<span class="value">${num.excess * bonus.excess} [${num.excess} x ${bonus.excess}]</span><br />
     Upper case bonus :<span class="value">${num.upper * bonus.upper} [${num.upper} x ${bonus.upper}]</span><br />
     Number Bonus :<span class="value">${num.numbers * bonus.numbers} [${num.numbers} x ${bonus.numbers}]</span><br />
     Symbol Bonus :<span class="value">${num.symbols * bonus.symbols} [${num.symbols} x ${bonus.symbols}]</span><br />
     Combination Bonus :<span class="value">${bonus.combo}</span><br />
     Lower case only penalty :<span class="value">${bonus.onlyLower}</span><br />
     Numbers only penalty :<span class="value">${bonus.onlyNumber}</span><br />
     Repeating pattern penalty :<span class="value">${bonus.repetition}</span><br />
     Total Score:<span class="value">${score}</span><br />`;
}

This part is not as confusing as it looks. Let me explain.

Instead of updating the individual values for the detailed results, I've resorted to just updating the complete HTML value of the container. I know it's going to be sluggish when the number of these boxes adds up, but accessing each element individually and then updating its value for a tiny demo seemed to be rather counter-productive. So run with me here.

This is just like injecting regular HTML into an element, except that we've placed a couple of variables inside to enable the details to be updated instantaneously. Each value gets a value class to make it bold. We also display the number of special characters and its multiplier so the user can gauge which elements get more weight.

Important Points to Keep in Mind

The init() function isn't useful just for the initial value assignment. It actually takes care of resetting the score and penalty values after every keyup event. Why is this important? Resetting is important because it makes sure that the password score and point breakdown are up-to-date.

Let's say someone types a symbol in the password. This will potentially result in them getting some bonus points. Without the reset after each keystroke, the bonus points will stay in the system even if you delete the symbol character later.

You should also notice how we remove all the classes from the password strength indicator before appending the new class. This is also important for the same reason. If someone types a strong password, we will add the class that indicates a strong password. However, if the class isn't removed when the strong password is replaced by a weaker one, the password strength indicator will stay stuck at strong and be misleading.

Limitations of Our Password Strength Checker

To understand the limitations of the password strength checker that we have built here, let's quickly review how we are calculating the password strength.

There is a penalty for using just lowercase letters, but there is also a length bonus. The lowercase penalty also stays constant at -15. On the other hand, there is a length bonus for going above the bare-minimum 8-character length in the password. This means that the penalty will be offset by using just 5 additional lowercase letters.

We can get to a strongly rated password even more quickly by using capital letters. We will not only avoid the lowercase penalty while doing so but also get a bonus for using uppercase letters.

You might have also noticed that the algorithm currently does not take character repetition into consideration. This can result in relatively weaker passwords being mistaken as strong. The following image is a good example:

I think we can all agree that a repeating sequence of letters a or A is not a strong password. We will now do some additional checks to get a slightly better estimate of password strength. Add the following code at the bottom of the analyzeString() function, and you will be good to go.

function analyzeString(strPassword) {
    // Previous Code
    
    let lcPassword = strPassword.toLowerCase();
    let uniqueChars = new Set(lcPassword).size;
    
    if (uniqueChars <= 3) {
    bonus.uniqueChars = -Number.MAX_VALUE;
    document.querySelector("p.message").innerHTML =
      "Too Few Unique Characters.";
    } else if (uniqueChars >= 3 && uniqueChars < 6) {
    bonus.uniqueChars = -5 * (36 - uniqueChars * uniqueChars);
    } else {
    bonus.uniqueChars = 0;
    document.querySelector("p.message").innerHTML = "";
    }
}

Let's see what is going on here. We begin by converting our entire password to lowercase letters. After that, we convert it into a Set and use its size property to get the number of unique characters. If the number of unique characters is less than or equal to 3, we set the value for the uniqueChars bonus to be a large negative value. If there are at least 6 unique characters, we remove the penalty for repeated characters.

Notice the second password used in the image above—it uses many unique characters, but there is still some repetition. We can include one more check inside our analyzeString() function to check for repeating patterns. This will rely on regex and check if a sequence of 3 or more alphanumeric characters is being repeated in the password.

We will add the following code at the bottom of our analyzeString() function.

function analyzeString(strPassword) {
  // Previous Code
  
  if (checkRepetition(strPassword)) {
    bonus.repetition = -50;
  } else {
    bonus.repetition = 0;
  }
}

Here is the definition of our checkRepetition() function:

1	function checkRepetition(strPassword) {
2	return /([a-z0-9]{3,})\1/.test(strPassword);
3	}

We are simply using the test() method on the input password, and it returns true whenever there is a repeating pattern of three or more characters.

In the above image, you can see that we have successfully tackled the issue of repeating character sequences. However, I have given an example of another limitation of the password strength checker.

You can see that Pa$$W0rd$ turns up as a secure password, while in fact it'll be broken pretty soon. This is due to the simplicity of our algorithm here. We don't check for character replacements or common passwords or patterns for that matter. Doing such things would increase the difficulty of this tutorial while reducing its approachability, both of which I didn't want for this particular write-up.

Looking the input up against a dictionary is really out of the scope of this article and would require either a huge dictionary downloaded to the client side or hooking it up to a server-side system to do that. Again, I really wanted to avoid both of them this time.

Conclusion

And there you have it: how to add a user-friendly functionality, the ability to let users know the strength of a password they just entered, to your projects. Hopefully you've found this tutorial interesting, and this has been useful to you. Feel free to reuse this code elsewhere in your projects!

This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials and to learn about new JavaScript libraries.