Build a Simple React JavaScript Interactive Interactive Password Generator: A Beginner’s Guide

Written by

learnmodernjavascript

in

In today’s digital world, strong and unique passwords are more critical than ever. We’re constantly juggling multiple accounts, and the risk of cyber threats looms large. Remembering complex passwords, however, can be a real headache. This is where a password generator comes in handy. It’s a simple tool that can create robust, random passwords for you, eliminating the need to come up with and memorize them yourself. In this tutorial, we’ll build a password generator using React.js. This project is ideal for beginners, offering a practical way to learn React fundamentals while creating something useful.

Why Build a Password Generator?

Creating a password generator is an excellent way to learn React. It allows you to:

  • Practice State Management: You’ll learn how to manage the different states of your application, such as password length, character sets, and the generated password itself.
  • Work with User Input: You’ll handle user input through form elements, allowing users to customize their password generation.
  • Understand Event Handling: You’ll use event handlers to respond to user interactions, such as button clicks and input changes.
  • Apply Conditional Rendering: You’ll render different components or elements based on the application’s state.
  • Build a Practical Tool: You’ll create a tool that you can use daily, making the learning process more engaging and rewarding.

Furthermore, building a password generator is a great project to add to your portfolio, showcasing your React skills to potential employers or clients.

Prerequisites

Before we begin, you’ll need the following:

  • Basic knowledge of HTML, CSS, and JavaScript: You should be familiar with the fundamentals of web development.
  • Node.js and npm (or yarn) installed: These are required to manage project dependencies and run the development server.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor of your choice.

Setting Up the Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app password-generator

This command creates a new directory named “password-generator” with all the necessary files to get your React application up and running. Once the project is created, navigate into the project directory:

cd password-generator

Now, start the development server:

npm start

This will open your React app in your default web browser, usually at http://localhost:3000. You should see the default Create React App welcome screen. Before we proceed, clean up the boilerplate code. Open the `src/App.js` file and replace its contents with the following:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Password Generator</h1>
      </header>
    </div>
  );
}

export default App;

Also, clear the contents of `src/App.css` and add some basic styling to center the content:

