With the rise of technologies like Internet Of Things (IoT), Cloud and Big Data we have seen applications in the recent past which are making our lives better with each passing day. With so much data being generated, security has become the pillar stone for almost every technology/application. And hence, one should focus on security from the time of inception of any application idea. One Time Password or OTP is one of the security mechanisms used in modern applications.

Most of the web applications and even mobile applications are using one time passwords as the first step of verifying authenticity of a user because there are many issues with static passwords. Static passwords are the passwords that we associate with our user-id or email-id while registering for any website or mobile app. There are many problems with static passwords, some of them are listed below

Problems with static passwords:

1. Most of the users use the same password for different websites, hence if a person knows your password for any account then it is easy to crack open your different accounts.
   
2. Keyloggers are able to capture your static passwords easily.
   
3. Static passwords can be easily cracked using password attacks like Brute force, Dictionary attacks, and pre-calculated dictionary attacks.

---

Reasons to use One Time Passwords:

1. One Time Passwords provide better security over static passwords because OTP's have expiry time which makes it harder for any hacker or attacker to crack the password within the expiry time of the OTP.
   
2. Keyloggers (software or hardware which can be used to capture strokes on the keyboard of a device) help to capture static password typed by the user. Yes, it can also be used to capture the user's OTP at that point of time, but that OTP cannot be used for the next time to log into the account.

Most of the two-step authentication or two-step verification methods use One-Time Passwords.

The main role of One-Time Password (sometimes analogously used as One Time Pin) is to authenticate a user for a single session or transaction. It is used almost in every banking transaction. This technique is very simple yet a powerful way of verifying users.

So let us start with the fundamentals of One Time Password (OTP) generation.

Generally, the client and server(generates the OTP) use time-synchronization algorithms so that the user is validated whenever OTP is gentered within a given time frame. In this article, we will learn how to generate One Time Passwords only.

In general, One Time passwords can be classified into two types:

1. Numeric OTPs: All the characters in the OTP are numbers only.
2. Alphanumerical OTPs: The characters in the OTP are a mix of both numbers and alphabets.

The length of the OTP varies from application to application and is completely dependent on one's own requirement. If you want more secure OTPs, then we suggest choose longer length OTPs. At present most of the applications generate One Time Passwords of length 4 or 6.

In this article, you will learn to generate OTP in JavaScript.

---

One Time Password Generation(Only Digits)

Here we have the code,

function generateOTP()
{

    var digits = '0123456789';

    var otpLength = 4;

    var otp = '';

    for(let i=1; i<=otpLength; i++)

    {

        var index = Math.floor(Math.random()*(digits.length));

        otp = otp + digits[index];

    }

    return otp;

}

Above is the code for generating the OTP, now let's try to understand what we have done.

Understanding the generateOTP() method

1. The first step is to store all the digits(0 to 9) in a variable named digits and this string is later used as an array to access its characters.


2. Then we have defined the length of the otp using the variable otpLength, this value should be greater than or equal to 4.


3. We are using an empty string otp which will store each and every random number generated, and hence form the OTP.


4. The for loop is then defined in a way that it iterates a number of times equal to the otpLength.


5. In each iteration, a random number is generated using the Math.random() method, which will return a value between 0 and 1. This value is then multiplied with the length of the digits array.
   
   i.e value between (0-1)*(length of digits array)

   For example: 0.2708388088367647*10 = 2.7083880883676468
   
   taking one more example, 0.9410922840442396*10 = 9.410922840442398
   
   The result is always a floating value.



6. So to obtain an integer value we round the result using the Math.round() method.



7. The whole equation is as follows:

   Math.round(Math.random*digits.length);

   
   

   For example: Math.round(0.44569 * 10)
   
   4 is the value generated.



8. The value that we obtain in step 7 is stored in the variable index. Now we use this index to point the value at that index in the string(array) digits.
   
   For example: if the value of index = 4
   
   Then we access the digits string in the following manner: digits[index]
   
   And you see the output by printing the value in console using the following statement: console.log(digits[4])
   
   The value at index 4 in digits is 4
   
   In the picture above we have the digits string represented as an array.


9. In the above array representation, we can observe how the characters are accessed from the string digits and are concatenated to the otp variable thus forming the OTP.


10. Finally using the return statement we pass the generated otp to the function which called the generateOTP function.

OUTPUT of the Program:

I wrote a loop to generate OTP 5 Times and as you can see below they were different every time.

---

One Time Password Generation (Alphanumeric OTP)

Now let's update our code to make it generate alphanumeric OTP.

function generateOTP()

{

    var digits = '0123456789abcdefghijklmnopqrstuvwxyz';

    var otpLength = 6;

    var otp = '';

    for(let i=1; i<=otpLength; i++)

    {

        var index = Math.floor(Math.random()*(digits.length));

        otp = otp + digits[index];

    }

    return otp;

}

Similar to the previous program, the functionality is same but the only difference is that our digits string consists of alphabets from a-z along with numbers from 0-9.

Hence the digits.length will produce a value of 36(ie. 10 numbers and 26 alphabets). Then the value stored in variable index will be between 0 and 36.

In addition to the variable digits we also changed the value of otpLength to 6, to produce a 6 digit OTP.

OUTPUT of the Program:

All the OTP’s are of length 6 and are unique.

---

TIP to Generate OTP with Special Characters

To implement a different kind of OTP with special characters along with numbers and alphabets just change the variable digits with the characters you want like placing alphabets from A-Z (upper case) or placing some special symbols. (There are possibilities of errors when special characters are used)

var digits = '[email protected]#$%^&*()_+';

OUTPUT of the Program:

With the digits string changed as shown above, following will be output:

---

Time-Based One Time Passwords

The OTPs which are valid for a specific amount of time are called Time Based One Time Passwords (TOTP). There are many applications available for two-step verification, you need not create your own authentication system.

Google Authenticate is one good example for Time Based OTPs. You can use the API (Application Programming Interface) of Google to implement this. But it uses more complex algorithms like HMAC-SHA1 and some Time based algorithms.

LastPass is a similar software which also provides the facility to store like a vault and is available for Chrome and some other browsers.

There are many two-factor authentication applications like Microsoft Authenticator, Authy and Yubico Authenticator. While most of these are software applications, Yubico is a hardware-based solution for two-factor authentication, where you need to buy a YubiKey(a USB device) which verifies an account with a one-tap(button provided on the device) approach, although this is very easy but is supported by a very fewer accounts like Google, Github etc.

One interesting thing is that almost every applications these days use one-time passwords to verify the user rather than using static passwords. But you can try different authenticators too and comment below or let us know if there are any new Authenticators worth using ;)

HAPPY CODING!