Real-Time Password Strength Checking for Wrium
DEV Community

Real-Time Password Strength Checking for Wrium

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 It has zero dependencies and weighs around 1 KB. Install npm install @wrium/password-strength @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'); Then use the directive in your template: Strength: {{ strength?.label }} Submit 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'] } 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 - Repo: github.com/wrium/password-strength - Wrium: wrium.dev 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)

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.