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.
