Build a Password Generator | Interview Question

Q: Build a Password Generator

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React or cryptography background is assumed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and every output in section 6 was produced by actually running it: the generator on its own in Node 22.22.0, and the component on React 19.3.1. ## 1. Why This Even Matters — A Story First Imagine a lottery where the balls are drawn by a machine that, if you watch a few draws, lets you predict the next one. It still *looks* random to a casual viewer. Nobody would accept it for a real lottery. Math.random() is that machine. It is fine for shuffling a playlist or placing confetti, but it was never designed to be unpredictable to an attacker. V8, the

The problem

Question presented to candidate: "Build a password generator: a length slider, checkboxes for uppercase, lowercase, digits and symbols, a strength indicator, and a copy button. Every password must contain at least one character from each type the user ticked. Tell me how you make it actually random."

Requirements:

Length from 8 to 64 (default 16) and four character classes (all on by default). Changing any setting generates a new password; a button generates another.
Every generated password contains at least one character from each selected class, and only characters from selected classes.
With no class selected: no password, the generate and copy buttons disabled, and an explanation.
A strength meter based on estimated entropy (bits), with a label (Weak, Fair, Strong, Very strong).
Copy to clipboard with a "Copied" status that disappears after 2 seconds, and a fallback message when the clipboard refuses.

What a strong answer should cover:

Why Math.random() is wrong for secrets (not a cryptographically secure generator) and that crypto.getRandomValues() is the browser tool for it.
Modulo bias: random % n favours some characters unless 2^32 (or 256) is a multiple of n; fix with rejection sampling.
The class guarantee: one character from each chosen class, the rest from the combined pool, then a Fisher–Yates shuffle so the guaranteed characters are not always first.
Entropy estimate length × log2(poolSize) and its limits; the meter is derived from the settings, not stored.
Clipboard API (navigator.clipboard.writeText, async, needs a secure context and may be refused), a polite status message, and clearing timers on unmount.

Clarifying questions expected:

"Should we exclude look-alike characters such as 0/O and 1/l?"
"Which symbol set does the target system accept?"
"Is the strength meter for generated passwords only, or also for passwords people type?"

Code / implementation expected: Yes. A generator using crypto.getRandomValues with unbiased sampling and a verified class guarantee, plus the UI with a strength meter and copy.

React
Forms
Logic

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React or cryptography background is assumed. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and every output in section 6 was produced by actually running it: the generator on its own in Node 22.22.0, and the component on React 19.3.1.

1. Why This Even Matters — A Story First

Imagine a lottery where the balls are drawn by a machine that, if you watch a few draws, lets you predict the next one. It still looks random to a casual viewer. Nobody would accept it for a real lottery.

Math.random() is that machine. It is fine for shuffling a playlist or placing confet

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import PasswordGenerator from "./src/components/PasswordGenerator";
import "./styles.css";

export default function App() {
  return (
    <main className="page">
      <PasswordGenerator />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.