Build a Simple Next.js Password Generator: A Beginner’s Guide

Written by

FixTechToday

in

In today’s digital landscape, strong passwords are the first line of defense against cyber threats. But let’s be honest, memorizing complex, unique passwords for every account is a pain! That’s where password generators come in handy. They create secure, randomized passwords, saving you the trouble and boosting your online security. In this tutorial, we’ll build a simple password generator using Next.js, a popular React framework. This project is perfect for beginners to intermediate developers looking to learn about state management, event handling, and basic UI design in a practical context. We’ll break down the process step-by-step, making it easy to follow along, even if you’re new to Next.js.

Why Build a Password Generator?

Creating a password generator isn’t just a fun exercise; it’s a valuable learning experience. Here’s why:

  • Practical Application: You’ll build something you can actually use. Every developer needs strong passwords.
  • State Management: You’ll learn how to manage the state of your password length, character sets, and the generated password itself.
  • Event Handling: You’ll work with user interactions, such as button clicks and input changes, to trigger password generation.
  • UI Design Basics: You’ll get a taste of designing a simple, functional user interface.
  • Next.js Fundamentals: You’ll reinforce your understanding of Next.js components, pages, and potentially server-side functionality.

Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need these to install and run Next.js. You can download them from nodejs.org.
  • A Code Editor: Visual Studio Code, Sublime Text, or any editor you prefer.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these is crucial.
  • A little bit of React knowledge: Knowing the basics of React components will be helpful.

Setting Up Your Next.js Project

Let’s get started by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app password-generator

This command will create a new directory called password-generator with a basic Next.js project structure. Navigate into the project directory:

cd password-generator

Now, start the development server:

npm run dev

This will start the development server, and you should be able to view your basic Next.js application at http://localhost:3000.

Project Structure

Your project directory should look something like this:

password-generator/
├── node_modules/
├── pages/
│   └── index.js
├── public/
│   └── ...
├── styles/
│   └── globals.css
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
└── README.md

The core of our application will reside in the pages/index.js file. This is where we’ll build our user interface and implement the password generation logic.

Building the UI (index.js)

Open pages/index.js and replace the existing content with the following code. This sets up the basic layout, including a title, a password display area, and controls for password length and character sets.

import { useState } from 'react';

export default function Home() {
  const [password, setPassword] = useState('');
  const [passwordLength, setPasswordLength] = useState(12);
  const [includeUppercase, setIncludeUppercase] = useState(true);
  const [includeLowercase, setIncludeLowercase] = useState(true);
  const [includeNumbers, setIncludeNumbers] = useState(true);
  const [includeSymbols, setIncludeSymbols] = useState(true);

  const handleGeneratePassword = () => {
    // Password generation logic will go here
    setPassword('Generating...');
  };

  return (
    <div className="container">
      <h1>Password Generator</h1>
      <div className="password-display">
        <input type="text" value={password} readOnly />
      </div>
      <div className="options">
        <label htmlFor="length">Password Length: {passwordLength}</label>
        <input
          type="range"
          id="length"
          min="8"
          max="64"
          value={passwordLength}
          onChange={(e) => setPasswordLength(parseInt(e.target.value))}
        />
        <div className="checkbox-group">
          <label>
            <input type="checkbox" checked={includeUppercase} onChange={() => setIncludeUppercase(!includeUppercase)} /> Uppercase
          </label>
          <label>
            <input type="checkbox" checked={includeLowercase} onChange={() => setIncludeLowercase(!includeLowercase)} /> Lowercase
          </label>
          <label>
            <input type="checkbox" checked={includeNumbers} onChange={() => setIncludeNumbers(!includeNumbers)} /> Numbers
          </label>
          <label>
            <input type="checkbox" checked={includeSymbols} onChange={() => setIncludeSymbols(!includeSymbols)} /> Symbols
          </label>
        </div>
      </div>
      <button onClick={handleGeneratePassword}>Generate Password</button>
    </div>
  );
}

Let’s break down the code:

  • Importing useState: We import the useState hook from React to manage the state of our component.
  • State Variables: We declare several state variables using useState:
    • password: Stores the generated password (initially an empty string).
    • passwordLength: Stores the desired length of the password (default: 12).
    • includeUppercase, includeLowercase, includeNumbers, includeSymbols: Boolean values that control which character types to include.
  • handleGeneratePassword Function: This function will contain the logic to generate the password when the button is clicked. Currently, it just sets the password to “Generating…”.
  • UI Structure: We use HTML elements to create the UI:
    • A title (<h1>).
    • A display area (<input type="text">) to show the generated password.
    • A section for options (<div className="options">) containing:
      • A slider (<input type="range">) to control password length.
      • Checkboxes to select character sets.
    • A button (<button>) to trigger password generation.
  • Event Handling: The onChange event on the range input and checkboxes updates the corresponding state variables. The onClick event on the button calls the handleGeneratePassword function.

Next, let’s add some basic styling to make it look presentable. Create a file named styles/password-generator.module.css and add the following CSS:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: sans-serif;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 500px;
  margin: 20px auto;
}

h1 {
  margin-bottom: 20px;
  color: #333;
}

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

.password-display input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Important for padding and width */
}

.options {
  width: 100%;
  margin-bottom: 20px;
}

.options label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
}

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

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

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

Then, import and apply this CSS in your pages/index.js file. Modify the code to import and apply the CSS module:

import { useState } from 'react';
import styles from '../styles/password-generator.module.css';

export default function Home() {
  const [password, setPassword] = useState('');
  const [passwordLength, setPasswordLength] = useState(12);
  const [includeUppercase, setIncludeUppercase] = useState(true);
  const [includeLowercase, setIncludeLowercase] = useState(true);
  const [includeNumbers, setIncludeNumbers] = useState(true);
  const [includeSymbols, setIncludeSymbols] = useState(true);

  const handleGeneratePassword = () => {
    // Password generation logic will go here
    setPassword('Generating...');
  };

  return (
    <div className={styles.container}>
      <h1>Password Generator</h1>
      <div className={styles.passwordDisplay}>
        <input type="text" value={password} readOnly />
      </div>
      <div className={styles.options}>
        <label htmlFor="length">Password Length: {passwordLength}</label>
        <input
          type="range"
          id="length"
          min="8"
          max="64"
          value={passwordLength}
          onChange={(e) => setPasswordLength(parseInt(e.target.value))}
        />
        <div className={styles.checkboxGroup}>
          <label>
            <input type="checkbox" checked={includeUppercase} onChange={() => setIncludeUppercase(!includeUppercase)} /> Uppercase
          </label>
          <label>
            <input type="checkbox" checked={includeLowercase} onChange={() => setIncludeLowercase(!includeLowercase)} /> Lowercase
          </label>
          <label>
            <input type="checkbox" checked={includeNumbers} onChange={() => setIncludeNumbers(!includeNumbers)} /> Numbers
          </label>
          <label>
            <input type="checkbox" checked={includeSymbols} onChange={() => setIncludeSymbols(!includeSymbols)} /> Symbols
          </label>
        </div>
      </div>
      <button onClick={handleGeneratePassword}>Generate Password</button>
    </div>
  );
}

Make sure to replace the class names in your JSX with the corresponding styles from your CSS module (e.g., className={styles.container}). Now, you should see a basic, styled password generator interface in your browser.

Implementing Password Generation Logic

Now, let’s add the core functionality: the password generation logic. We’ll modify the handleGeneratePassword function to generate a secure password based on the user’s selected options. First, we need to define the character sets.


  const [password, setPassword] = useState('');
  const [passwordLength, setPasswordLength] = useState(12);
  const [includeUppercase, setIncludeUppercase] = useState(true);
  const [includeLowercase, setIncludeLowercase] = useState(true);
  const [includeNumbers, setIncludeNumbers] = useState(true);
  const [includeSymbols, setIncludeSymbols] = useState(true);

  const handleGeneratePassword = () => {
    const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
    const numberChars = '0123456789';
    const symbolChars = '!@#$%^&*()_+~`|}{[]:;?<>,-./=';

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

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

    setPassword(generatedPassword);
  };

Here’s what the updated code does:

  • Character Sets: We define strings containing all possible characters for each type (uppercase, lowercase, numbers, and symbols).
  • Allowed Characters: We create a string called allowedChars that concatenates the character sets selected by the user based on the checkbox values.
  • Password Generation Loop: We loop passwordLength times:
    • Inside the loop, we generate a random index within the bounds of allowedChars.
    • We append the character at that random index to the generatedPassword string.
  • Updating State: Finally, we set the password state variable to the generated password.

Error Handling and Edge Cases

Let’s consider some potential issues and how to handle them:

  • No Character Types Selected: What if the user unchecks all the character type options? Our allowedChars string would be empty, and the password generator would produce an empty password. We can add a check for this and provide a user-friendly message or default to a safe configuration.
  • Password Length Validation: While we’ve set a minimum and maximum for the range input, it’s good practice to validate the password length to ensure it’s within reasonable bounds.

