18 July 2025

Add dual authentication (2FA TOTP) to a Blazor application

I thought it was complex and even expensive. It isn’t. Here’s how I added TOTP-style two-factor authentication (2FA) to a Blazor application.
👉 Repo GitHub: tossnet/Blazor-2FA

TOTP ?

TOTP stands for Time-based One-Time Password: a one-time password generated at regular intervals (usually every 30 seconds), based on a shared secret key.

This system is used by the majority of dual authentication applications, such as :

  • ✅ Google Authenticator
  • ✅ Microsoft Authenticator
  • ✅ Authy, 1Password, Aegis Authenticator, etc.

Overall operation

  1. The server generates a secret key and a TOTP QR code in otpauth:// format.
  2. The user scans this QR code with their 2FA application
  3. On subsequent connections, the user enters a 6-digit code generated by his app
  4. The server verifies this code with the same key and the current time

Blazor project demo

I’ve open-sourced the project on Github. It is available here: 🔗 https://github.com/tossnet/Blazor-2FA. Also, I used Blazor Assembly simply in order to have a demo on GitHub. The Nugets Otp.NET and QRCoder packages

What it does:

  • Generates a TOTP secret key
  • Creates a scannable QR code in Google/Microsoft Authenticator
  • Verification of the 6-digit code
  • Validation message if code is correct

Sample code:

C#

URI TOTP generated

HTML

For verification :

C#

Why integrate 2FA into your application?

  • ✅ Enhanced security
  • ✅ Enhanced user account protection
  • ✅ In line with modern cybersecurity practices

Conclusion

Adding 2FA TOTP to a Blazor or other application is very simple, secure and modern. Thanks to existing .NET libraries, everything can be done in C# with few external dependencies.

Leave a Reply