How To Build Configurable Random Password Generator Using Javascript In React-JS

Hello Developers, In this blog we are going to build a configurable random password generator using simple javascript

Let’s get started

First, make a new app using the following command

npx create-react-app

I have used prime-react library for checkboxes and buttons you can use any library or simple HTML elements

If you want to use the same then install prime-react in your app using the following command

npm i primereact primeicons

Then import all important files in your js file

import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import { InputNumber } from 'primereact/inputnumber';
import { Button } from 'primereact/button';

Then Paste this code in your file given below

const [generatedPassword, setGeneratedPassword] = useState('')
const [passConfig, setPassConfig] = useState({ specialChar: false, numbers: false, length: 8, upperCase: false });
const [copy, setCopy] = useState(false)

<div style={{
     display: 'flex', justifyContent: "center"
 }}>
     <div className='card' style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch', justifyContent: 'center', height: '100vh', gap: '20px', width: '250px' }}>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             <label htmlFor="ingredient1" className="ml-2">Include Special Characters ?</label>
             <Checkbox onChange={e => setPassConfig({ ...passConfig, specialChar: e.checked })} checked={passConfig.specialChar}></Checkbox>
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             <label htmlFor="ingredient1" className="ml-2">Include Uppercase Letters ?</label>
             <Checkbox onChange={e => setPassConfig({ ...passConfig, upperCase: e.checked })} checked={passConfig.upperCase}></Checkbox>
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             <label htmlFor="ingredient1" className="ml-2">Include Numbers ?</label>
             <Checkbox onChange={e => setPassConfig({ ...passConfig, numbers: e.checked })} checked={passConfig.numbers}></Checkbox>
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             <label htmlFor="ingredient1" className="ml-2">Password Length </label>
             <InputNumber size={3} style={{ height: '15px' }} onChange={e => setPassConfig({ ...passConfig, length: e.value })} value={passConfig.length}></InputNumber>
         </div>
         <span>
             <span>Generated Password: </span>
             <span style={{ overflowWrap: 'break-word' }}>{generatedPassword}</span>
         </span>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             <Button onClick={generatePassword}>Generate</Button>
             <Button onClick={() => {
                 navigator.clipboard.writeText(generatedPassword)
                 setCopy(true)
                 setTimeout(() => {
                     setCopy(false)
                 }, 2000);
             }}>{!copy ? 'Copy' : 'Copied'}</Button>
         </div>
     </div>
 </div>

Function to generate random password

const generatePassword = () => {
     let lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz'
     passConfig.numbers && (lowerCaseChars += '1234567890')
     passConfig.specialChar && (lowerCaseChars += '!@#$%^&*(){}[]=<>/,.')
     passConfig.upperCase && (lowerCaseChars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ')
     setGeneratedPassword('')
     for (let index = 0; index < passConfig.length; index++) {
         setGeneratedPassword(psw => psw + lowerCaseChars[Math.floor(Math.random() * lowerCaseChars.length)] )
     }
 }

Demo: