React Frontend Password Validation (Strong Password)

In developing applications, we want to ensure our users input a password with a specific set of criteria (length, special characters, etc). Often the case, this is for security purposes to protect users. The users must know these rules when signing up, preferably displayed to them in the UI. This tutorial will show a very nice library of how to do exactly that in React.

Step 1-) Download the package react-password-checklist:

https://www.npmjs.com/package/react-password-checklist

    > npm install --save react-password-checklist

    > yarn add react-password-checklist

Step 2-) Import in your component:

   import PasswordChecklist from "react-password-checklist";

Step 3-) Paste the following into your return section for your component:

<PasswordChecklist

  rules={["minLength", "specialChar", "number", "capital", "match", "lowercase"]}

  minLength={8} value={password} valueAgain={confirmPassword}

/>

As you can see above we have the {password} and {confirmPassword} fields. These fields correspond to the given value names you give to the signup form components. My fields look as follows:

The code I used to define the Password* and Confirm Password* fields look like this:

<TextField label='Password' placeholder='Enter password' onChange={handlePassword} 
  value={password} variant="standard" type={passwordShown ? "text" : "password"} fullWidth required />

<TextField label='Confirm Password' placeholder='Enter password' onChange={handleConfirmPassword} value={confirmPassword} variant="standard" 
  type={passwordShown ? "text" : "password"} fullWidth required />

I just wanted to show how the "value" and "valueAgain" fields match those specified in the corresponding text fields.

Furthermore, we can define other rules such as the minLength or other characters we desire for the user in their passwords, such as needing a lowercase, uppercase, number, etc. Once that is done that is all you need to show the user they are inputting a password based on your rules, and it should look something as follows:

Conclusion:

This package is nice because a lot of the heavy-duty lifting such as the dynamic checking of values, displaying of the checks and X's, and the text itself e.g. "Passwords match" (Image 2), is handled by this library. You just have to worry about wiring it to the corresponding components and assigning your own rules, and then you are good to go! Best of all, it is free to use and saves a lot of time. Hope this helped, thanks for reading.

Create a free account to access full content.

All access to code and resources on ShillehTek.

Signup Now

Already a member? Sign In

Explore More on Our Blog

How to Use ADS1115 with the Raspberry Pi (Part 1)

How to Use ADS1115 with the Raspberry Pi (Part 1)

Discover how to expand your Raspberry Pi projects by integrating the ADS1115 ADC for precise analog signal reading....

How to Install Pip Packages in AWS Lambda Using Docker and ECR

How to Install Pip Packages in AWS Lambda Using Docker and ECR

Learn how to streamline AWS Lambda deployments by using Docker and Amazon Elastic Container Registry (ECR) to package...

Create Tabular Product Descriptions on Your Shopify Store

Create Tabular Product Descriptions on Your Shopify Store

Enhance your Shopify store's product pages with our comprehensive guide on implementing tabular descriptions. Learn how to add a...

SSH Into Raspberry Pi with Tailscale VPN

SSH Into Raspberry Pi with Tailscale VPN

Effortlessly access and manage your Raspberry Pi from anywhere using Tailscale's secure mesh VPN.

Send Email with Lua and the ESP32

Send Email with Lua and the ESP32

In this tutorial, we delve into sending emails with the ESP32-S3 using Lua, focusing on the Xedge IDE's built-in SMTP...

How to Code with Lua on ESP32 with XEdge32

How to Code with Lua on ESP32 with XEdge32

Learn how to set up Xedge32 and start coding on the ESP32-S3 with Lua programming!

Stream Audio From Raspberry Pi to Local Computer

Stream Audio From Raspberry Pi to Local Computer

Discover the simplicity of streaming live audio directly from a USB microphone connected to your Raspberry Pi to...

SSH Raspberry Pi via Cell Phone

SSH Raspberry Pi via Cell Phone

This beginner-friendly guide will walk you through remotely controlling your Raspberry Pi using SSH through your cell phone.

Remotely Control Raspberry Pi via SSH from External Network

Remotely Control Raspberry Pi via SSH from External Network

Learn how to SSH into your Raspberry Pi from any network. This is critical in IoT since you can control...

Stream Video from Raspberry Pi Camera to YouTube Live

Stream Video from Raspberry Pi Camera to YouTube Live

Learn how to stream to YouTube from a Raspberry Pi Camera.

Back to blog

Leave a comment

Please note, comments need to be approved before they are published.