Here’s an enhanced version of the handleGeneratePassword function that includes error handling:


  const handleGeneratePassword = () => {
    const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
    const numberChars = '0123456789';
    const symbolChars = '!@#$%^&*()_+~`|}{[]:;?<>,-./=';

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

    if (allowedChars.length === 0) {
      setPassword('Please select at least one character type.');
      return;
    }

    if (passwordLength < 8 || passwordLength > 64) {
      setPassword('Password length must be between 8 and 64 characters.');
      return;
    }

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

    setPassword(generatedPassword);
  };

In this improved version:

  • We added a check to see if allowedChars is empty. If it is, the function sets the password to an error message and returns, preventing the generation of an empty password.
  • We added a check to validate that the password length is within the specified range (8-64).

Adding a Copy to Clipboard Feature

A crucial feature for any password generator is the ability to easily copy the generated password to the clipboard. Let’s add a button and the necessary JavaScript to implement this.

First, add a new button in your JSX, right after the password display input:

<button onClick={handleCopyToClipboard}>Copy</button>

Now, add the function to handle the copy to clipboard functionality:

const handleCopyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(password);
    alert('Password copied to clipboard!'); // Or use a more sophisticated notification
  } catch (err) {
    console.error('Failed to copy password: ', err);
    alert('Failed to copy password. Please try again.');
  }
};

Explanation:

  • `handleCopyToClipboard` Function: This asynchronous function is triggered when the copy button is clicked.
  • `navigator.clipboard.writeText(password)`: This is the core of the copy functionality. It uses the Clipboard API to write the current value of the `password` state to the user’s clipboard. The `async/await` syntax makes the code cleaner and easier to read.
  • Error Handling: A `try…catch` block is used to handle potential errors during the copy operation (e.g., if the user hasn’t granted permission for the website to access the clipboard). An alert is shown to the user to indicate success or failure. In a real-world application, you might use a more subtle and user-friendly notification system.

Don’t forget to import styles from your CSS module to apply styles to the copy button.

Deployment (Optional)

Once you’re happy with your password generator, you’ll likely want to deploy it so others can use it. Next.js makes deployment straightforward. Here’s a quick guide using Vercel, which is the recommended platform for Next.js:

  1. Sign Up for Vercel: If you don’t already have an account, sign up for a free Vercel account at vercel.com.
  2. Connect Your Project: In your Vercel dashboard, click “Add New Project”. You can connect your project directly from your Git repository (GitHub, GitLab, or Bitbucket) or upload a zip file.
  3. Configure Deployment (If Necessary): Vercel should automatically detect that it’s a Next.js project. You might need to specify the build command (usually `npm run build` or `yarn build`) and the output directory (usually `.next`). Vercel will often configure this automatically.
  4. Deploy: Click “Deploy”. Vercel will build and deploy your application.
  5. Access Your Application: Once the deployment is complete, Vercel will provide you with a live URL where your password generator is accessible.

Vercel handles the complexities of server-side rendering, static site generation, and other Next.js features, making deployment a breeze. You can also explore other deployment options, such as Netlify or traditional hosting providers, but Vercel is highly recommended for its ease of use and tight integration with Next.js.

Testing Your Password Generator

Thorough testing is essential to ensure your password generator functions correctly. Here’s a suggested testing strategy:

  • Basic Functionality:
    • Verify that the password generator produces a password when the “Generate Password” button is clicked.
    • Check that the password display area updates with the generated password.
  • Character Set Inclusion:
    • Test each combination of character sets (uppercase, lowercase, numbers, symbols) to ensure that the generated passwords include the selected character types.
    • Test all character types selected to check that passwords include all of them.
    • Test that the correct character types are excluded when checkboxes are unchecked.
  • Password Length:
    • Use the range input (slider) to select different password lengths.
    • Verify that the generated password matches the selected length.
    • Test the minimum and maximum password lengths to ensure they are enforced correctly.
  • Error Handling:
    • Test the error handling by:
      • Unchecking all character type checkboxes to ensure the error message “Please select at least one character type” is displayed.
      • Setting the password length outside the valid range (e.g., less than 8 or greater than 64) and verifying the appropriate error message.
  • Copy to Clipboard:
    • Click the “Copy” button and check if the generated password is successfully copied to the clipboard. Paste the password into a text editor or other application to verify.
  • User Interface (UI) and Usability:
    • Ensure that the UI is visually appealing and easy to understand.
    • Check that all UI elements (buttons, checkboxes, slider, text input) are responsive and function as expected.

