How to create a Password Checklist in ReactJS?

Nowadays, applications use a one-time password or magic link for authentication, but we can?t ignore the authentication using the username and password.

Whenever we allow users to register with a username and password, we should ensure that the password users have entered is strong. So, it can be unbreakable by hackers.

In this tutorial, we will learn to verify the security level of the password in ReactJS.

Create a Custom Validation Algorithm

We can create a custom validation algorithm to check if the password is strong or weak. We can create regular expressions for lowercase, uppercase, and numeric letters.

After that, we can use the match() method to match the password string with the regular expression. If any password string doesn?t match with any regular expression, we can show the message that the password is weak.

Syntax

Users can follow the syntax below to use the regular expressions to validate the password by creating the custom algorithm.

var lowerCase = /[a-z]/g;
var upperCase = /[A-Z]/g;
var numbers = /[0-9]/g;
let bool = new_pass.match(regex) 

In the above syntax, we have different regular expressions. We have used the match() method with every regular expression and got the result in the bool variable.

Algorithm

Step 1 - Create a regular expression for lowercase, uppercase, and numeric letters.

Step 2 - Use the match() method to match the password with a lowercase regular expression. If the match() method returns false, set an error message.

Step 3 - Match the numeric and uppercase regular expression with a password, and set the error message accordingly boolean value it returns.

Step 4 - Next, check the length of the password at last. If the length is less than 10, also set the error message.

Example 1

In the example below, we have created the password input. Whenever the user changes the password value, it will invoke the handlePassword() function. In the handlePassword() function, we have created various regular expressions and are matching them with the password string using the match() method.

