DEV Community

Cover image for Real-Time Password Strength Checking for Wrium
Benyamin Khalife
Benyamin Khalife

Posted on

Real-Time Password Strength Checking for Wrium

#security #webdev #opensource #javascript

We've all seen it: a signup form that happily accepts password123 and only complains after the server says no. Or worse, it doesn't complain at all.

I wanted a tiny, drop-in way to give users feedback while they type, so I built Wrium Password Strength, a plugin for Wrium.

What it does

It adds a single directive, v-password-strength, that checks a password on every input and tells you whether it's good enough. Under the hood it:

  • Blocks exact or substring matches against a common-password list
  • Flags sequential runs (abc, 123) and repeated characters (aaaa)
  • Scores character variety: lowercase, uppercase, digits, symbols

The plugin itself has zero dependencies. It only needs Wrium as a peer dependency.

Install 

npm install @wrium/password-strength
Enter fullscreen mode Exit fullscreen mode

@wrium/wrium is a peer dependency, so install it too if you haven't already.

Usage

Register the plugin and set your rules:

import { createApp, ref } from '@wrium/wrium';
import { PasswordStrengthPlugin } from '@wrium/password-strength';

createApp(() => ({
    password: ref(''),
    strength: ref(null)
}))
    .use(PasswordStrengthPlugin, { minLength: 10, minScore: 'good' })
    .mount('#app');
Enter fullscreen mode Exit fullscreen mode

Then use the directive in your template:

<input type="password" v-model="password" v-password-strength="strength" />
<p>Strength: {{ strength?.label }}</p>
<button :disabled="!strength?.valid">Submit</button>
Enter fullscreen mode Exit fullscreen mode

On every keystroke the directive writes { label, valid, reasons } into your ref, so you can show a label, list hints, or disable the submit button.

Not using the directive?

The same logic is exported as a pure function with no DOM and no reactivity, handy for validating before a request:

import { assessPassword } from '@wrium/password-strength';

assessPassword('correcthorsebatterystaple');
// => { label: 'fair', valid: true, reasons: ['Mix letters, numbers, and symbols'] }
Enter fullscreen mode Exit fullscreen mode

An honest note

The built-in blocklist is short. It catches the obvious offenders, but it's not a breach-database lookup. For high-stakes apps, pair it with a server-side check such as the Have I Been Pwned API. Think of this plugin as a fast, friendly first line of feedback, not your only line of defense.

Try it

It's MIT licensed. Feedback, issues, and PRs are very welcome. If you try it, I'd love to hear how it goes!

Top comments (0)