Two-factor authentication is becoming the go-to method for increased login security on the web, as it ties a physical device to your virtual credentials. It is being adopted by many of the major players in the industry, including Intuit, Google and Facebook. While user security is paramount, modern web developers must also consider the UX problems that can arise from increased security measures.
Since UX is becoming increasingly important, I set out to design a more interactive and more modern method of two-factor authentication. In this post, I’ll outline how you can implement an interactive two-factor authentication solution using Node.js, Socket.io, Express, and Node-Twilio (3rd-party). If you are interested in a solution using PHP and jQuery, please check out this past blog post. I will highlight the most important parts of implementing an interactive solution in this blog post, and if you’re interested in playing with a fully functional demo please fork my repository on GitHub!
Steps
- User attempts to log in to your website
- A random verification code is generated and the application initiates a call to the user’s verified phone number
- The user is prompted to enter the code, and given real-time feedback
- If the code is entered successfully, user is forwarded to their account dashboard
- If the code is entered incorrectly, the user must log in again
Step One: Getting Started
To get started, you will need a public web server with Node.js installed. If you are new to Node.js, I recommend reading our article on Getting Started with Twilio and Node.js, as it explains how to get running for the first time. Once you have that all set up, you will need to install a couple of additional packages by running the following commands in your Terminal:
$ npm install jade
$ npm install socket.io
Step Two: Frontend
Now that your environment is all set up, we can start writing our app. The first step is to write the Jade template code that will generate the HTML for your login page. Create a folder called ‘views’ and a file named index.jade within it. The following code goes in that file:
This code may look somewhat daunting if you are not familiar with Jade, but in reality most of the tags correspond directly to standard HTML tags, with shorthand for setting IDs and Classes for CSS styles. For example, div.myclass#myid is essentially the same as writing ‘
Now that we have defined the look and feel of our hypothetical login form, we can now add the frontend JavaScript that will make it feel interactive to the end user. I’m going to split the JavaScript code into multiple parts and explain each snippet individually so that it will be clear what is going on.
This code handles the submission of the form (when the user clicks the Log In button). It first prevents the actual submission event, which by default makes a POST request to the address specified in the ‘action’ parameter of the
$ npm install jade
$ npm install socket.io
$ npm install express
$ npm install twilio
You can also find the full, up-to-date source on GitHub here.
Read more about Phone Verification
Documentation: Twilio documentation for Two-Factor Authentification
Blog post: How to Build a Phone-Based Two-Factor Authentification
Blog post: Phone-Based Two-factor Authentication Is A Better Way to Stay Secure
Blog post: The Key to Phone Verification is a Good User Experience
If you have any feedback, comments, or suggestions please e-mail me at jonmarkgo@twilio.com or tweet at me @jonmarkgo.