Building a Secure Password Generator with React

Why Build Your Own?

Most password generators online are perfectly fine, but there’s something satisfying about building your own. Plus, you can be 100% sure that:

No data leaves your browser — everything runs client-side
Cryptographically secure — uses crypto.getRandomValues(), not Math.random()
No tracking or analytics on the tool itself

The Core Logic

The heart of a good password generator is secure randomness. Here’s the key function:

function generatePassword(length, charset) {
  const array = new Uint32Array(length);
  crypto.getRandomValues(array);
  return Array.from(array, (x) => charset[x % charset.length]).join("");
}

Why `crypto.getRandomValues`?

Math.random() is not cryptographically secure. It uses a pseudo-random number generator (PRNG) that can be predicted if you know the seed. The Web Crypto API uses the operating system’s entropy source, making it suitable for security-sensitive applications.

Character Sets

I organized characters into toggleable groups:

Lowercase: abcdefghijklmnopqrstuvwxyz
Uppercase: ABCDEFGHIJKLMNOPQRSTUVWXYZ
Numbers: 0123456789
Symbols: !@#$%^&*()_+-=[]{}|;:,.<>?

Users can mix and match based on the password requirements they’re dealing with.

Password Strength

A simple strength indicator based on length:

Weak (< 12 characters) — red
Good (12–19 characters) — yellow
Strong (20+ characters) — green

In reality, strength also depends on the character set size, but length is the most impactful factor.

Try It Out

You can try the Password Generator right now — it’s free and runs entirely in your browser!

What’s Next?

I’m planning to add more tools:

UUID Generator — v4 and v7
Hash Generator — MD5, SHA-256, SHA-512
Color Converter — HEX, RGB, HSL

Stay tuned! 🔧