.App {
  text-align: center;
  font-family: sans-serif;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Building the Password Generator Components

Our password generator will consist of several key components:

  • Password Display: This component will display the generated password.
  • Settings: This component will allow the user to customize the password generation criteria.
  • Generate Button: This button will trigger the password generation process.

Let’s start with the `PasswordDisplay` component. Create a new file named `src/components/PasswordDisplay.js` and add the following code:

import React from 'react';

function PasswordDisplay({ password }) {
  return (
    <div className="password-display">
      <input type="text" value={password} readOnly />
      <button>Copy</button>
    </div>
  );
}

export default PasswordDisplay;

This component takes a `password` prop and displays it in an input field. We’ve also included a “Copy” button, which we’ll implement later. Let’s add some basic styling in `src/components/PasswordDisplay.css`:

.password-display {
  margin-bottom: 20px;
}

.password-display input {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 16px;
}

.password-display button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.password-display button:hover {
  background-color: #3e8e41;
}

Now, let’s create the `Settings` component. Create a new file named `src/components/Settings.js` and add the following code:

import React from 'react';

function Settings({ length, setLength, includeLowercase, setIncludeLowercase, includeUppercase, setIncludeUppercase, includeNumbers, setIncludeNumbers, includeSymbols, setIncludeSymbols }) {
  return (
    <div className="settings">
      <label htmlFor="passwordLength">Password Length: </label>
      <input
        type="number"
        id="passwordLength"
        min="6"
        max="64"
        value={length}
        onChange={(e) => setLength(parseInt(e.target.value, 10))}
      />
      <div className="checkbox-group">
        <label>
          <input
            type="checkbox"
            checked={includeLowercase}
            onChange={(e) => setIncludeLowercase(e.target.checked)}
          />
          Include Lowercase
        </label>
        <label>
          <input
            type="checkbox"
            checked={includeUppercase}
            onChange={(e) => setIncludeUppercase(e.target.checked)}
          />
          Include Uppercase
        </label>
        <label>
          <input
            type="checkbox"
            checked={includeNumbers}
            onChange={(e) => setIncludeNumbers(e.target.checked)}
          />
          Include Numbers
        </label>
        <label>
          <input
            type="checkbox"
            checked={includeSymbols}
            onChange={(e) => setIncludeSymbols(e.target.checked)}
          />
          Include Symbols
        </label>
      </div>
    </div>
  );
}

export default Settings;

This component includes:

  • A password length input field.
  • Checkbox options for including lowercase letters, uppercase letters, numbers, and symbols.

Add some styling to `src/components/Settings.css`:

.settings {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.settings label {
  display: block;
  margin-bottom: 10px;
}

.settings input[type="number"] {
  width: 50px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 10px;
}

.checkbox-group label {
  display: block;
  margin-bottom: 5px;
}

Finally, let’s create the `GenerateButton` component. Create a new file named `src/components/GenerateButton.js` and add the following code:

import React from 'react';

function GenerateButton({ onClick }) {
  return (
    <button className="generate-button" onClick={onClick}>Generate Password</button>
  );
}

export default GenerateButton;

This component is a simple button that triggers the password generation. Add some styling to `src/components/GenerateButton.css`:

.generate-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.generate-button:hover {
  background-color: #0056b3;
}

Integrating the Components in App.js

Now, let’s integrate these components into our `App.js` file. Update `src/App.js` with the following code:

import React, { useState, useCallback } from 'react';
import './App.css';
import PasswordDisplay from './components/PasswordDisplay';
import Settings from './components/Settings';
import GenerateButton from './components/GenerateButton';
import generatePassword from './utils/generatePassword';
import './components/PasswordDisplay.css';
import './components/Settings.css';
import './components/GenerateButton.css';

function App() {
  const [password, setPassword] = useState('');
  const [length, setLength] = useState(12);
  const [includeLowercase, setIncludeLowercase] = useState(true);
  const [includeUppercase, setIncludeUppercase] = useState(true);
  const [includeNumbers, setIncludeNumbers] = useState(true);
  const [includeSymbols, setIncludeSymbols] = useState(true);

  const handleGeneratePassword = useCallback(() => {
    const newPassword = generatePassword({
      length,
      includeLowercase,
      includeUppercase,
      includeNumbers,
      includeSymbols,
    });
    setPassword(newPassword);
  }, [length, includeLowercase, includeUppercase, includeNumbers, includeSymbols]);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Password Generator</h1>
        <PasswordDisplay password={password} />
        <Settings
          length={length}
          setLength={setLength}
          includeLowercase={includeLowercase}
          setIncludeLowercase={setIncludeLowercase}
          includeUppercase={includeUppercase}
          setIncludeUppercase={setIncludeUppercase}
          includeNumbers={includeNumbers}
          setIncludeNumbers={setIncludeNumbers}
          includeSymbols={includeSymbols}
          setIncludeSymbols={setIncludeSymbols}
        />
        <GenerateButton onClick={handleGeneratePassword} />
      </header>
    </div>
  );
}

export default App;

Here, we:

  • Imported the components we created.
  • Defined state variables to manage the password, password length, and the inclusion of different character types.
  • Created a `handleGeneratePassword` function that calls the `generatePassword` function (we’ll create this function next) and updates the `password` state. We use `useCallback` to prevent unnecessary re-renders.
  • Rendered the components, passing the necessary props.

Implementing the Password Generation Logic

Now, let’s implement the core password generation logic. Create a new file named `src/utils/generatePassword.js` and add the following code:

function generatePassword({
  length = 12,
  includeLowercase = true,
  includeUppercase = true,
  includeNumbers = true,
  includeSymbols = true,
}) {
  const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const numberChars = '0123456789';
  const symbolChars = '!@#$%^&*()_+=-`~[]{}|;':",./<>?';

  let allowedChars = '';
  if (includeLowercase) allowedChars += lowercaseChars;
  if (includeUppercase) allowedChars += uppercaseChars;
  if (includeNumbers) allowedChars += numberChars;
  if (includeSymbols) allowedChars += symbolChars;

  let password = '';
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * allowedChars.length);
    password += allowedChars[randomIndex];
  }

  return password;
}

export default generatePassword;

This function:

  • Defines character sets for lowercase, uppercase, numbers, and symbols.
  • Conditionally adds character sets to `allowedChars` based on the user’s settings.
  • Generates the password by randomly selecting characters from `allowedChars`.

Adding the Copy to Clipboard Functionality

Let’s add the functionality to copy the generated password to the clipboard. Update the `src/components/PasswordDisplay.js` file with the following code:

import React, { useState } from 'react';

