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
 
iammtander 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";
}