In this article we will write a simple React app to demonstrate a two-factor authentication flow, which will prompt for username and password and then a time-based generated password.

We will also generate a QR code containing the two-factor configuration that can be read by authenticator apps such as Google Authenticator, in order to generate one-time passwords.

If you are not familiar with two-factor authentication and how one-time passwords are generated, I recommend this excellent article.

Here we will focus on client and server interaction.

The full code is available at http://github.com/OnFrontiers/mfa-demo-node

Project structure

There are quite a few files to bootstrap…


As we write more and more JavaScript in order to deliver better user experience, we should be aware of the impact that have on users. More code means more bytes to download, which ultimately increases the time users wait to start navigating.

In this article we will use an app with minimal settings to demonstrate some of the tools and basic techniques we use here at OnFrontiers to reduce bundle size and keep initial load time short, by optimizing the build incrementally.

We will use Webpack to bundle the source code and run the bundle analyzer, and also run a…

Alan Casagrande

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store