Generate a random password in React

In this short article, we’ll show you how to generate a random password in React. Here, we will create a small demo to generate a random password with different options such as lowercase/uppercase string, number and symbols.

You will find similar articles that are created using the React NPM Package.

Steps to generate a random password in React

1. Create react application
2. Install npm dependency
3. React component to generate a random password
4. Output

1. Create react application

First of all, we will create a startup react application using the `create-react-app` package. Run the following command to create a react app.

npx create-react-app generate-random-password-react

2. Install npm dependency

Here, we’ll use the generate-password npm package to generate a random strong password. Run the following command to install the package.

npm i generate-password

3. React component to generate a random password

Using the `generate-password` package, we can generate a strong random password. Use the following code snippet.

var generator = require('generate-password');

var password = generator.generate({
    length: 10,
    numbers: true
});

// 'eEyDTw31v9'
console.log(password);

For demo purposes, we will create a react component with many options such as lowercase, uppercase, numbers and symbols in the form of checkboxes. Depending on the checkbox selection, we will update the options for password generation.

App.js

import React, { useState } from "react";
import generator from "generate-password";

function App() {
  const [password, setPassword] = useState('');
  const [length, setLength] = useState(10);
  const [isLowerCase, setIsLowerCase] = useState(true);
  const [isUpperCase, setIsUpperCase] = useState(false);
  const [isNumbers, setIsNumbers] = useState(false);
  const [isSymbols, setIsSymbols] = useState(false);

  const generatePassword = () => {
    const pwd = generator.generate({
      length: length,
      lowercase: isLowerCase,
      uppercase: isUpperCase,
      numbers: isNumbers,
      symbols: isSymbols
    });
    setPassword(pwd);
  }

  return (
    <div>
      <h5>Generate a random password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>
      <div class="container">
        <div class="row">
          <div class="col">
            <label>
              <span class="lbl-len">Length:</span>
              <input type="number" class="input-len form-control" value={length} onchange="{e" ==""> setLength(e.target.value)}
              />
            </label>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label class="form-control">
              <input type="checkbox" class="mr-1" checked onchange="{()" ==""> setIsLowerCase(val => !val)}
              />
              <span>LowerCase</span>
            </label>
          </div>
          <div class="col">
            <label class="form-control">
              <input type="checkbox" class="mr-1" checked onchange="{()" ==""> setIsUpperCase(val => !val)}
              />
              <span>UpperCase</span>
            </label>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label class="form-control">
              <input type="checkbox" class="mr-1" checked onchange="{()" ==""> setIsNumbers(val => !val)}
              />
              <span>Numbers</span>
            </label>
          </div>
          <div class="col">
            <label class="form-control">
              <input type="checkbox" class="mr-1" checked onchange="{()" ==""> setIsSymbols(val => !val)}
              />
              <span>Symbols</span>
            </label>
          </div>
        </div>
        <small>Note: At least one should be true.</small>
        <div class="row">
          <div class="col">
            <input type="button" class="btn btn-dark mt-2 mb-3" value="Generate Password" onclick={generatePassword}>
            <div>
              Password: {password}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

4. Output

Run the application and check the output in the browser.

Output - Generate a random password in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project