Search: Dictionary All Posts
Store Your Knowledge at the Brain Bank!
Password Strength Meter
By Jamie in Lessons / Programming - React 3.11.19 (Source)
Summary - Build a password strength meter based on zxcvbn password checker.
0 Loves
The source link in this article does a great job of explaining the Password Strength Meter. Just copy all his code.
The one thing it is missing is how to check the password strength on the registration page.
You do this by simply requiring zxcvbn and using this function in your onSubmit...
const passwordStrength = zxcvbn(this.state.password);
if(passwordStrength.score < 3) {
this.setState({ message: 'Password must be good or strong!', loading: false })
return
}
Scores are 1,2,3,4 - or weak, fair, good, strong
Good is still pretty strong so go with 3 or 4.
The one thing it is missing is how to check the password strength on the registration page.
You do this by simply requiring zxcvbn and using this function in your onSubmit...
const passwordStrength = zxcvbn(this.state.password);
if(passwordStrength.score < 3) {
this.setState({ message: 'Password must be good or strong!', loading: false })
return
}
Scores are 1,2,3,4 - or weak, fair, good, strong
Good is still pretty strong so go with 3 or 4.