You can perform these tests manually by interacting with the user interface. For more advanced testing, you can use automated testing frameworks like Jest (commonly used with React and Next.js) to write tests that automatically verify the functionality of your components.

Key Takeaways

Let’s summarize the key concepts we’ve covered:

  • Next.js Fundamentals: You’ve used Next.js to set up a basic project, create a page, and manage state.
  • State Management: You’ve learned how to use the useState hook to manage component state, including password length, character set options, and the generated password.
  • Event Handling: You’ve used event handlers (onChange and onClick) to respond to user interactions, such as changing input values and clicking buttons.
  • UI Design: You’ve built a simple user interface using HTML elements and CSS.
  • Password Generation Logic: You’ve implemented the core logic to generate secure, randomized passwords based on user-selected options.
  • Error Handling: You’ve added error handling to prevent unexpected behavior and provide a better user experience.
  • Copy to Clipboard: You’ve added a copy to clipboard feature using the Clipboard API.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building a password generator and how to fix them:

  • Incorrect State Updates:
    • Mistake: Not updating state correctly. For instance, directly modifying state variables instead of using the state update functions (e.g., setPasswordLength(passwordLength + 1) instead of passwordLength++).
    • Fix: Always use the state update functions returned by useState (e.g., setPasswordLength).
  • Incorrect CSS Styling:
    • Mistake: Not understanding how to use CSS modules in Next.js, leading to styling issues.
    • Fix: Make sure you’re importing the CSS module correctly (import styles from './password-generator.module.css') and applying the class names using className={styles.yourClassName}.
  • Incorrect Event Handling:
    • Mistake: Not passing the correct arguments to event handlers or not preventing default behavior when necessary.
    • Fix: Review your event handler functions to ensure they are correctly connected to the elements and are handling events as expected. For example, when using a range input, make sure to parse the value to an integer (parseInt(e.target.value)).
  • Security Considerations:
    • Mistake: Generating passwords that are not truly random or using predictable algorithms.
    • Fix: Use the Math.random() function to generate random numbers and ensure your password generation logic is robust. Consider using a dedicated password generation library for more advanced features.
  • Clipboard API Issues:
    • Mistake: Not handling clipboard API errors correctly or not considering browser compatibility.
    • Fix: Use a try...catch block to handle potential errors when using the Clipboard API. Provide informative error messages to the user.

Optional: Enhancements and Further Learning

Once you’ve built the basic password generator, you can explore various enhancements to improve its functionality and user experience:

  • Strength Meter: Implement a password strength meter that provides feedback on the password’s security. You can use a library or write your own logic to evaluate password complexity based on length, character variety, and other factors.
  • Password History: Store a history of generated passwords (e.g., in local storage) so the user can easily access previously generated passwords. Be mindful of security when storing passwords.
  • Customizable Character Sets: Allow users to define their own custom character sets, giving them more control over the password generation process.
  • UI Improvements: Enhance the user interface with better styling, animations, and user feedback. Consider using a UI component library (e.g., Material UI, Ant Design) to speed up development.
  • Accessibility: Ensure your password generator is accessible to users with disabilities by using appropriate ARIA attributes, providing sufficient color contrast, and ensuring keyboard navigation works correctly.
  • Password Complexity Rules: Add options to enforce password complexity rules, such as requiring a minimum number of uppercase letters, lowercase letters, numbers, and symbols.
  • Integration with Password Managers: Explore ways to integrate your password generator with password managers, allowing users to save and manage their generated passwords directly within their preferred password manager.
  • Testing and CI/CD: Implement automated tests using a framework like Jest to ensure your code works correctly and to catch potential issues early. Set up a continuous integration/continuous deployment (CI/CD) pipeline to automate the build, test, and deployment process.

These enhancements will not only improve your password generator but also provide valuable learning opportunities in front-end development, UI/UX design, and security best practices.

Building a password generator with Next.js is a fantastic way to learn about web development fundamentals. You’ve gained practical experience with state management, event handling, and UI design. You’ve also learned about the importance of security and how to create a useful tool. Remember, the best way to learn is by doing. Continue experimenting, exploring new features, and refining your skills. The knowledge you’ve gained will serve you well as you continue your journey in web development. The principles you’ve applied here – from setting up a project to managing state and handling events – are applicable to a wide range of web applications. Embrace the challenge, keep learning, and enjoy the process of building!

More posts