function PasswordDisplay({ password }) {
  const [isCopied, setIsCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(password);
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 1500);
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  };

  return (
    <div className="password-display">
      <input type="text" value={password} readOnly />
      <button onClick={handleCopy}>{isCopied ? 'Copied!' : 'Copy'}</button>
    </div>
  );
}

export default PasswordDisplay;

Here, we:

  • Added a `isCopied` state variable to manage the button text.
  • Implemented the `handleCopy` function, which uses the `navigator.clipboard.writeText()` method to copy the password to the clipboard.
  • Added a `try…catch` block to handle potential errors.
  • Updated the button text to indicate when the password has been copied.

Addressing Common Mistakes and Errors

Here are some common mistakes and how to fix them:

  • Incorrect Imports: Double-check that all components and functions are imported correctly. Make sure the file paths are accurate.
  • State Management Issues: Ensure your state variables are updated correctly using `useState` and that you’re passing the correct props to your components.
  • Event Handler Problems: Verify that your event handlers are correctly attached to the appropriate elements and that they are being triggered as expected.
  • Browser Compatibility: The `navigator.clipboard.writeText()` method might not be supported in all browsers or require specific permissions. Test your application in different browsers to ensure compatibility.
  • Unnecessary Re-renders: Use `useCallback` to memoize functions that are passed as props to child components to prevent unnecessary re-renders.

Testing the Application

After implementing all the components and functionalities, it’s essential to test your application thoroughly. Here’s how you can test it:

  • Password Generation: Check if the password is generated correctly based on the selected criteria (length, character types).
  • Password Length: Verify that the password length is as specified in the settings.
  • Character Inclusion: Ensure that the generated password includes the selected character types (lowercase, uppercase, numbers, symbols).
  • Copy to Clipboard: Test the “Copy” button and confirm that the password is successfully copied to the clipboard.
  • Edge Cases: Test with different combinations of settings and edge cases (e.g., very short or very long passwords, only one character type selected).
  • User Interface: Check the visual appearance and responsiveness of the user interface.

SEO Best Practices

To ensure your React password generator ranks well on Google and Bing, follow these SEO best practices:

  • Keyword Research: Identify relevant keywords (e.g., “password generator,” “React password generator,” “secure password”) and incorporate them naturally into your content, including the title, headings, and body text.
  • Meta Description: Write a compelling meta description (max 160 characters) that summarizes the content and includes your target keywords.
  • Header Tags: Use header tags (<h2>, <h3>, <h4>) to structure your content logically and improve readability.
  • Image Optimization: Use descriptive filenames and alt text for any images you include.
  • Internal Linking: Link to other relevant pages on your website.
  • Mobile-Friendliness: Ensure your application is responsive and works well on all devices.
  • Content Quality: Provide high-quality, original content that is informative, engaging, and easy to understand.
  • Page Speed: Optimize your code and images to ensure your page loads quickly.

Key Takeaways

  • You’ve learned how to build a password generator using React.js.
  • You’ve practiced state management, user input handling, and event handling.
  • You’ve created a practical tool that you can use daily.
  • You’ve learned about common mistakes and how to fix them.
  • You’ve gained experience in React development and are ready to tackle more complex projects.

FAQ

  1. How can I deploy this password generator?
    You can deploy your React application using platforms like Netlify, Vercel, or GitHub Pages. These platforms provide easy deployment options for static websites.
  2. Can I customize the character sets?
    Yes, you can extend the functionality to allow users to customize the character sets used for password generation, providing more control over the types of characters included in the passwords.
  3. What other features can I add?
    You can add features like password strength indicators, password history, or the ability to save generated passwords.
  4. How can I improve the security of the generated passwords?
    While this generator creates random passwords, always use a secure connection (HTTPS) when transmitting or storing passwords. Consider using a well-vetted password manager for storing passwords.
  5. Why is my “Copy” button not working?
    Ensure you’re running the application in a secure context (HTTPS) or your browser may block clipboard access. Also, check for any console errors that might indicate an issue with the `navigator.clipboard.writeText()` method.

Building a password generator in React is more than just a coding exercise; it’s a valuable learning experience that reinforces key React concepts while producing a practical tool. As you experiment with different settings, incorporate more features, and refine your code, you’ll not only strengthen your React skills, but also gain a deeper appreciation for the importance of digital security. This project serves as a solid foundation for further exploring React development and creating more sophisticated web applications. The knowledge gained from this project can be applied to many other projects, making it a valuable tool in your developer’s toolkit.

More posts