• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Creating a Secure Password Generator Using TypeScript

TypeScript · February 16, 2023

Password generation is something you’re hopefully using a password manager for these days. However, you might not be aware that modern browsers support some great crypto features.

In this quick little tutorial, we will use the Crypto API to create a strong password generator. The code is remarkably simple, and you can adapt this to generate unique values for games and other purposes besides passwords.

/**
 * Generates a random password of the specified length.
 *
 * @param length The length of the password to generate.
 * @returns A Promise that resolves to a string containing the generated password.
 * @throws An error if the length argument is less than 1.
 */
const generatePassword = async (length: number): Promise<string> => {
  if (length < 1) {
    throw new Error('Length must be greater than 0');
  }

  // Create a new Uint8Array with the specified length.
  const buffer = new Uint8Array(length);

  // Get the browser's crypto object for generating random numbers.
  const crypto = window.crypto || (window as any).msCrypto; // For compatibility with IE11.

  // Generate random values and store them in the buffer.
  const array = await crypto.getRandomValues(buffer);

  // Initialize an empty string to hold the generated password.
  let password = '';

  // Define the characters that can be used in the password.
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  // Iterate over the array of random values and add characters to the password.
  for (let i = 0; i < length; i++) {
    // Use the modulus operator to get a random index in the characters string
    // and add the corresponding character to the password.
    password += characters.charAt(array[i] % characters.length);
  }

  // Return the generated password.
  return password;
};

As you can see, the getRandomValues method does all of the heavy lifting here for generating our password. We also define what characters are allowed in our password, allowing us to remove ambiguous characters if we wish.

Testing

We will write some simple Jest unit tests to ensure our code works. The basics, such as password length and uniqueness.

describe('generatePassword', () => {
  test('should return a string of the specified length', async () => {
    const password = await generatePassword(10);
    expect(typeof password).toBe('string');
    expect(password.length).toBe(10);
  });

  test('should throw an error if the length argument is less than 1', async () => {
    await expect(generatePassword(0)).rejects.toThrow();
    await expect(generatePassword(-1)).rejects.toThrow();
  });

  test('should generate different passwords for different calls', async () => {
    const password1 = await generatePassword(10);
    const password2 = await generatePassword(10);
    expect(password1).not.toBe(password2);
  });

  test('should only contain characters from the defined set', async () => {
    const password = await generatePassword(10);
    expect(password).toMatch(/^[A-Za-z0-9]+$/);
  });
});

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
kevmeister68
kevmeister68
1 month ago

Nice code. I probably would have written this as a web tier service. The one thing missing is some kind of loop/filter for vulgarities in the generated password (which is why I’d prefer this code on the web tier, so the blacklist is not visible).

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz