Password Strength Checker in React

by | Oct 20, 2021 | React | 0 comments

In this tutorial, we will learn how to build a Password strength indicator in React js. This input field with a simple password strength indicator without using any additional npm packages. Scroll down to the end of the page to you can see the GitHub repository full source code available for this.

Passwords strengths are very important in your website. This password strength checking must contain one uppercase letter, one lowercase letter, one number, and one special Character (: @$! % * ? &). Weak password indicates in red color, Fair password indicates in Tangerine Yellow, Good password indicates in Deep Sky Blue, Strong password indicates in Islamic Green enough!

Password Generator in React

Setup

First, we'll create the new app using create-react-app. In open your system terminal/command line enter the code below : 

npx create-react-app password-strength-checker
cd password-strength-checker
npm start

Next, Project structure your folder as follows. 

src
├── App.css
├── App.js
├── index.css
├── index.js
├── PasswordStrengthMeter.css
└── PasswordStrengthMeter.js

Next, open up the App.js file located in the src folder. You should see this: 

 App.js 
import React,{useState} from 'react';
import PasswordStrengthMeter from './PasswordStrengthMeter';

const App = () => {
  const [userInfo, setuserInfo] = useState({
    password: '',
  });

  const [isError, setError] = useState(null);
  const handleChangePassword = (e) => {
    let password  = e.target.value;
    setuserInfo({
      ...userInfo,
      password:e.target.value
    });
    setError(null);
    let capsCount, smallCount, numberCount, symbolCount
    if (password.length < 4) {
      setError("Password must be minimum 4 characters include one UPPERCASE, lowercase, number and special character: @$! % * ? &");
      return;
    }
    else {
      capsCount = (password.match(/[A-Z]/g) || []).length
      smallCount = (password.match(/[a-z]/g) || []).length
      numberCount = (password.match(/[0-9]/g) || []).length
      symbolCount = (password.match(/\W/g) || []).length
      if (capsCount < 1) {
        setError("Must contain one UPPERCASE letter");
        return;
      }
      else if (smallCount < 1) {
        setError("Must contain one lowercase letter");
        return;
      }
      else if (numberCount < 1) {
        setError("Must contain one number");
        return;
      }
      else if (symbolCount < 1) {
        setError("Must contain one special character: @$! % * ? &");
        return;
      }
    }
  }
  
  const [isStrength, setStrength] = useState(null);
  const dataHandler = async (childData) => {
    setStrength(childData);
  }

  const onSubmit = async (event) => {
    try {
      event.preventDefault();
      event.persist();
      console.log(userInfo.password);
    } catch (error) { throw error;} 
  };

  return (
    <div className="App">
      <h1>Password Strength Checker in React</h1>
      <div className="wrapper">
        <form onSubmit={onSubmit} className="login__Form">
          <label htmlFor="password">
            Password 
            {isError !== null && (
              <p className="errors"> - {isError}</p>
            )}
          </label>
          <input type="password" id="password" name="password" onChange={handleChangePassword} required />
          <PasswordStrengthMeter password={userInfo.password} actions={dataHandler}/>
          {isStrength === 'Strong' && 
            <button type="submit" className="gr__log__button"  > Create Account  </button>
          }
        </form>
      </div>
    </div>
  )
}
export default App

Next, open up the PasswordStrengthMeter.js file located in the src folder. You should see this: 

 PasswordStrengthMeter.js 
import React from 'react';
import './PasswordStrengthMeter.css';

const PasswordStrengthMeter = (props) => {
  const testedResult = props.password;
  const createPasswordLabel = () => {
    let score = 0
    let regexPositive = ["[A-Z]","[a-z]","[0-9]","\\W",]
    regexPositive.forEach((regex, index) => {
      if (new RegExp(regex).test(testedResult)) {
        score +=1
      }
    })
    switch (score) {
      case 0:
        return ({
          value: 0,
          info: "",
        });
      case 1:
        return ({
          value: 1,
          info: "Weak",
        });
      case 2:
        return ({
          value: 2,
          info: "Fair",
        });
      case 3:
        return ({
          value: 3,
          info: "Good",
        });
      case 4:
        return ({
          value: 4,
          info: "Strong",
        });
      default:
        return null
    }
  }
  {props.actions(createPasswordLabel().info)}

  return (<>
    <div className="password-strength-meter">
      <progress className={`password-strength-meter-progress strength-${createPasswordLabel().info}`} value={createPasswordLabel().value} max="4" />
      <br />
      <p className="password-strength-meter-label">
        {props.password && ( <>
          <p className={`password__label strength-${createPasswordLabel().info}`}>Password strength: <span>{createPasswordLabel().info} </span></p> 
        </>)}
      </p>
    </div>
  </>
   )
  }
export default PasswordStrengthMeter;

Conclusion

In this article, you’ve learned the Password Strength Checker in React js. If all the full code mentioned above is added, you will see the full source code download below it. You can also get a live demo of this tutorial on youtube.

Download

Password Generator in React

  • Password Strength Checker in React
  • Password strength checker code
  • How to Build a Password Strength Checker using React js
  • How to validate Password is strong or not in ReactJS
  • How To Build a Password Strength Meter in React