Build A Password Generator

How many times have you used the generate password feature on your browser when trying to create an account on a website? We all know how annoying it is having to come up with secure passwords. Perhaps some of the users on your website also face this similar situation.

In this piece, we will create a password generator, this can come in handy if you want to add this feature by default to your website. Sometimes on chrome, some websites don't display the auto generate password feature, so there is no harm trying to build this in. It would also make for a good user experience, the user has been rid of the burden of having to worry about creating a secure password.

We will build this password generator function using typescript. Typescript is a superset of JavaScript, Typescript is strongly typed and compiles to Javascript.

function* generatePassword(): Generator<string, void> {
 while (true) {
  let charSet: string = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let length = Math.floor(Math.random() * (16 - 8 + 1) + 8);
  let hasNumber = Math.random() < 0.5;
  let hasSpecial = Math.random() < 0.5;
  let password = '';
  if (hasNumber) charSet += '0123456789';
  if (hasSpecial) charSet += '!@#$%^&*';
  for (let i = 0; i < length; i++) {
    password += charSet[Math.floor(Math.random() * charSet.length)];
    if (
      password.match(
        /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{10,16}$/
      )
    )   yield password;
    }
  }
}
const passwordIterator = generatePassword();

We have the password generator function defined above, it is a generator function, generator functions are used to create Iterators. Why did we use a generator function instead of a normal function? First because generator functions are specially designed for this purpose. First when we call a generator function we don't get the data from the function can't be pulled out, we can only consume this data when it has been pushed to us by the generator, in other words, when it is available to us.

Being a multiple push system a generator can yield an infinite amount values, this is because of the while loop, with the true condition ensuring that this generator continues to emit data when it is available, we only need to subscribe and consume the data by calling the next() method on the iterator returned to us.

To the function itself, we get a list of the characters we would want our password to be made of, next we determine the length of the password, we attach symbols and numbers to the character set that is the password needs it. Then we slice a random part of the character set then we match the string obtained, stored in the password variable against a password for RegExp that validates that it is a valid password, then we used the yield keyword to emit this data from the generator, the loop runs again and the process repeats itself again. Thus each time we subscribe to it, we get a new random password.

const passwordIterator = generatePassword();

console.log(passwordIterator.next());
// {value: "h0tI%ky$%f", done: false}

You now have your password generator built successfully, leave your comments below if you want to see how we can generate code using a generator function.

Watch This video for a live demonstration