Building a Password Strength Checker with Vue and zxcvbn

What is zxcvbn?

zxcvbn is a password strength estimator inspired by password crackers. It recognizes and weights common patterns, such as dates, repeats, and sequences, to estimate the strength of a given password.

The Project

Our goal is to create a simple form that checks the strength of a user’s password and provides visual feedback. We’ll be covering the following steps:

• Creating a basic form template with Tailwind CSS
• Building the password score component with zxcvbn
• Handling button state based on the password score
• Adding a color-coded, animated progress bar to the form

Step 1: Creating a Basic Form Template with Tailwind CSS

We’ll start by creating a basic template for our form using Tailwind CSS. Our form will consist of an input field and a submit button.

<form>
  <input type="password" v-model="password" />
  <button>Submit</button>
</form>

Step 2: Building the Password Score Component with zxcvbn

Next, we’ll create a separate component called PasswordScore that will handle the password strength estimation using zxcvbn.

<template>
  <div>
    <p>{{ description }}</p>
  </div>
</template>

<script>
import zxcvbn from 'zxcvbn';

export default {
  props: {
    password: String
  },
  computed: {
    description() {
      const result = zxcvbn(this.password);
      return result.score;
    }
  }
}
</script>

Step 3: Handling Button State

We’ll now enable or disable the submit button based on the password score. We’ll use a computed property to determine whether the password is strong enough.

<button :disabled="score < 4">Submit</button>

computed: {
  score() {
    const result = zxcvbn(this.password);
    return result.score;
  }
}

Step 4: Adding a Color-Coded, Animated Progress Bar

Finally, we’ll add a progress bar that provides visual feedback on the password strength. We’ll use a separate component called BaseProgressBar.

<template>
  <div>
    <div class="progress-bar" :style="{ width: `${width}%` }"></div>
  </div>
</template>

<script>
export default {
  props: {
    width: Number
  }
}
</script>

computed: {
  width() {
    const result = zxcvbn(this.password);
    return result.score * 25;
  }
}