2FA with Google Authenticator in ASP.MVC

This is a walkthrough on how to implement Second Factor Authentication (2FA) using Google Authenticator in ASP.MVC with C# code.
Implementing authentication by only requesting a user name and password is not good enough to secure our web applications representing a high risk for people to steal our user’s password. A computer could run complex algorithms to attempt to calculate and decipher passwords in a very small amount of time. People are not as fast as computers especially when trying to infiltrate a system with strong cryptography.

Developers should attempt to implement at least two of the three known approaches for human authentication:

  • Something the user knows: user names and passwords, questions related to user
  • Something the user has: phone, flash drive, smart card
  • Something the user is: finger prints and other biometrics

Google Authenticator helps us to implement Second Factor Authentication by adding an additional layer of security to our applications with something the user knows and something the user has.

Use the following steps as a guideline to get started with Google Authenticator in your MVC application. You can view the source code and also view the demo on my personal site.

  1. Create new empty ASP.NET MVC project
  2. Install Nuget package from Google Authenticator.
  3. Create model class containing the user name and password. I named it LoginModel
  4. Create an MVC Controller. Create a new ActionResult for the login page.
  5. Add a new View for the Login ActionResult created in step 4 and use the LoginModel created in step 3
  6. Create a new ActionResult for when the user is authenticated. Authorized users will be redirected after successful login
  7. Create a new View for ActionResult in step 6.
  8. Add ActionResult to verify Second Factor Authentication
  9. Setup your Login page created in step 5 as your startup page
  10. Run the application. Login and then use your Google Authenticator phone app to scan or manually type the QR Code shown in your web app.
  11. Go back to the web app and type the 6 digit token from your Google Authenticator app

I did not include the code in between the steps to keep it as simple as possible. The steps should be a guideline. You can apply the code that goes on each step from the source code.
However, I will paste the code that implements the Google Authenticator.
Once we have a valid user login and password, we use Google Authenticator to Generate the QR Code:

To understand the previous code, take a look the GenerateSetupCode signature:

Finally, this is piece of code used after the user has entered the token based on the QR Code received by Google Authenticator

This is how the MVC application should look:

We have covered just the basics using static data to login and interact with our user. Take this code and transform it into a more robust application. In the real world, we would need to interact with a database or service to validate our login. We would also need to consider how to interact with external applications or services once we have been authenticated. Please leave your comments with questions or suggestions and share your experience working with Second Factor Authentication.

Henry Delgado, BCS, MBA

Written by

A passionate software developer eager to learn, evaluate and share!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade