JavaScript Password Generator

JavaScript Password Generator to generate a random password with JavaScript. Following is a guide on how to create a strong password generator using JavaScript in 2024.

How to create a password generator in JavaScript?

This a guide on how to create a password generator using plain vanilla JavaScript so that users can generate passwords on their browsers. There are 2 major parts that made up a password, the password length, and the strength of a password. In this guide, we will let the user define how strong or complex they want their passwords to be. We can also let the user customize their password weather or not they want to have characters, numbers, symbols, and special characters in their password.

Customize user password

Users can select the number of characters they want their passwords to have, and the option to include lowercase letters, uppercase letters, numbers, symbols. They can also choose to exclude similar characters and ambiguous characters. Following is the html code that gives users the option to customize their passwords.

<table class="table table-bordered" style="table-layout:fixed">
    <tr>
        <td width="40%"><span class="field_text">Random Password:</span></td> 
        <td style="word-wrap: break-word"><input name="txtPassword" type="text" 
		readonly="readonly" id="txtPassword" /></td>
    </tr>       
</table>
<table class="table table-bordered">
    <tr class="header2">
        <td colspan="2"><h2>Generate a Strong Password</h2></td>
    </tr>    
    <tr>
        <td width="40%"><span class="field_text">Password Length:</span></td>
        <td><input name="txtPasswordLength" type="text" value="16" id="txtPasswordLength" 
		onkeyup="generate()" /></td>
    </tr>     
    <tr>
        <td><span class="field_text">Include Lowercase Characters:</span></td>
        <td><span onchange="generate()"><input id="chkIncludeLowerChar" type="checkbox" 
		name="chkIncludeLowerChar" checked="checked" />(e.g. abcdef)</span></td>
    </tr>
    <tr>
        <td><span class="field_text">Include Uppercase Characters:</span></td>
        <td><span onchange="generate()"><input id="chkIncludeUpperChar" type="checkbox" 
		name="chkIncludeUpperChar" checked="checked" />(e.g. ABCDEF)</span></td>
    </tr>  
    <tr>
        <td><span class="field_text">Include Numbers:</span></td>
        <td><span onchange="generate()"><input id="chkIncludeNumbers" type="checkbox" 
		name="chkIncludeNumbers" checked="checked" />(e.g. 123456)</span></td>
    </tr>       
    <tr>
        <td><span class="field_text">Include Symbols:</span></td>
        <td><span onchange="generate()"><input id="chkIncludeSymbols" type="checkbox"
		name="chkIncludeSymbols" checked="checked" />(e.g. *@#+%)</span></td>
    </tr>
    <tr>
        <td><span class="field_text">Exclude Similar Characters:</span></td>
        <td><span onchange="generate()"><input id="chkExcludeSimilar" type="checkbox" 
		name="chkExcludeSimilar" />(e.g. o,0,i,l,1)</span></td>
    </tr>
    <tr>
        <td><span class="field_text">Exclude Ambiguous Characters:</span></td>
        <td><span onchange="generate()"><input id="chkExcludeAmbiguous" type="checkbox" 
		name="chkExcludeAmbiguous" />(e.g. ~,;:.{}<>[]()/\'`)</span></td>
    </tr>
    <tr>
        <td></td>
        <td><a onclick="generate()" class="button button-main">Generate Password</a></td>
    </tr> 
</table>

Password Generator JavaScript Code

After we have take care of the user input or the html form that gives users the options to set conditions for their passwords, let's move on to the fun JavaScript part.

First, we will need a few array variables that defines the different types of characters.

var upperChars = ["A","B","C","D","E","F","G","H","J","K","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"];
var lowerChars = ["a","b","c","d","e","f","g","h","j","k","m","n","p","q","r","s","t","u","v","w","x","y","z"];
var numbers = ["2","3","4","5","6","7","8","9"];
var symbols = ["!","#","$","%","&","*","+","-","?","@"];
var similars_lower = ["i","l","o"];
var similars_upper = ["I","L","O"];
var similars_numbers = ["1","0"];
var similars_symbols = ["|"];
var ambiguous = ["\"","'","(",")",",",".","/",":",";","<","=",">","[","\\","]","^","_","`","{","}","~"];

At some point in our code during the password generating process, we will need to check if our password falls in any of the above arrays depending on the user selection. Please also note the characters "i", "l", "o" are not included in the lowerChars array, we include them in the variable similars_lower to differentiate these characters.

Minimum and maximum password check

Let's define a function that checks whether the password an user enter is too short or too long. For instance, we don't want any user to enter a password with a length of only 4 characters or more than 2048 characters. If an user enters a password than 4 characters or more than 2048 characters, we will output an error that shows an error, otherwise we will call a function getPassword(passwordLength) that we will define in the next section to generate the password.

function generate(){
    var passwordLength = parseFloat(document.getElementById('txtPasswordLength').value);
    
    var password="";
	if(!isNaN(passwordLength))
    { 
        if(passwordLength < 4 || passwordLength > 2048)
        {
            document.getElementById("error").style.display = "block";
            document.getElementById('txtPassword').value = "";
        } else {
            document.getElementById("error").style.display = "none";
            password = getPassword(passwordLength);
            document.getElementById('txtPassword').value = password;
        }
    }
}

Generating the password

Now, here come's the most exciting part of our JavaScript random password generator, generating the password.

Based on the length of the password, we will use a for loop to generate a list of random character and concat all these characters to form a string which is our random password.

Remember, our password must meets all the other user inputs and conditions, such as lowercase, uppercase charactes, and digits. We will need to use a new array that stores all the characters that are allowed by the user. For example, if the user check the option where lower characters are allowed, we would append the array of lowercase characters to the new array. We will need to do the same for all the other conditions. After we store all the allowed characters into the new array, we can then use the for loop to generate a random index and get the character from that index to form each digit of our password.

function getPassword(passwordLength)
{
    var passwordLength = parseFloat(document.getElementById('txtPasswordLength').value);
    var chkIncludeLowerChar = document.getElementById('chkIncludeLowerChar').checked;
    var chkIncludeUpperChar = document.getElementById('chkIncludeUpperChar').checked;
    var chkIncludeNumbers = document.getElementById('chkIncludeNumbers').checked;
    var chkIncludeSymbols = document.getElementById('chkIncludeSymbols').checked;
    var chkExcludeSimilar = document.getElementById('chkExcludeSimilar').checked;
    var chkExcludeAmbiguous = document.getElementById('chkExcludeAmbiguous').checked;
    
    var password="";
    var array = [];
    var count = 0;
    if(chkIncludeLowerChar){
        array = array.concat(lowerChars);
    }
    if(chkIncludeUpperChar){
        array = array.concat(upperChars);
    }
    if(chkIncludeNumbers){
        array = array.concat(numbers);
    }
    if(chkIncludeSymbols){
       array = array.concat(symbols);
    }
    if(!chkExcludeSimilar){
        if(chkIncludeLowerChar)
        {
            array = array.concat(similars_lower);
        }
        if(chkIncludeUpperChar)
        {
            array = array.concat(similars_upper);
        }
        if(chkIncludeNumbers)
        {
            array = array.concat(similars_numbers);
        }
        if(chkIncludeSymbols)
        {
            array = array.concat(similars_symbols);
        }   
    }
    if(!chkExcludeAmbiguous && chkIncludeSymbols){
        array = array.concat(ambiguous);
    }
    var randomIndex;
    if(array.length > 1)
    {
       for (var i = 0; i < passwordLength; i++) {
           randomIndex = Math.floor(Math.random() * array.length);
           password = password + array[randomIndex];
       }
    }
    return password;
} 

That's it, that's all the code we needed to create a simple password generator in JavaScript. You can use the password generator demo on the top of this page to do some testing and see how it works in live example.