Password Generator in React

by | Oct 20, 2021 | React | 0 comments

In this tutorial, I'll show you how to build a strong Password Generator with React JS. This project adds two npm packages using react-icons and react toastify notifications. Scroll down to the end of the page to you can see the GitHub repository full source code available for this.

Creating a very strong passwords generator is complex with multiple types of characters, including symbols, numbers, uppercase letters and lowercase letters and these unique generator passwords are your best defense against online threats.A unique Strong password generates totally random passwords.

Password Strength Checker in React

Setup

First, we'll create the react project and install the two npm packages. In open your system terminal/command line enter the code below : 

npx create-react-app password-generator
cd password-generator
npm install --save react-toastify
npm install react-icons --save
npm start

Next, Project structure your folder as follows. 

src
├── App.css
├── App.js
├── index.css
└── index.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 { toast, ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import './App.css'
import { AiOutlineCopy } from "react-icons/ai";

 const numbers = '0123456789'
 const upperCaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
 const lowerCaseLetters = 'abcdefghijklmnopqrstuvwxyz'
 const specialCharacters = "!'^+%&/()=?_#$½§{[]}|;:>÷`<.*-@é"
 
function App() {
  const [password, setPassword] = useState('')
  const [passwordLength, setPasswordLength] = useState(20)
  const [includeUppercase, setIncludeUppercase] = useState(false)
  const [includeLowercase, setIncludeLowercase] = useState(false)
  const [includeNumbers, setIncludeNumbers] = useState(false)
  const [includeSymbols, setIncludeSymbols] = useState(false)

  const handleGeneratePassword = (e) => {
    if (!includeUppercase && !includeLowercase && !includeNumbers && !includeSymbols) {
      toast.error('You must Select atleast one option', {position: "top-center"});
    }
    let characterList = '';
    if (includeLowercase) {
      characterList = characterList + lowerCaseLetters;
    }
    if (includeUppercase) {
      characterList = characterList + upperCaseLetters;
    }
    if (includeNumbers) {
      characterList = characterList + numbers;
    }
    if (includeSymbols) {
      characterList = characterList + specialCharacters;
    }
    setPassword(createPassword(characterList))
  }
  const createPassword = (characterList) => {
    let password = '';
    const characterListLength = characterList.length;
    for (let i = 0; i < passwordLength; i++) {
      const characterIndex = Math.round(Math.random() * characterListLength);
      password = password + characterList.charAt(characterIndex);
    }
    return password;
  }

  const copyToClipboard = () => {
    const newTextArea = document.createElement('textarea');
    newTextArea.innerText = password;
    document.body.appendChild(newTextArea);
    newTextArea.select();
    document.execCommand('copy');
    newTextArea.remove();
  }

  const handleCopyPassword = (e) => {
    if (password === '') {
      toast.error('Nothing To Copy', {position: "top-center"});
    } else {
      copyToClipboard();
      toast.success('Password successfully copied to clipboard', {position: "top-center"});
    }
  }

  return (
    <div className='App'>
      <h1>Password Generator in React</h1>
      <ToastContainer/>
      <div className='wrapper'>
        <div className='generator'>
          <div className='generator__password'>
            <h3>{password}</h3>
            <button onClick={handleCopyPassword} className='copy__btn'>
              <AiOutlineCopy />
            </button>
          </div>
          <div className='form-group'>
            <label htmlFor='password-strength'>Password length</label>
            <input
              defaultValue={passwordLength}
              onChange={(e) => setPasswordLength(e.target.value)}
              type='number'
              id='password-strength'
              name='password-strength'
              max='20'
              min='10'
            />
          </div>
          <div className='form-group'>
            <label htmlFor='uppercase-letters'>Include Uppercase Letters</label>
            <input
              checked={includeUppercase}
              onChange={(e) => setIncludeUppercase(e.target.checked)}
              type='checkbox'
              id='uppercase-letters'
              name='uppercase-letters'
            />
          </div>
          <div className='form-group'>
            <label htmlFor='lowercase-letters'>Include Lowercase Letters</label>
            <input
              checked={includeLowercase}
              onChange={(e) => setIncludeLowercase(e.target.checked)}
              type='checkbox'
              id='lowercase-letters'
              name='lowercase-letters'
            />
          </div>
          <div className='form-group'>
            <label htmlFor='include-numbers'>Include Numbers</label>
            <input
              checked={includeNumbers}
              onChange={(e) => setIncludeNumbers(e.target.checked)}
              type='checkbox'
              id='include-numbers'
              name='include-numbers'
            />
          </div>
          <div className='form-group'>
            <label htmlFor='include-symbols'>Include Symbols</label>
            <input
              checked={includeSymbols}
              onChange={(e) => setIncludeSymbols(e.target.checked)}
              type='checkbox'
              id='include-symbols'
              name='include-symbols'
            />
          </div>
          <button onClick={handleGeneratePassword} className='gr__log__button'>
            Generate Password
          </button>
        </div>
      </div>
    </div>
  )
}
export default App

Conclusion

In this article, you’ve learned the unique strong Password Generator with 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

Create Unique strong Password Generator in React

To get started with the Password Generator form no library added. React hook using Generator password form some Key features and highlights are:

  • Password generate very strong.
  • It randomly generates a unique password
  • It is multiple types of characters include uppercase letters and lower case letters, numbers, strings, and special characters.
  • Password Generator in React
  • Generate a random password in React
  • How to generate unique password in React js
  • js generate random strong password Code Example

Password Strength Checker in React