In the output, users can see that if the password doesn?t follow any condition, it will show the error message accordingly.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>password<span class="token punctuation">,</span> setPassword<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Abc.@678"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>errorMessage<span class="token punctuation">,</span> setErrorMessage<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">function</span> <span class="token function">handlePassword</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> new_pass <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      <span class="token function">setPassword</span><span class="token punctuation">(</span>new_pass<span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token comment">// regular expressions to validate password</span>
      <span class="token keyword">var</span> lowerCase <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> upperCase <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[A-Z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> numbers <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[0-9]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>new_pass<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>lowerCase<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Password should contains lowercase letters!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>new_pass<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>upperCase<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Password should contain uppercase letters!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>new_pass<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Password should contains numbers also!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>new_pass<span class="token punctuation">.</span>length <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">setErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Password length should be more than 10."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
         <span class="token function">setErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Password is strong!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
      <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div<span class="token operator">></span>
         <span class="token operator"><</span>h2<span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
            Validate the password by creating the custom algorithm <span class="token keyword">in</span> ReactJS<span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
         <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
         <span class="token operator"><</span>input type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span>password<span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handlePassword<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>div style <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token punctuation">{</span>errorMessage<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</div>

Output

Use the React Password Checklist NPM package

The best thing about ReactJS is that it contains various libraries; we can use it directly in our app by installing it. The react-password-checklist library allows us to check the strength of the password based on various conditions.

For example, it validates the minimum and maximum length of the password, capital case, number, etc. Developers need to pass the props in the PasswordChecklist component, which validates the password accordingly.

Execute the below command to install the react-password-checklist in our app.

npm i react-password-checklist 

Syntax

Users can follow the syntax below to use the react-password-checklist NPM package to validate the password.

<PasswordChecklist
   rules={["capital", "match", "specialChar", "minLength", "number"]}
   minLength={8}
   value={password}
   valueAgain={matchPassword}
/>

In the above syntax, we have used the PasswordChecklist component and passed props to validate the password.

Example 2

In the example below, we have imported the react-password-checklist library and used it as a component. We have passed the rules as a prop in the array format to validate the password. Also, we have bound the password to the value and the passwordMatch to the valueAgain in the PasswordCheckList component.

In the output, users can observe the cross sign before the message that rule doesn?t follow the password string.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> PasswordChecklist <span class="token keyword">from</span> <span class="token string">"react-password-checklist"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>password<span class="token punctuation">,</span> setPassword<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Abc.@678"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>matchPassword<span class="token punctuation">,</span> setMatchPassword<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"ABC.@678"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>errorMessage<span class="token punctuation">,</span> setErrorMessage<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">function</span> <span class="token function">handleSetPassword</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setPassword</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">function</span> <span class="token function">handleSetMatchPassword</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setMatchPassword</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div<span class="token operator">></span>
         <span class="token operator"><</span>h2<span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
            Validate the password using the <span class="token operator"><</span>i<span class="token operator">></span> react<span class="token operator">-</span>password<span class="token operator">-</span>checklist <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token keyword">in</span> ReactJS<span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
         <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
         <span class="token operator"><</span>div<span class="token operator">></span> Enter the password<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
         <span class="token operator"><</span>input type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span>password<span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleSetPassword<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>div<span class="token operator">></span> Enter the password Again<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
         <span class="token operator"><</span>input
            type <span class="token operator">=</span> <span class="token string">"text"</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>matchPassword<span class="token punctuation">}</span>
            onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleSetMatchPassword<span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>PasswordChecklist
            rules <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"capital"</span><span class="token punctuation">,</span> <span class="token string">"match"</span><span class="token punctuation">,</span> <span class="token string">"specialChar"</span><span class="token punctuation">,</span> <span class="token string">"minLength"</span><span class="token punctuation">,</span> <span class="token string">"number"</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
            minLength <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>password<span class="token punctuation">}</span>
            valueAgain <span class="token operator">=</span> <span class="token punctuation">{</span>matchPassword<span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</div>

Output

Example 3

In the example below, we have set up the custom validation message for every rule of password checking. Users can see how we have passed the message object as a prop of the PasswordChecklist component. In the message object, we have used the rule as a key and the message as its value.

<div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> PasswordChecklist <span class="token keyword">from</span> <span class="token string">"react-password-checklist"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>password<span class="token punctuation">,</span> setPassword<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Abc.@678"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>matchPassword<span class="token punctuation">,</span> setMatchPassword<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"ABC.@678"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>errorMessage<span class="token punctuation">,</span> setErrorMessage<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">function</span> <span class="token function">handleSetPassword</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setPassword</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">function</span> <span class="token function">handleSetMatchPassword</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setMatchPassword</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div<span class="token operator">></span>
         <span class="token operator"><</span>h2<span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
            Validate the password using the <span class="token operator"><</span>i<span class="token operator">></span> react<span class="token operator">-</span>password<span class="token operator">-</span>checklist <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token keyword">in</span> ReactJS<span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
         <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
         <span class="token operator"><</span>div<span class="token operator">></span> Enter the password<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
         <span class="token operator"><</span>input type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span>password<span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleSetPassword<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>div<span class="token operator">></span> Enter the password Again<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
         <span class="token operator"><</span>input
            type <span class="token operator">=</span> <span class="token string">"text"</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>matchPassword<span class="token punctuation">}</span>
            onChange <span class="token operator">=</span> <span class="token punctuation">{</span>handleSetMatchPassword<span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
         <span class="token operator"><</span>PasswordChecklist
            rules <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">[</span>
               <span class="token string">"capital"</span><span class="token punctuation">,</span>
               <span class="token string">"match"</span><span class="token punctuation">,</span>
               <span class="token string">"specialChar"</span><span class="token punctuation">,</span>
               <span class="token string">"minLength"</span><span class="token punctuation">,</span>
               <span class="token string">"lowercase"</span><span class="token punctuation">,</span>
               <span class="token string">"number"</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">}</span>
            minLength <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span>
            value <span class="token operator">=</span> <span class="token punctuation">{</span>password<span class="token punctuation">}</span>
            valueAgain <span class="token operator">=</span> <span class="token punctuation">{</span>matchPassword<span class="token punctuation">}</span>
            messages <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>
               minLength<span class="token operator">:</span> <span class="token string">"The minimum length of the password should be 10."</span><span class="token punctuation">,</span>
               specialChar<span class="token operator">:</span>
               <span class="token string">"The password should contain at least one special character."</span><span class="token punctuation">,</span>
               number<span class="token operator">:</span> <span class="token string">"The password should contain at least one numeric letter."</span><span class="token punctuation">,</span>
               capital<span class="token operator">:</span> <span class="token string">"The password should contain at least one uppercase letter."</span><span class="token punctuation">,</span>
               match<span class="token operator">:</span> <span class="token string">"Password and password again should match."</span><span class="token punctuation">,</span>
               lowercase<span class="token operator">:</span> <span class="token string">"The password should contain at least one lowercase letter."</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span>
         <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</div>

Output