Videos
A very simple implementation of the react-password-strength-bar package, with shadcn/ui styling.
The package uses zxcbvbn, a powerful library developed by Dropbox which estimates the strength of passwords.
Hosted at: https://passwyrd.vercel.app/
Source code: https://github.com/AnthonySchneider2000/passwyrd
It has no ads or profit model, I just wanted to share it because it's something I find useful and think others may too.
I was previously working on a different project which used this setup on its registration page, and in the past few months I've found myself going back to that registration page whenever I'm making a new account, in order to check the strength of the password I'd be using for that account.
This site is a reactive, mobile-friendly interface designed to let you do this as quickly as possible.
I'd love to hear if any of you find this site useful, or end up using it when selecting a password in the future.
And of course, being an open-source project, anyone is welcome to fork the code, create issues, or submit pull-requests.
Thanks for your time and have a great day! :P
As you have already stated yourself, both functionalities are complementary; it doesn't make much sense to show the strength meter without knowing what is required or entering a password without knowing whether the qualifications have been met.
Don't Set Users Up For Failure: Use Password Guides
Sites that have password restrictions such as minimum characters, required special characters and other restrictions but do not display a guide explaining these requirements are setting users up for failure.
Don't have users take a test they didn't study for only to see the answers after they fail. The NNGroup emphasizes this point in their recommendations for website form usability (https://www.nngroup.com/articles/web-form-design/).
Password Strength Meters Help
A password strength meter is not required, but it can be helpful. Its ability to show users the strength of their password reassures them that they are making their account secure. See Maslow's Hierarchy of Needs for the necessity for psychological safety.
If a password strength meter is shown, you should explicitly mark the minimum strength allowed for an acceptable password. Without this, the feedback mechanism fails.
Hey, I'm looking for a password strength meter and I was wondering what you guys are using. I assume the easiest solution is to use zxcvbn-ts. But there might be a solution I'm missing.
In the end I might decide it's all too complex and just go for a simple solution like regex but I would like to know all available options.
Password strenght: @(GetPasswordStrength())
} @code { // Pseudo code (Entropy should be stored in a field and calculated when password is updated) private string GetPasswordStrenght() => switch(calculator.GetEntropy(password)) {...} }