Establishing a Secure Password Generator for Your User Base

An Elementary JavaScript Tutorial

In a time where passwords are becoming more obscure and less memorized by the individual, why is it not more popular to help new users in securing their accounts? cPanel implements it extremely well in its MySQL user creation form.

cPanel’s MySQL password generator

Such a form is not hard to implement. A password generator is a very simple piece of code with a very efficient output. It has miniscule bandwidth overhead for the benefit.

There are really only three aspects to a password generator: the characters to be used, the concatenation of them, and the randomization process. All three are extremely basic programming principles, yet such systems are surprisingly still rare.

First, the character list:

Note: You should still allow the user to manually enter whatever characters they want.

This is a list of characters that are valid for the randomly-generated password. These are all found on a common keyboard to ensure they are compatible with all languages, don’t alienate users with limited language packs installed, and are compatible with largest number of database character encodings. To note, there is no space in this generator. This is due to readability. If the space were to randomly be assigned to the beginning or end of the generated password, the user may not notice that it is there. This could be a problem if, for example, the user attempts to copy-paste the plaintext password to a separate location for safe-keeping and accidentally leaves out the invisible space.

To retrieve the random character, we just make use of JavaScript’s String.prototype.charAt and Math.random methods. We can retrieve the index of a random character in the charactersvariable by using Math.floor(Math.random() * characters.length).

Math.random() * characters.length will give us a number between 0 and the number of characters in the string. “Floor”ing this value via Math.floor will turn that decimal number into an integer by rounding down. We we can use that integer as an index to pinpoint a single character. There is no character at the “one and a half” position of the string, but there is a character at the first or second position.

A study by the Georgia Tech Research Institute found that every time you add another character to your password, you are 95 times more protected. The minimum length recommended by the researchers is 12 characters, because anything shorter is already or would soon become vulnerable to brute forcers.

As such an easy to implement tool that offers great convenience and increased safety for users, and the revolutionary changes in both security risks and browser technology, it’s a shame it is not implemented on more websites.

BONUS: an implementation in PHP

Share your thoughts in the comments below!

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store