Reference
Options and the core
createStrengthMeter(input, {
userInputs: [],
dictionary: [],
minLength: 8,
locale: undefined,
strings: undefined,
showTime: false,
showFeedback: true,
breachCheck: false,
breach: { endpoint: 'https://api.pwnedpasswords.com/range/' },
debounce: 150,
container: undefined,
theme: 'auto',
classNames: {},
onChange: (result, instance) => {},
});
| Option | Default | |
|---|---|---|
userInputs |
[] |
Their name, email, your product's name. Free guesses for an attacker. |
dictionary |
[] |
Extra words to treat as common — your brand, your city. |
minLength |
8 |
Below it nothing can score above 1. |
locale |
the document's lang |
en, ar, ur. A region finds its language. |
strings |
Your own pack, merged over the built-in one. | |
showTime |
false |
true, 'offline' or 'online'. |
showFeedback |
true |
The warning and suggestions. A bar alone teaches nothing. |
breachCheck |
false |
Off by default because it is a network call. |
debounce |
150 |
After typing stops. |
container |
after the field | Where to draw it. |
classNames |
root, bar, fill, label, feedback, time. |
Methods
const meter = createStrengthMeter(field, {});
meter.read(); // the full result
meter.setUserInputs([email.value, name.value]); // when another field changes
meter.update();
meter.destroy();
The estimate, without a meter
No DOM in it, so it runs on a server too — which is where you should also be checking, since anything in a browser can be skipped:
import { estimate } from '@devix-labs/password-strength/core';
estimate('ahmed2019!', { userInputs: ['ahmed@example.com'] });
// {
// score: 1,
// guessesLog10: 4.6,
// crackTimeOnline: 'seconds',
// crackTimeOffline: 'instantly',
// matches: [{ reason: 'common', token: 'ahmed', at: 0 }, …],
// warning: 'common',
// suggestions: ['user-input', 'year'],
// }
score is 0–4 on the same scale zxcvbn uses, so an existing bar keeps
working when the 398 kB comes out.
warning and suggestions are reason codes, not sentences, so you can
translate them, log them, or act on them:
common · breached · user-input · leet · keyboard · sequence ·
repeat · date · year · short · one-class
Two crack times, because there are two attacks
crackTimeOnline assumes ten thousand guesses a second against a rate-limited
login. crackTimeOffline assumes ten billion a second against a stolen hash.
They differ by a million, and quoting only one of them is how people end up
believing holiday1998 is fine — it is years online and minutes offline.
The breach check on its own
import { checkBreached } from '@devix-labs/password-strength/core';
await checkBreached('password'); // { breached: true, count: 37359195 }
Point endpoint at your own proxy if you would rather nothing left your origin
at all. The first five characters of the SHA-1 are all that is ever sent.
Translating
import { EN, AR, UR, packFor } from '@devix-labs/password-strength';
A pack is labels, warnings, suggestions, crackTime and periods. Every
reason code needs an entry in warnings and suggestions; there is a test that
checks all three built-in packs are complete, so a missing one cannot ship.