DEV Community

Cover image for Build a password strength indicator in ReactJs.

Build a password strength indicator in ReactJs.

Swastik Yadav on March 13, 2024

Hello Devs, This feature is the latest issue of my newsletter where I am building one complex frontend feature every week. And share the breakdow...
Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

A "strong" password: LΓΆl1

Collapse
 
swastikyadav profile image
Swastik Yadav

Indeed, LΓΆl1 is very strong.

Collapse
 
mrlinxed profile image
Mr. Linxed

Yeah, except that it's not.
Image description

Thread Thread
 
swastikyadav profile image
Swastik Yadav

I was just joking bro. :-)

Collapse
 
mrlinxed profile image
Mr. Linxed

Tbh, the length of a password is the only strength indication. And should be the only criteria you'd enforce.

You'd have a better user experience and strong passwords.

It doesn't matter if a password has a unique character or not. As long as you allow for them then a potential brute forcer has to include them in their tests.

Collapse
 
swastikyadav profile image
Swastik Yadav • Edited

The password pattern I used in the post is generally accepted in the development community.

What I built is an indicator not forcing the user to go one or another way.

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

Great share!

Collapse
 
swastikyadav profile image
Swastik Yadav

Thank You!

Collapse
 
get_pieces profile image
Pieces 🌟

Great read.

Collapse
 
swastikyadav profile image
Swastik Yadav

Glad you liked it.

Collapse
 
basskibo profile image
Bojan Jagetic

Really interesting post , good job

Collapse
 
swastikyadav profile image
Swastik Yadav

Thanks for your kind words.

Collapse
 
sandeep_kamra_db541a51c0f profile image
Sandeep Kamra

It works fine in my case:

switch (score) {
case 0:
case 1:
case 2:
return "Weak";
case 3:
return "Medium";
case 4:
return "Fine";
case 5:
return "Strong";
default:
return "extra strong";
}