Think of it as a shield for your accounts. Passwords can sometimes be guessed or stolen, but with 2FA, even if someone gets your password, they'd still need that extra code or device to get in. It's an extra step that makes your accounts much harder for hackers to break into.

So, let's explore how to set up this extra layer of protection using PyOTP and Google Authenticator in your Flask app.

Table of Contents:

1. Overview of PyOTP and Google Authenticator
2. Two-Factor Authentication Workflow in Our Application
3. Prerequisites
4. Get Your Tools Ready
5. How to Set Up the Project
6. How to Create Blueprints for Accounts and Core
7. How to Create a User Model
8. How to Add Flask-Login
9. How to Add Templates and Static Files
10. How to Create the Homepage
11. How to Implement User Registration
12. [How to Implement User Login](#

    How to Implement User Login

    )
13. How to Log Out the Users
14. How to Add the Setup 2FA Page
15. How to Add a 2FA Verification Page
16. How to Run the Completed App for the First Time
17. Wrapping Up

Overview of PyOTP and Google Authenticator

PyOTP is a Python library that's incredibly handy for generating Time-based One-Time Passwords (TOTP) and HMAC-based One-Time Passwords (HOTP). Its primary role revolves around creating these unique, time-sensitive codes that add an extra layer of security to user accounts.

By integrating PyOTP into your Flask application, you can easily implement Two-Factor Authentication (2FA) by generating and verifying these OTPs.

If you're new to PyOTP or would like a refresher on its functionalities, I recommend reviewing my previous guide on PyOTP. This understanding will be beneficial as we get into the integration of PyOTP within your Flask application for Two-Factor Authentication (2FA).

Google Authenticator, on the other hand, stands out as one of the most widely used OTP generator apps available. It functions as a secure platform for generating time-based OTPs, compatible with various services and applications supporting 2FA. Users can easily set up Google Authenticator on their devices to generate these time-sensitive codes, adding an extra level of security to their accounts.

Two-Factor Authentication Workflow in Our Application

Here's a breakdown of the flow of two-factor authentication in our application:

1. Registration with 2FA Setup: When users sign up on our website, they're prompted to set up an extra layer of security—2FA. This involves scanning a QR code using an authenticator app, such as Google Authenticator, to link their account securely.
2. Login Initiation: When users return to log in, they start by entering their usual email/username and password combo to access their account.
3. Extra Security Check: Before granting access, our website throws in an additional hurdle: users need to provide an OTP (One-Time Password) displayed on their authenticator app. This ensures they're not just entering the password but also confirming their identity with a unique, time-sensitive code.
4. Validation and Authorization: The user inputs the received OTP into our platform. The system then double-checks this OTP against the expected code, validating the information. If the OTP matches, it's like handing over the secret handshake, granting the user access to their account.

This seamless back-and-forth between passwords, authenticator apps, and unique codes ensures that only the rightful account owner can access the precious content behind the digital doors of your website.

If you also enjoy visual learning, here's a fancy video showing how the app does its thing.

Now, let's get to some coding!

Prerequisites

Before you get started with the tutorial, make sure you have the following requirements satisfied:

• Working knowledge of Python
• Python 3.8+ installed on your system
• Basic knowledge of Flask and Flask Blueprints
• Knowledge of basic authentication in Flask (optional)

Get Your Tools Ready

You'll need a few external libraries for this project. Let's learn more about them and install them one by one.

But before we install them, let's create a virtual environment and activate it.

First, start with creating the project directory and navigating to it like this:

mkdir flask-two-factor-auth
ccd flask-two-factor-auth

We are going to create a virtual environment using venv. Python now ships with a pre-installed venv library. So, to create a virtual environment, you can use the below command:

python -m venv env

The above command will create a virtual environment named env. Now, we need to activate the environment using this command:

source env/Scripts/activate

To verify if the environment has been activated or not, you can see (env) in your terminal. Now, we can install the libraries.

• Flask is a simple, easy-to-use microframework for Python that helps you build scalable and secure web applications.
• Flask-Login provides user session management for Flask. It handles the common tasks of logging in, logging out, and remembering your users’ sessions over extended periods of time.
• Flask-Bcrypt is a Flask extension that provides bcrypt hashing utilities for your application.
• Flask-WTF is a simple integration of Flask and WTForms that helps you create forms in Flask.
• Flask-Migrate is an extension that handles SQLAlchemy database migrations for Flask applications using Alembic. The database operations are made available through the Flask command-line interface.
• Flask-SQLAlchemy is an extension for Flask that adds support for SQLAlchemy to your application. It helps you simplify things using SQLAlchemy with Flask by giving you useful defaults and extra helpers that make it easier to perform common tasks.
• PyOTP helps you generate OTPs using Time-based OTP (TOTP) and HMAC-based OTP (HOTP) algorithms effortlessly.
• QRCode helps you generate QR Codes in Python
• Python Decouple helps you use environment variables in your Python project.

To install the above-mentioned libraries all in one go, run the following command:

pip install Flask Flask-Login Flask-Bcrypt Flask-WTF FLask-Migrate Flask-SQLAlchemy pyotp qrcode python-decouple

How to Set Up the Project

Let’s start by creating a src directory:

mkdir src

The first file will be the __init__.py file for the project:

from decouple import config
from flask import Flask
from flask_bcrypt import Bcrypt
from flask_migrate import Migrate
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config.from_object(config("APP_SETTINGS"))

bcrypt = Bcrypt(app)
db = SQLAlchemy(app)
migrate = Migrate(app, db)

# Registering blueprints
from src.accounts.views import accounts_bp
from src.core.views import core_bp

app.register_blueprint(accounts_bp)
app.register_blueprint(core_bp)

In the above script, we created a Flask app called app . We use the __name__ argument to indicate the app's module or package so that Flask knows where to find other files such as templates. We also set the configuration of the app using an environment variable called APP_SETTINGS. We'll export it later.

To use Flask-Bcrypt, Flask-SQLAlchemy, and Flask-Migrate in our application, we just need to create objects of the Bcrypt, SQLAlchemy and Migrate classes from the flask_bcrypt, flask_sqlalchemy and, flask_migrate libraries, respectively.

We've also registered blueprints called accounts_bp and core_bp in the application. We'll define them later in the tutorial.

In the root directory of the project (that is, outside the src directory), create a file called config.py. We'll store the configurations for the project in this file. Within the file, add the following content:

from decouple import config

DATABASE_URI = config("DATABASE_URL")
if DATABASE_URI.startswith("postgres://"):
    DATABASE_URI = DATABASE_URI.replace("postgres://", "postgresql://", 1)


class Config(object):
    DEBUG = False
    TESTING = False
    CSRF_ENABLED = True
    SECRET_KEY = config("SECRET_KEY", default="guess-me")
    SQLALCHEMY_DATABASE_URI = DATABASE_URI
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    BCRYPT_LOG_ROUNDS = 13
    WTF_CSRF_ENABLED = True
    DEBUG_TB_ENABLED = False
    DEBUG_TB_INTERCEPT_REDIRECTS = False
    APP_NAME = config("APP_NAME")


class DevelopmentConfig(Config):
    DEVELOPMENT = True
    DEBUG = True
    WTF_CSRF_ENABLED = False
    DEBUG_TB_ENABLED = True


class TestingConfig(Config):
    TESTING = True
    DEBUG = True
    SQLALCHEMY_DATABASE_URI = "sqlite:///testdb.sqlite"
    BCRYPT_LOG_ROUNDS = 1
    WTF_CSRF_ENABLED = False


class ProductionConfig(Config):
    DEBUG = False
    DEBUG_TB_ENABLED = False

In the above script, we have created a Config class and defined various attributes inside that. Also, we have created different child classes (as per different stages of development) that inherit the Config class.

Notice that we're using a few environment variables like SECRET_KEY, DATABASE_URL, and APP_NAME. Create a file named .env in the root directory and add the following content there:

export SECRET_KEY=fdkjshfhjsdfdskfdsfdcbsjdkfdsdf
export DEBUG=True
export APP_SETTINGS=config.DevelopmentConfig
export DATABASE_URL=sqlite:///db.sqlite
export FLASK_APP=src
export FLASK_DEBUG=1
export APP_NAME="Flask User Authentication App"

Apart from the SECRET_KEY , DATABASE_URL and APP_NAME, we've also exported APP_SETTINGS, DEBUG, FLASK_APP, and FLASK_DEBUG.

The APP_SETTINGS refers to one of the classes we created in the config.py file. We set it to the current stage of the project.

The value of FLASK_APP is the name of the package we have created. Since the app is in the development stage, you can set the values of DEBUG and FLASK_DEBUG to True and 1, respectively.

Run the following command to export all the environment variables from the .env file:

source .env

Next, we'll create a CLI application of the app so that we can later add custom commands if required.

Create a manage.py file in the root directory of the application and add the following code:

from flask.cli import FlaskGroup

from src import app

cli = FlaskGroup(app)


if __name__ == "__main__":
    cli()

Now, your basic application is ready. You can run it using the following command:

python manage.py run

Your file structure should look like below as of now:

flask-two-factor-auth/
├── src/
│   └── __init__.py
├── .env
├── config.py
└── manage.py

How to Create Blueprints for Accounts and Core

As mentioned earlier, you'll use the concepts of blueprints in the project. Let's create two blueprints – accounts_bp and core_bp – in this section.

First create a directory called accounts like this:

mkdir accounts
cd accounts

Next, add an empty __init__.py file to covert it into a Python package. Now, create a views.py file inside the package where you'll store all your routes related to user authentication.

touch __init__.py views.py

Add the following code inside the views.py file:

from flask import Blueprint

accounts_bp = Blueprint("accounts", __name__)

In the above script, you have created a blueprint called accounts_bp for the accounts package.

Similarly, you can create a core package in the root directory, and add a views.py file.

mkdir core
cd core
touch __init__.py views.py

Now, add the following code inside the views.py file:

from flask import Blueprint

core_bp = Blueprint("core", __name__)

Note: If you're new to Flask Blueprints, make sure you go through this tutorial to learn more about how it works.

Now, your file structure should look like what you see below:

flask-two-factor-auth/
├── src/
│   ├── accounts/
│   │   ├── __init__.py
│   │   └── views.py
│   ├── core/
│   │   ├── __init__.py
│   │   └── views.py
│   └── __init__.py
├── .env
├── config.py
└── manage.py

How to Create a User Model

Let's create a models.py file inside the accounts package.

touch src/accounts/models.py

Inside the models.py file, add the following code:

from datetime import datetime

import pyotp
from flask_login import UserMixin

from src import bcrypt, db
from config import Config


class User(db.Model):

    __tablename__ = "users"

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String, unique=True, nullable=False)
    password = db.Column(db.String, nullable=False)
    created_at = db.Column(db.DateTime, nullable=False)
    is_two_factor_authentication_enabled = db.Column(
        db.Boolean, nullable=False, default=False)
    secret_token = db.Column(db.String, unique=True)

    def __init__(self, username, password):
        self.username = username
        self.password = bcrypt.generate_password_hash(password)
        self.created_at = datetime.now()
        self.secret_token = pyotp.random_base32()

    def get_authentication_setup_uri(self):
        return pyotp.totp.TOTP(self.secret_token).provisioning_uri(
            name=self.username, issuer_name=Config.APP_NAME)

    def is_otp_valid(self, user_otp):
        totp = pyotp.parse_uri(self.get_authentication_setup_uri())
        return totp.verify(user_otp)

    def __repr__(self):
        return f"<user {self.username}>"

In the above code, you created a User model by inheriting the db.Model class. The User model consists of the following fields:

• id: stores the primary key for the users table
• username: stores the username of the user
• password: stores the hashed password of the user
• created_at: stores the timestamp when the user was created
• is_two_factor_authentication_enabled: boolean flag that stores whether the user has activated two-factor authentication. Default value is False.
• secret_token: stores a unique token generated for each user, essential for implementing two-factor authentication.

The constructor initializes the User object upon instantiation by accepting username and password parameters. It hashes the provided password using bcrypt.generate_password_hash(password), records the current timestamp as the created_at value, and generates a unique secret_token using pyotp.random_base32() for 2FA setup.

The get_authentication_setup_uri() method generates a setup URI used by authenticator apps like Google Authenticator. It constructs a URI containing the user's username and the application's name (Config.APP_NAME) necessary for setting up two-factor authentication. The basic format of the URI is:

otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example

where, alice@google.com is the username of the user and Example is the application's name.

Next up, the is_otp_valid() method verifies the one-time password (OTP) entered by the user during login. It parses the setup URI generated earlier, checks the validity of the provided OTP (user_otp), and returns True if the OTP matches, ensuring secure authentication.

Finally, the __repr__ method provides a string representation of the User object, displaying the associated username when an instance of the class is printed or represented as a string.

How to Add Flask-Login

The most important part of Flask-Login is the LoginManager class that lets your application and Flask-Login work together.

In the src/__init__.py file, add the following code:

from decouple import config
from flask import Flask
from flask_login import LoginManager # Add this line
from flask_migrate import Migrate
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config.from_object(config("APP_SETTINGS"))

login_manager = LoginManager() # Add this line
login_manager.init_app(app) # Add this line
db = SQLAlchemy(app)
migrate = Migrate(app, db)

# Registering blueprints
from src.accounts.views import accounts_bp
from src.core.views import core_bp

app.register_blueprint(accounts_bp)
app.register_blueprint(core_bp)

In the above script, we created and initialized the login manager in our app.

Next, we need to provide a user_loader callback. This callback is used to reload the user object from the user ID stored in the session. It should take the ID of a user, and return the corresponding user object.

from src.accounts.models import User

@login_manager.user_loader
def load_user(user_id):
    return User.query.filter(User.id == int(user_id)).first()

The User model should implement the following properties and methods:

• is_authenticated: This property returns True if the user is authenticated.
• is_active: This property returns True if this is an active user (the account is activated)
• is_anonymous: This property returns True if this is an anonymous user (actual users return False).
• get_id(): This method returns a string that uniquely identifies this user, and can be used to load the user from the user_loader callback.

Now, we don't need to implement these explicitly. Instead, the Flask-Login provides a UserMixin class that contains the default implementations for all of these properties and methods. We just need to inherit it in the following way:

from datetime import datetime

from flask_login import UserMixin # Add this line

from src import bcrypt, db


class User(UserMixin, db.Model): # Change this line
    ....

We can also customize the default login process in the src/__init__.py file.

The name of the login view can be set as LoginManager.login_view. The value refers to the function name that will handle the login process.

login_manager.login_view = "accounts.login"

To customize the message category, set LoginManager.login_message_category:

login_manager.login_message_category = "danger"

How to Add Templates and Static Files

Let's create a CSS file called styles.css inside the src/static folder:

.error {
  color: red;
  margin-bottom: 5px;
  text-align: center;
}

a {
  text-decoration: none;
}

Let's also create the basic templates inside the src/templates folder. Create a _base.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Two Factor Authentication</title>
    <!-- meta -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- styles -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename="styles.css")}}">
    {% block css %}{% endblock %}
  </head>
  <body>

    {% include "navigation.html" %}

    <div class="container">

      <br>

      <!-- messages -->
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
           {{message}}
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
        </div>
        <div class="col-md-4"></div>
      </div>
      {% endif %}
      {% endwith %}

      <!-- child template -->
      {% block content %}{% endblock %}

    </div>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    {% block js %}{% endblock %}
  </body>
</html>

The _base.html is the parent HTML file that will be inherited by the other templates. We have added Bootstrap 5 support in the above file. We are also making use of Flask Flashes to show Bootstrap alerts in the app.

Let's also create a navigation.html file that contains the navbar of the app:

<!-- Navigation -->
<nav class="navbar bg-dark navbar-expand-lg bg-body-tertiary p-3" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ url_for('core.home') }}">Two-Factor Authentication App</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      {% if current_user.is_authenticated %}
      <a href="{{ url_for('accounts.logout') }}"><button type="button" class="btn btn-danger me-2">Logout</button></a>
      {% endif %}
    </div>
  </div>
</nav>

Note that we have not yet created the views used above.

How to Create the Homepage

In this section, we'll first create a view function for the homepage inside the core/views.py file. Add the following code there:

from flask import Blueprint, render_template
from flask_login import login_required

core_bp = Blueprint("core", __name__)


@core_bp.route("/")
@login_required
def home():
    return render_template("core/index.html")

Notice that we have used the blueprint to add the route. We also added a @login_required middleware to prevent access for unauthenticated users.

Next, let's create an index.html file inside the templates/core folder, and add the following code:

{% extends "_base.html" %}
{% block content %}

<h1 class="text-center">Welcome {{current_user.username}}!</h1>

{% endblock %}

The HTML page will just have a welcome message for authenticated users.

Your file structure as of now should look like below:

flask-two-factor-auth/
├── src/
│   ├── accounts/
│   │   ├── __init__.py
│   │   └── views.py
│   ├── core/
│   │   ├── __init__.py
│   │   └── views.py
│   ├── static/
│   │   └── styles.css
│   ├── templates/
│   │   ├── core/
│   │   │   └── index.html
│   │   ├── _base.html
│   │   └── navigation.html
│   └── __init__.py
├── .env
├── config.py
└── manage.py

How to Implement User Registration

First of all, we'll create a registration form using Flask-WTF. Create a forms.py file inside the accounts package and add the following code:

from flask_wtf import FlaskForm
from wtforms import EmailField, PasswordField
from wtforms.validators import DataRequired, Email, EqualTo, Length

from src.accounts.models import User


class RegisterForm(FlaskForm):
    username = StringField(
        "Username", validators=[DataRequired(), Length(min=6, max=40)]
    )
    password = PasswordField(
        "Password", validators=[DataRequired(), Length(min=6, max=25)]
    )
    confirm = PasswordField(
        "Repeat password",
        validators=[
            DataRequired(),
            EqualTo("password", message="Passwords must match."),
        ],
    )

    def validate(self, extra_validators):
        initial_validation = super(RegisterForm, self).validate(extra_validators)
        if not initial_validation:
            return False
        user = User.query.filter_by(username=self.username.data).first()
        if user:
            self.username.errors.append("Username already registered")
            return False
        if self.password.data != self.confirm.data:
            self.password.errors.append("Passwords must match")
            return False
        return True

The RegisterForm extends the FlaskForm class and contains three fields – username, password, and confirm. We have added different validators such as DataRequired, Length, Email, and EqualTo to the respective fields.

We also defined a validate() method which is automatically called when the form is submitted.

Inside the method, we first perform the initial validation provided by FlaskForm. If that is successful, we perform our custom validation such as checking whether user is already registered, and matching the password with the confirmed password. If there are any errors, we append the error message in the respective fields.

Now, let's use this form inside the HTML file. Create an accounts directory inside the templates folder and add a new file called register.html inside it. Add the following code:

{% extends "_base.html" %}

{% block content %}

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <main class="form-signin w-100 m-auto">
      <form role="form" method="post" action="">
        {{ form.csrf_token }}
        <h1 class="h3 mb-3 fw-normal text-center">Please register</h1>

        <div class="form-floating">
          {{ form.username(placeholder="username", class="form-control mb-2") }}
          {{ form.username.label }}
            {% if form.username.errors %}
              {% for error in form.username.errors %}
                <div class="alert alert-danger" role="alert">
                  {{ error }}
                </div>
              {% endfor %}
            {% endif %}
        </div>
        <div class="form-floating">
          {{ form.password(placeholder="password", class="form-control mb-2") }}
          {{ form.password.label }}
            {% if form.password.errors %}
              {% for error in form.password.errors %}
                <div class="alert alert-danger" role="alert">
                  {{ error }}
                </div>
              {% endfor %}
            {% endif %}
        </div>
        <div class="form-floating">
          {{ form.confirm(placeholder="Confirm Password", class="form-control mb-2") }}
          {{ form.confirm.label }}
            {% if form.confirm.errors %}
              {% for error in form.confirm.errors %}
                <div class="alert alert-danger" role="alert">
                  {{ error }}
                </div>
              {% endfor %}
            {% endif %}
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
        <p class="text-center mt-3">Already registered? <a href="{{ url_for('accounts.login') }}">Login now</a></p>
      </form>
    </main>
  </div>
  <div class="col-md-4"></div>
</div>

{% endblock %}

In the above Jinja template, we make use of the form that we created, and add relevant error handling logic checks for validation errors in each field. Users can submit the form by clicking the "Sign up" button, and a link below the form allows already registered users to navigate to the login page for authentication.

Next, let's use this form in the views.py to create a function to handle the registration process.

from .forms import RegisterForm
from src.accounts.models import User
from src import db, bcrypt
from flask_login import current_user
from flask import Blueprint, flash, redirect, render_template, request, url_for

accounts_bp = Blueprint("accounts", __name__)

HOME_URL = "core.home"
SETUP_2FA_URL = "accounts.setup_two_factor_auth"
VERIFY_2FA_URL = "accounts.verify_two_factor_auth"

@accounts_bp.route("/register", methods=["GET", "POST"])
def register():
    if current_user.is_authenticated:
        if current_user.is_two_factor_authentication_enabled:
            flash("You are already registered.", "info")
            return redirect(url_for(HOME_URL))
        else:
            flash("You have not enabled 2-Factor Authentication. Please enable first to login.", "info")
            return redirect(url_for(SETUP_2FA_URL))
    form = RegisterForm(request.form)
    if form.validate_on_submit():
        try:
            user = User(username=form.username.data, password=form.password.data)
            db.session.add(user)
            db.session.commit()

            login_user(user)
            flash("You are registered. You have to enable 2-Factor Authentication first to login.", "success")

            return redirect(url_for(SETUP_2FA_URL))
        except Exception:
            db.session.rollback()
            flash("Registration failed. Please try again.", "danger")

    return render_template("accounts/register.html", form=form)

The route begins by checking if the current user is already authenticated. If so, it verifies whether 2FA is enabled for the user. If 2FA is already enabled, a message informs the user that they're already registered, redirecting them to the home URL. However, if the user is authenticated but 2FA is not enabled, a flash message prompts the user to enable 2FA first before logging in, redirecting them to the 2FA setup URL.

If the user is not authenticated or has not yet registered 2FA, the code initializes a registration form and proceeds to validate the form data on submission. Upon successful form validation, we create a new User object with the provided username and password and save it to the database.

Upon successful user registration, the newly registered user is logged in. A success message flashes, notifying the user of successful registration and prompting them to enable 2FA before logging in. Subsequently, the user is redirected to the 2FA setup URL to enable 2FA.

How to Implement User Login

First, let's create a login form in the accounts/forms.py file:

class LoginForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired()])
    password = PasswordField("Password", validators=[DataRequired()])

The form is similar to the registration form but it has only two fields – username and password.

Now, let's use this form inside new HTML file called login.html created inside the templates/accounts directory. Add the following code:

{% extends "_base.html" %}

{% block content %}

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <main class="form-signin w-100 m-auto">
      <form role="form" method="post" action="">
        {{ form.csrf_token }}
        <h1 class="h3 mb-3 fw-normal text-center">Please sign in</h1>

        <div class="form-floating">
          {{ form.username(placeholder="username", class="form-control mb-2") }}
          {{ form.username.label }}
            {% if form.username.errors %}
              {% for error in form.username.errors %}
              <div class="alert alert-danger" role="alert">
                {{ error }}
              </div>
              {% endfor %}
            {% endif %}
        </div>
        <div class="form-floating">
          {{ form.password(placeholder="password", class="form-control mb-2") }}
          {{ form.password.label }}
            {% if form.password.errors %}
              {% for error in form.password.errors %}
                <div class="alert alert-danger" role="alert">
                  {{ error }}
                </div>
              {% endfor %}
            {% endif %}
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        <p class="text-center mt-3">New User? <a href="{{ url_for('accounts.register') }}">Register now</a></p>
      </form>
    </main>
  </div>
  <div class="col-md-4"></div>
</div>

{% endblock %}

The above HTML file is also similar to the register.html file but with just two fields for the username and password.

Next, let's create a view function to handle the login process inside the accounts/views.py file:

from .forms import LoginForm, RegisterForm

@accounts_bp.route("/login", methods=["GET", "POST"])
def login():
    if current_user.is_authenticated:
        if current_user.is_two_factor_authentication_enabled:
            flash("You are already logged in.", "info")
            return redirect(url_for(HOME_URL))
        else:
            flash("You have not enabled 2-Factor Authentication. Please enable first to login.", "info")
            return redirect(url_for(SETUP_2FA_URL))

    form = LoginForm(request.form)
    if form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user and bcrypt.check_password_hash(user.password, request.form["password"]):
            login_user(user)
            if not current_user.is_two_factor_authentication_enabled:
                flash(
                    "You have not enabled 2-Factor Authentication. Please enable first to login.", "info")
                return redirect(url_for(SETUP_2FA_URL))
            return redirect(url_for(VERIFY_2FA_URL))
        elif not user:
            flash("You are not registered. Please register.", "danger")
        else:
            flash("Invalid username and/or password.", "danger")
    return render_template("accounts/login.html", form=form)

The route starts by checking if the current user is already authenticated. If the user is authenticated and 2FA is enabled, a message informs the user they're already logged in, redirecting them to the home URL. If the user is authenticated but 2FA isn't enabled, a flash message prompts the user to enable 2FA before logging in, redirecting them to the 2FA setup URL.

If the user isn't authenticated, the code initializes a login form and validates the form data upon submission. Upon successful validation, it queries the database to find a user matching the provided username. If the user exists and the password matches the hashed password stored in the database, the user is logged in.

Additionally, if 2FA isn't enabled for the current user after successful login, a flash message prompts the user to enable 2FA before proceeding, redirecting them to the 2FA setup URL. If the login is successful and 2FA is enabled, the user is redirected to the 2FA verification URL.

If the user isn't registered, a flash message informs them to register. If there's a mismatch in the provided username or password, another flash message notifies the user of invalid credentials.

How to Log Out the Users

Logging out the user is a very simple process. You just need to create a view function for it inside the accounts/views.py file:

from flask_login import login_required, login_user, logout_user


@accounts_bp.route("/logout")
@login_required
def logout():
    logout_user()
    flash("You were logged out.", "success")
    return redirect(url_for("accounts.login"))

The Flask-Login library contains a logout_user method that removes the user from the session. We used the @login_required decorator so that only authenticated users can logout.

How to Add the Setup 2FA Page

Up until now, we have been redirecting the users to the setup 2FA page whenever the 2FA is not enabled in their accounts, but we haven't implemented it yet. Let's do that in this section.

Let's start with the route for the page:

from src.utils import get_b64encoded_qr_image

@accounts_bp.route("/setup-2fa")
@login_required
def setup_two_factor_auth():
    secret = current_user.secret_token
    uri = current_user.get_authentication_setup_uri()
    base64_qr_image = get_b64encoded_qr_image(uri)
    return render_template("accounts/setup-2fa.html", secret=secret, qr_image=base64_qr_image)

The route, created inside accounts/views.py, ensures that only authenticated users can access it using the @login_required decorator.

Upon accessing this route, the function retrieves the current user's secret_token for 2FA setup and generates a URI through current_user.get_authentication_setup_uri() to configure an authenticator app like Google Authenticator.

It also uses get_b64encoded_qr_image(uri) to obtain a Base64-encoded QR code image representing this setup URI. We will define it below.

Finally, it renders the setup-2fa.html template, passing the user's secret_token and the Base64-encoded QR image to the template for users to scan it.

Next, create a utils.py file in the src directory and add the following code to generate the QR:

from io import BytesIO
import qrcode
from base64 import b64encode


def get_b64encoded_qr_image(data):
    print(data)
    qr = qrcode.QRCode(version=1, box_size=10, border=5)
    qr.add_data(data)
    qr.make(fit=True)
    img = qr.make_image(fill_color='black', back_color='white')
    buffered = BytesIO()
    img.save(buffered)
    return b64encode(buffered.getvalue()).decode("utf-8")

Remember the qrcode library we installed in the beginning of the tutorial? This is where we're going to use it.

Upon receiving data as input, representing the content to be embedded within the QR code, the function initializes a QRCode object using the qrcode library. It adds the provided data to this QR code instance and generates the QR code. The code then converts this QR code into an image representation.

Using a BytesIO object, it stores this image in memory. The function proceeds to encode the content of this in-memory buffer, representing the QR code image, into Base64 format. Finally, it returns this Base64-encoded string, encapsulating the QR code image, ready for transmission or display in various applications.

Next, let's create the setup-2fa.html page inside the templates/accounts folder, and add the following content:

{% extends "_base.html" %}

{% block content %}

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <main class="form-signin w-100 m-auto">
      <form role="form">
        <h5>Instructions!</h5>
          <ul>
            <li>Download <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US" target="_blank">Google Authenticator</a> on your mobile.</li>
            <li>Set up a new authenticator.</li>
            <li>Once you have scanned the QR, please click <a href="{{ url_for('accounts.verify_two_factor_auth') }}">here.</li>
          </ul>
          <div class="text-center">
            <img src="data:image/png;base64, {{ qr_image }}" alt="Secret Token" style="width:200px;height:200px"/>
          </div>
        <div class="form-group">
          <label for="secret">Secret Token</label>
          <input type="text" class="form-control" id="secret" value="{{ secret }}" readonly>
        </div>
        <div class="text-center mt-2">
          <button type="button" class="btn btn-primary" onclick="copySecret()">
            Copy Secret
          </button>
        </div>
        <p class="mt-4 text-center">
          Once you have scanned the QR, please click <a href="{{ url_for('accounts.verify_two_factor_auth') }}">here</a>.
        </p>
      </form>
    </main>
  </div>
  <div class="col-md-4"></div>
</div>

{% endblock %}

{% block js %}
<script>
    function copySecret() {
    var copyText = document.getElementById("secret");
    copyText.select();
    copyText.setSelectionRange(0, 99999); /*For mobile devices*/
    document.execCommand("copy");
    alert("Successfully copied TOTP secret token!");
  }
</script>
{% endblock %}

We add some instructions in the page for the users to follow. These instructions provide clear steps for users to enable 2FA: directing them to download the Google Authenticator app via a link, guiding the setup process within the app, and prompting users to proceed by clicking a link after scanning the displayed QR code.

Displaying the QR code is central to the setup process. The template embeds the QR code image using an <img> tag with its source set to a Base64-encoded string ({{ qr_image }}). This image represents the secret key essential for 2FA setup.

We also show the secret key in read-only mode, allowing users to view the key without being able to modify it. We have added a copy button to make it easier for the users to copy the key.

Moreover, we have added a link to the 2FA verification page guiding users to proceed with the setup process after scanning the QR code. We will implement this functionality in the next section.

Here's how your page looks right now:

2FA Setup Page

How to Add a 2FA Verification Page

In this section, let's implement the 2FA verification. To start with, we will require an OTP form where users can enter their OTP. Add the following content in the accounts/forms.py file:

class TwoFactorForm(FlaskForm):
    otp = StringField('Enter OTP', validators=[
                      InputRequired(), Length(min=6, max=6)])

The TwoFactorForm contains just one field (otp) to get the OTP from the users.

Now, let's use this form in the verify-2fa.html file inside the templates/accounts folder:

{% extends "_base.html" %}

{% block content %}

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <main class="form-signin w-100 m-auto">
      <form role="form" method="post" action="">
        {{ form.csrf_token }}
        <h1 class="h3 mb-3 fw-normal text-center">Enter OTP</h1>

        <div class="form-floating">
          {{ form.otp(placeholder="OTP", class="form-control mb-2") }}
          {{ form.otp.label }}
            {% if form.otp.errors %}
              {% for error in form.otp.errors %}
              <div class="alert alert-danger" role="alert">
                {{ error }}
              </div>
              {% endfor %}
            {% endif %}
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">Verify</button>
      </form>
    </main>
  </div>
  <div class="col-md-4"></div>
</div>

{% endblock %}

The Jinja template essentially contains a form with one field for OTP and a verify button.

Let's create the route which handles the submission of this form inside the accounts/views.py file:

@accounts_bp.route("/verify-2fa", methods=["GET", "POST"])
@login_required
def verify_two_factor_auth():
    form = TwoFactorForm(request.form)
    if form.validate_on_submit():
        if current_user.is_otp_valid(form.otp.data):
            if current_user.is_two_factor_authentication_enabled:
                flash("2FA verification successful. You are logged in!", "success")
                return redirect(url_for(HOME_URL))
            else:
                try:
                    current_user.is_two_factor_authentication_enabled = True
                    db.session.commit()
                    flash("2FA setup successful. You are logged in!", "success")
                    return redirect(url_for(HOME_URL))
                except Exception:
                    db.session.rollback()
                    flash("2FA setup failed. Please try again.", "danger")
                    return redirect(url_for(VERIFY_2FA_URL))
        else:
            flash("Invalid OTP. Please try again.", "danger")
            return redirect(url_for(VERIFY_2FA_URL))
    else:
        if not current_user.is_two_factor_authentication_enabled:
            flash(
                "You have not enabled 2-Factor Authentication. Please enable it first.", "info")
        return render_template("accounts/verify-2fa.html", form=form)

The route starts by initializing a form (TwoFactorForm) meant for 2FA verification using the data obtained from the request. Upon form submission, the code proceeds with several conditional checks to validate the OTP entered by the user.

Once the form has been successfully submitted and validated, the code verifies the authenticity of the OTP using current_user.is_otp_valid(form.otp.data), which checks if the entered OTP is valid for the current user. If the OTP is valid, the code executes the following logic:

• If the provided OTP is valid and 2FA is already enabled for the user, a success message is flashed indicating successful 2FA verification, and the user is redirected to the home URL.
• If the OTP is valid but 2FA isn't enabled for the user, it attempts to enable 2FA for that user. Upon successful activation, a success message flashes, and the user is redirected to the home URL.

Furthermore, if the OTP entered by the user is invalid, the code flashes an error message indicating an invalid OTP and redirects the user back to the 2FA verification URL to retry the verification process.

2FA Verification Page

With this, we have completed the implementation of all the features! 🎉

How to Run the Completed App for the First Time

Now that our application is ready, you can first migrate the database, and then run the app.

To initialize the database (create a migration repository), use the command:

flask db init

To migrate the database changes, use the command:

flask db migrate

To apply the migrations, use the command:

flask db upgrade

Since this is the first time we're running our app, you'll need to run all the above commands. Later, whenever you make changes to the database, you'll just need to run the last two commands.

After that, you can run your application using the command:

python manage.py run

Since we have completed the development, here's how your file structure should look like:

flask-two-factor-auth/
├── migrations/
├── src/
│   ├── accounts/
│   │   ├── __init__.py
│   │   ├── forms.py
│   │   ├── models.py
│   │   └── views.py
│   ├── core/
│   │   ├── __init__.py
│   │   └── views.py
│   ├── static/
│   │   └── styles.css
│   ├── templates/
│   │   ├── accounts/
│   │   │   ├── login.html
│   │   │   ├── register.html
│   │   │   ├── setup-2fa.html
│   │   │   └── verify-2fa.html
│   │   ├── core/
│   │   │   └── index.html
│   │   ├── _base.html
│   │   └── navigation.html
│   ├── __init__.py
│   └── utils.py
├── .env
├── config.py
└── manage.py

Wrapping up

In this tutorial, you learned how to set up two-factor authentication in your Flask app using PyOTP.

Here's the link to the GitHub repository. Feel free to check it out whenever you're stuck.

Here are some other tutorials I wrote about authentication, email verification, and OTPs that you might enjoy:

• How to Set Up Basic User Authentication in a Flask App
• How to Set Up Email Verification in a Flask App
• How To Generate OTPs Using PyOTP in Python

Thank you for reading. I hope you found this article useful. You can follow me on Twitter.

But if you ever lose access to all your 2FA methods, you have lost your account. How do you prevent such loss?

In this article, we will look at two-factor authentication (2FA), its methods, and how to prevent account loss because of using it.

Table of Contents

• What is Two-Factor Authentication (2FA)?
• Methods of Two-Factor Authentication
• The problem with Two-Factor Authentication
• How to Protect Yourself from Losing Access to Your Accounts
• Backup and write down the recovery code(s)
• Backup and write down the authenticator app seed
• Set up more than one 2FA method
• Always update 2FA methods
• Set up recovery email and phone
• Summary

What is Two-Factor Authentication (2FA)?

Two-Factor Authentication is an extra security setting for your account that many platforms have enabled.

It is an extra security setting because you already have some "first" way of authenticating yourself. This "first" way could be password sign-in or federated identity sign-in. Federated identity means signing in with another provider, like Apple, Facebook, Google, and so on.

Two-Factor authentication helps reduce unauthorized access to your data or account. It is a second sign-in step to verify that you are the owner of the account. So, in addition to your first sign-in method, you will have to complete this second step (hence two-factor) to access your account.

Two-Factor authentication is not about using and securing your passwords. That one is basic account security. We are talking about an advanced security step where, after entering your password, you still need to enter some code or complete some action before you gain access to your account.

In this article, platform means any place where you can sign in and sign out. freeCodeCamp, LinkedIn, and Twitter are examples of platforms. In this article, a platform is a place where you have an account.

Some platforms don't offer 2FA. You might have relatively little data with them. So 2FA would be overkill there. On the other hand, the major and mainstream platforms where you can have an account offer 2FA. These are platforms where a user's account is worth hacking.

In most platforms, 2FA is optional. In a few, however, you are required to set up 2FA from the very first time you access the account and you can't turn it off. In other words, 2FA is a must-do on a few platforms.

You should set up 2FA where it is available. To set up 2FA, go to the security settings of your account on a supporting platform. Set up 2FA using at least of one the specified methods and you are good to go. On subsequent sign-ins, you will need to complete 2FA to enter the account.

Methods of Two-Factor Authentication

Methods of 2FA refer to the various ways to set up 2FA. They are as follows:

1. Security Key 2FA
2. Phone number 2FA
3. Authenticator app 2FA
4. Sign-In prompt
5. Recovery code(s)

Security keys are USB or Bluetooth keys that you can connect to your device. They are physical 2FA devices and seem to be the most secure. This is because it is highly unlikely that a hacker would come and steal the key from your house.

To set up 2FA using keys, plug in the key or connect via Bluetooth and complete the steps. You can then use the key in consequent sign-ins. You have to buy these keys from the market or online to use them.

Phone number 2FA involves receiving a One-Time Password (OTP) code either via call or SMS. Provide a phone number and the platform sends an OTP to it. Sometimes, you could receive an automated call with the code. Either way, enter the code in the platform and you have successfully set up the phone number 2FA.

On subsequent sign-ins to access your account, after entering your password, you will receive an OTP code to that phone. Enter the code to gain access to your account.

Authenticator apps generate a 6-digit code every minute. There are many authenticator apps, like Google Authenticator, Microsoft Authenticator, and others.

To set up an authenticator app, you either scan a QR code or enter a seed phrase. The platform where your account resides will provide you with either of these. Scan or enter the phrase and you will keep getting a unique 6-digit code every minute.

In the next sign-ins, after entering your password, paste the latest 6-digit code from the authenticator app and you are in.

Sign-in prompts are not as common as other 2FA methods. Not all platforms have this feature. It involves authorizing your sign-in from an app or website of that platform where you are already signed in.

GitHub and Google have these features. With the GitHub app, you can complete 2FA by entering a number on the screen from the app/website you signed in to. Google does it together with your Android device and your Google account.

Aside from the above 2FA methods, we also have recovery codes. Recovery codes are a one-time-use code that you can use to complete 2FA. You can access them under the 2FA settings of your account.

In fact, once you set at least one 2FA method on your account, the platform autogenerates these recovery codes for you. These codes are like a backup option for 2FA. You are meant to use them when you don't have access to the other 2FA methods.

The Problem with Two-Factor Authentication

The problem with 2FA is that if you lose access to all the methods you've set up, you've permanently lost access to that account. Let me explain.

2FA ensures that it is the correct user that is accessing an account. That's why we have those above secondary methods aside from your password. 2FA can only be enabled or disabled while signed in.

But aside from the recovery codes, there is no other recovery mechanism. If you lose the security keys, phone number, devices with the authenticator apps and previous sign-ins, and the recovery codes, your account is gone. Not even the account support for that platform can help you.

This is not the common "Forgot Password" feature, where the platform sends a unique link or code to your email or phone to reset your password. This is 2FA. Once you lose all 2FA methods you had set, your account is gone. Support can't give you the recovery codes because they don't know them. Those codes are encrypted with your account's access (only you can access them when you are signed in).

Does this mean that you shouldn't set up 2FA?

No. It means that in addition to setting up 2FA, you have to guard your 2FA methods. Remember that it is security that led us to 2FA. Well, 2FA itself also needs security. So you have to secure it.

From here, we will be looking at the various things you can do to prevent account loss due to Two-Factor Authentication.

How to Protect Yourself from Losing Access to Your Accounts

1. Backup and write down the recovery code(s)

All platforms that grant 2FA also give a recovery code(s). Always back them up. Copy and save the recovery codes securely somewhere of your choice. Hide them discretely online. Encrypt them in some vaulted storage.

Most importantly, write them down. Like use your hand and write with a pen in some diary or book you won't lose. You can equally print and store them with your documents and certificates. Just protect each recovery code per platform in the most secure way you're able.

Also, don't store the recovery code of an account in that same account. No one keeps spare keys inside the house. You give out your spare keys to trusted persons or keep them in other places where you can go retrieve them when need be. This is because if your main key goes missing while you are out, you can go and retrieve the spares. You can't retrieve the spare keys when they are inside the house and you are locked out.

In the same vein, it makes no sense to keep the recovery codes of your Google Account's 2FA inside your account's Google Drive or in a private Google Doc owned by the same account. When you will need it, you can't get it.

Recovery codes are one-time-use codes. You can't reuse the same recovery code for another 2FA session. You shouldn't really be using your recovery codes. If you start using them, it is a sign that you need to either update your 2FA methods, turn off 2FA temporarily, or regenerate a new set of recovery codes (to replace the used ones).

You can always copy out your recovery codes. Also, you can always generate a new set of recovery codes in each platform. Every platform permits that. Remember that you have to be signed in to do all these things.

Also, anytime you disable or turn off two-factor authentication in your account settings, the previous recovery codes become invalid. If you enable 2FA again, you will need to re-backup and re-write the new recovery codes.

Make sure you store recovery code(s) for each platform in multiple and different places.

2. Backup and write down the authenticator app seed

When setting up the authenticator app 2FA, don't use the QR code option. Go for the seed option. The seed for authenticator apps comes as a series of about 20 to 40 alphanumeric characters. When the platform shows you this seed, first write it down.

Write down the authenticator app seed in your diary or in some book you've set aside for backup. If possible, copy it out and print it. Equally backup the seed for each platform in some other online media where you can retrieve it from. You want to minimize your chances of losing these seeds.

Each minute, authenticator apps generate 6-digit codes based on the seed and not based on the app itself or the platform. If you paste that same seed into another authenticator app, the two apps will be generating the exact same 6 digits, every minute. In fact, if you re-use that exact same phrase to recreate another 2FA entry in the same authenticator app, the two entries will be generating the same 6-digit code per minute.

This is why the authenticator app seed is as important as the 2FA recovery codes. If you lose access to the device that your 2FA authenticator app is on, you can put your seeds in another authenticator and get back the 6-digit codes for 2FA. Protect these seeds too. Because if someone has both your passwords and seeds, then they have access to your accounts.

Backing up and writing down authenticator app seeds is necessary and it is under-preached. Many people don't realize that device loss means account loss if the authenticator app was their only 2FA method and if they didn't save the seed and recovery codes somewhere.

A device crash can happen. The Operating System might crash and you may lose apps and data. The authenticator app could be mistakenly uninstalled. Backing up and writing down the seeds prevent these circumstances from affecting your 2FA setups.

You can reinstall the authenticator app and reconfigure the entries of each account from your saved seed, without needing to go to the account settings of each platform. Also, you will be capable of continuing to use your two-factor authentication methods, without needing to re-backup or re-write down a new set of recovery codes.

If you've already set up the authenticator app 2FA, and you didn't save the original seed your account's platform gave you, please, please, please go and reconfigure the authenticator app 2FA in your security settings. You might have to just disable only the authenticator app and turn it back on. While re-enabling, make sure you back up and write down the seed. You don't want to live the experience of being locked out of your account.

3. Set up more than one 2FA method

Setting up more than one method for two-factor authentication reduces your chances of account loss. The idea is to ensure that you always have access to at least one (if not all) 2FA methods. You can set up all the available 2FA methods per platform account.

For USB/Bluetooth security key, you can use the same key for all your accounts across various platforms. For your phone number, you can use the same phone number across each account on each platform. (But some platforms don't permit you to have multiple accounts with the same phone number. Have this in mind if you fall into that category).

The authenticator app seed for each account per platform is different. But you can use the same authenticator app for all accounts in which you've set up 2FA. Just remember to back up and write down the seeds as mentioned in the previous section.

So for each platform, you want to ensure that you have set more than one 2FA method. You can receive an SMS with some phone number. You have a working authenticator app. You've backed up and written down the authenticator app seed and 2FA recovery codes. And where you can, you've equally set up the USB/Bluetooth security key.

4. Always update 2FA methods

Things can happen that warrant updating your 2FA methods. Updating 2FA methods include removing or adding some methods. You can equally change the settings of the same method.

For example, let's say you never had a security key in your account. But you had set up 2FA with a phone number and authenticator app. Then you just bought a new security key. You can go and add the security key in your 2FA settings as a new method. On the other hand, if you lose your USB/Bluetooth security key, you can disable the security key option. Then when you buy a new one, you can put it back in your settings.

If you lost your all backups and written-down versions of your authenticator app seeds and 2FA recovery codes, you can regenerate new ones and re-backup and re-write down. You really shouldn't lose everything. Such loss is not good. Well, anything is possible. Prevention is the only remedy as there is no cure in the world for complete 2FA loss.

Also, it is okay to turn off 2FA if you need to. 2FA is recommended and necessary. But if you see the need to, turn it off for the moment. Then set it up back sometime later on.

5. Set up recovery email and phone

Backup email and phone are not really a 2FA thing. The reason is they are always there whether you configure two-factor or not. Most major platforms permit you to set a recovery email and or a recovery phone number for your account. These recovery assets come in handy when you forget your password and not when you lose 2FA.

Well, we are talking about security, so it is worth mentioning that you should have recovery email and phone properly set up where possible.

In some platforms, your account or your recovery phone number can be different from your 2FA phone number. Your 2FA phone number must always be one where you can receive an OTP (via call or SMS) and use it to complete the 2FA step.

Summary

You want to lock out malicious access to your account. But you don't want to lock out yourself.

In this guide, we've looked at how to best use the two-factor authentication feature across various accounts. At the same time, we've also seen how you can ensure that you don't lose access to your account because you tried securing it in the first place.

Back up and write down recovery codes and authenticator app seeds. Set up multiple 2FA methods. Always review and update your 2FA settings. Do these and be rest assured of the best online security.

Cheers!

With the rise of cyber-threats, companies need to ensure that their users are authenticated before accessing any sensitive information. This helps protect the online safety of both parties.

In the past, the most common authentication method that we're all likely familiar with was using a username and password to sign in to apps and services.

And if you're a programmer, you've likely developed projects where you have implemented this method as a form of authentication.

But hey! Guess what? Things have changed over the past couple of years. With advancements in technology, this means security has to be taken more seriously and we need more strict authentication approaches.

And that's what we'll learn about in this tutorial.

Different Authentication Methods

There are many different methods of authenticating users, and each has its own advantages and disadvantages. The most common methods of user authentication are:

• username and password,
• two-factor authentication,
• biometrics

just to list a few.

But as time passes, we continue to evolve and new methods are introduced that provide a safer way to store user data. Some examples of these methods include:

• Passwordless login
• Multi-factor authentication, and
• Token-based authentication

In this article, we will explore the most common methods of user authentication. By understanding the different options available, you can choose the best method for your needs.

But first, let's understand what we mean by authentication.

What is User Authentication?

To better understand what authentication is all about, we can relate it to a real world example.

Let's take a scenario where you are out at the store shopping and you need to make a payment with your credit card. You go through the steps of swiping your card to authenticate the payment, but what really happens before the transaction is complete?

After swiping your card, the machine will read the card info and send it to the issuer for verification. The issuer will then check for a couple of things in order to verify the transaction.

In this case, the issuer will check the card info against what is on record, like expiry date, card number, and account balance. If everything matches what is on record and there are sufficient funds, an authorization message is sent and the transaction is allowed.

In a case where the info doesn't match and/or there are not enough funds, a decline message is instead sent and the transaction is declined.

Now with this understanding, authentication is the process of verifying the identity of a user. User authentication verifies the identity of a user before granting access to sensitive information or systems.

What are some common authentication methods?

There are many ways to authenticate a user, and each platform has different methods that they use. But as I mentioned above, some common methods include username and password, fingerprint, facial recognition, and iris scan.

Username/password authentication

Username and password are the most common form of authentication. This is where a user enters their username and password into a login form, and if the credentials match what is stored in the database, the user is granted access.

But keep in mind that this method can be insecure if passwords are not properly encrypted or if users reuse the same password for multiple accounts.

Biometric authentication methods

Fingerprint authentication uses an individual's unique fingerprint to verify their identity. This can be done using a fingerprint scanner or by using a smartphone's built-in sensor.

This method is most commonly used in smart phones and recently there has been an increase in the use of this method in laptops, too.

Facial recognition works in a similar way, using an image of the user's face to verify their identity. Iris scanning is another biometric authentication method that uses an image of the user's iris to identify them.

More Secure Authentication Methods

Even though these have historically been the most common methods, recently we have seen a rise in other methods which are said to be more secure.

In fact, many organizations are turning to these techniques in addition to the user providing a username and password. This is considered an extra layer of security.

These newer techniques include:

1. Two-Factor Authentication

Two-factor authentication, also known as 2FA, is an additional layer of security that can be used to protect your account.

2FA is a way of verifying a user from two different approaches, thats is: using something the user already knows (like their username and password), and using something the user has, like a phone.

When 2FA is enabled, apart from entering the username and password correctly, you will be prompted for the second piece of information (usually a code generated by an app on your phone or a code sent via SMS). This makes it much more difficult for someone to gain access to your account, even if they have your password.

2FA is not foolproof, but it is more secure compared to using only username and password. This makes it a valuable tool to help keep your account safe. If you are concerned about the security of your account, enabling 2FA will be of great help.

2. Passwordless Login

Passwordless login, just as the name suggests, is a method of logging into an account without needing a username or a password. There are many reasons why you might want to stop using a password and opt for a passwordless login experience.

For one, it's more convenient for users. They don't have to remember yet another username and password combination. And two, it's more secure. There are no weak passwords to be guessed or brute-forced by attackers.

So how do you set up a passwordless login? There are a few different methods you can use, each with its own set of pros and cons.

Different methods of passwordless login

One popular method is to use an email link. When the user wants to log in, they provide their email address. They then receive an email with a link that expires after a certain amount of time. When they click the link, they're logged in without having to enter a password.

Another option is to use a one-time code generated by an app on the user's phone. The code is valid for only a short period of time, so even if someone were to intercept it, they wouldn't be able to use it.

Which method is best for you depends on your security needs and preferences. But whatever you choose, ditching the password is sure to make life easier for your users - and make your site more secure in the process.

For a practical guide on how to use the passwordless method, Auth0 has a step-by-step video guide on how to implement this.

3. Multi-factor Authentication

Also known as MFA, multi-factor authentication is an authentication method that requires a user to verify their identity by providing more than one piece of information that identifies them. This can range from something the user knows, has, or is.

This means that in addition to having a username and password, you will be required to provide extra proof depending on the system you are trying to access. This extra proof can range from a fingerprint to a secret security key or even a code generated randomly.

A good example of this authentication is when you set up an online banking system. Despite having entered a correct username and password, your might be required to either provide your fingerprint or even a code in order for some transaction to happen.

This means that even if someone was to obtain your username and password, they would still need your fingerprint or a code that has been sent to your phone in order to accomplish a specific task.

4. Token-Based Authentication

Token-based authentication is a method of authenticating users that involves providing them with a unique token. This token can be used to identify the user and provide access to certain resources. The toke usually contains a string of characters generated by the system that's sent to the user's device or email.

There are many benefits to using token-based authentication, including improved security and scalability.

Tokens, while costly and inconvenient at times, provide a greater level of security than passwords or biometrics since they are only issued when requested. In addition to this, they can also be set to expire after a certain period of time, making it more secure compared to the traditional approaches.

This method is relatively new and it has become more popular in recent years as web applications have become more complex and distributed across multiple servers. It offers several other advantages over other methods.

With token-based authentication, the token is stored on the client side, making it much more secure. In addition, since there's no need to store tokens on the server, scaling becomes much easier.

Overall, token-based authentication offers better security and performance than other methods. If you're looking to implement an auth system for your web application, consider using tokens.

Conclusion

User authentication is a critical part of any application, whether it's mobile or web.

It is important to choose an authentication method that is both secure and easy to use.

There are many different factors to consider when choosing an authentication method, but the most important thing is to choose one that will protect your users' data. Hopefully this article has given you some insights into how to do that.

With Cybersecurity becoming a big concern, two-factor authentication (2FA) is a topic that is becoming hotter with each passing day.

After all, who doesn’t want to keep their private data safe? Two-factor authentication may not be a bulletproof solution but is one of the easiest and best ways to shore up your virtual security.

Treat 2-factor authentication as a supplement to strong passwords, not as a replacement.

Two-factor authentication adds another security layer to the login process, reducing the chances of your account getting hacked. Just knowing and entering your password is not enough since there is a second layer which is usually time sensitive. This makes the process a whole lot more secure.

Here are some facts you would want to know before you enable two-factor authentication:

Four out of five data breaches could be avoided by using 2FA

Cyber threats are on a rise and 2-factor authentication actually helps to counter them.

Majority of the hacking-related breaches take place due to weak or stolen passwords. Since many users tend to use the same password everywhere, the risk grows ten fold. Clearly, something more than just passwords are needed.

According to a Verizon’s Data Breach Report, 80% of data breaches could be eliminated by the use of two-factor authentication.

2FA makes sure that even if your password gets compromised, the hacker has to crack another security layer before they can access your account. And since most of the 2FA methods are time-dependent, it makes the hacker’s job so much more difficult.

No wonder all the major websites and banks provide an option to enable 2-factor security.

Two-factor authentication is not a replacement for strong passwords

Weak and repeated passwords are a bane to Cyber security. No matter which account or service you’re using, it’s always best to set a unique complex password.

Using repeated passwords all over the Internet makes us vulnerable to massive impacts even if one site’s security gets breached. In such a case, all our accounts can be at the attacker’s disposal.

Even if you enable two-factor authentication, strong passwords are a must. As mentioned earlier, treat 2FA as a supplement to strong passwords, not as a replacement.

Always use a complex combination of letters, numbers, and special symbols to generate a strong and unique password for each service you use. You can also use a service like LastPass to easily manage your passwords.

Facebook is one of the leading companies supporting two-factor authentication.

There are two ways you can get the passcodes

You can generate the passcodes for 2FA in multiple ways. Codes can be generated on the server and then sent to you via Email, SMS or phone call. This usually requires network connectivity for your mobile and thus can leave you prone to inaccessible accounts in remote areas.

The other option is to generate the passcode offline on your phone or a hardware device. You can easily generate 2FA passcodes on your phone via apps like Google Authenticator, Authy or TOTP Authenticator. There are also hardware devices like YubiKey available in the market for setting up two-factor authentication.

This method is more robust as no data connectivity is required, leaving you less prone to network phishing.

In some cases, the second step can also be biometric verification or entering a PIN you set by yourself earlier.

Always back up. You don’t want to be locked out of your account

2FA works on the premise that you always have access to the secondary passcode. But in case you use a 2-factor authentication app and you lose your phone or your data gets wiped out, you can be locked out of your account.

To avoid such a scenario, some websites provide backup codes which you must save securely and can use in such situations. Alternatively, you can use an authentication app which provides the option to back up your security key and related data.

We developed the TOTP Authentication app for iOS and Android keeping this in mind. The app allows you to back up your security key and related information either to your device or to online storage options such as Google Drive in a hassle free way. The encrypted backup file can be set up on another device with just a couple of taps. You can download the app from iTunes store from here, and from Google Play Store from here.

Conclusion

Two-factor authentication is slowly becoming a norm in the digital world. Most of the banks, cloud storage services and social media websites already provide the option. You should switch on 2FA wherever possible. As they say, prevention is better than cure.

Have any questions about 2FA authentication? Shoot them in the comments!

To know more about 2-factor authentication you can also check out this article.

With the increase in cyber security threats, it has become more and more necessary to upgrade the security standards of your web applications. You need to make sure your users’ accounts are safe.

Nowadays, a lot of online web applications are asking users to add an extra layer of security for their account. They do it by enabling 2-factor authentication. There are various methods of implementing 2-factor authentication, and TOTP (the Time-based One-Time Password algorithm) authentication is one of them.

This article explains what it is, and how and why to use it. But before understanding that, let’s first briefly take a look at what two-factor authentication means.

What is Two Factor Authentication?

Two-factor authentication (or multi factor authentication) is just an extra layer of security for a user’s account. That means that, after enabling two factor authentication, the user has to go through one more step to log in successfully. For example, the usual steps for logging in to an account are:

But after enabling 2-factor authentication, the steps look something like this:

So this adds one more step to the login process. This method is more secure, because a criminal cannot access the user’s account unless they have access to both the user’s regular password and one time password.

Currently, there are two widely used methods to get that one time password:

1. SMS-based: In this method, every time the user logs in, they receive a text message to their registered phone number, which contains a One Time Password.
2. TOTP-based: In this method, while enabling 2-factor authentication, the user is asked to scan a QR image using a specific smartphone application.
   That application then continuously generates the One Time Password for the user.

The SMS-based method does not need any explanation. It’s easy, but it has its own problems, like waiting for the SMS on every login attempt, security issues, and so on. The TOTP-based method is becoming popular because of it’s advantages over the SMS-based method. So let’s understand how the TOTP-based method works.

How the TOTP-based method works

Before understanding this, let’s first discuss what problems this method will solve for us.

By using the TOTP method, we are creating a one time password on the user side (instead of server side) through a smartphone application.

This means that users always have access to their one time password. So it prevents the server from sending a text message every time user tries to login.

Also, the generated password changes after a certain time interval, so it behaves like a one time password.

Great! Now let’s understand the workings of the TOTP-method and try to implement the above solution ourselves. Our requirement here is to create a password on the user side, and that password should keep changing.

The following could be a way to implement this solution:

When the user enables two factor authentication:

1. Backend server creates a secret key for that particular user.2. Server then shares that secret key with the user’s phone application.3. Phone application initializes a counter.4. Phone application generate a one time password using that secret key and counter.5. Phone application changes the counter after a certain interval and regenerates the one time password making it dynamic.

This should work, but there are three main problems with it:

1. How will the application generate a one time password using a secret key and counter?
2. How will the counter update? How will the web server keep track of the counter?
3. How will the server share the secret key with the phone’s application?

The solution to the first problem is defined in the HOTP algorithm.

Understanding HOTP:

HOTP stands for “HMAC-Based One-Time Password”. This algorithm was published as RFC4226 by the Internet Engineering Task Force (IETF). HOTP defines an algorithm to create a one time password from a secret key and a counter.

You can use this algorithm in two steps:

1. The first step is to create an HMAC hash from a secret key and counter.

// Obtain HMAC hash (using SHA-1 hashing algorithm) by secretKey and counter

hmacHash = HMAC-SHA-1(secretKey, counter);

2. In this code, the output would be a 20 byte long string. That long string is not suitable as a one time password. So we need a way to truncate that string. HOTP defines a way to truncate that string to our desired length.

// hmacHash[19] means 19th byte of the string.offset = hmacHash[19] & 0xf;

truncatedHash = (hmacHash[offset++] & 0x7f) << 24 | (hmacHash[offset++] & 0xff) << 16 | (hmacHash[offset++] & 0xff) << 8 | (hmacHashh[offset++] & 0xff);

finalOTP = (truncatedHash % (10 ^ numberOfDigitsRequiredInOTP));

It might look scary, but it is not. In this algorithm, we first obtain offset which is the last 4 bits of hmacHash[19]. After that, we concatenate the bytes from hmacHash[offset] to hmacHash[offset+3] and store the last 31 bits to truncatedHash. Finally, using a simple modulo operation, we obtain the one time password that’s a reasonable length.

This pretty much defines the HOTP algorithm. The RFA4226 doc explains why this is the most secure way to obtain a one time password from these two values.

Great! So we have found a way to obtain a one time password using a secret key and counter. But what about the second problem? How to keep track of the counter?

The solution to second problem is found in the TOTP.

Understanding TOTP:

TOTP stands for “Time-Based One-Time Password”. This was published as RFC6238 by IETF.

A TOTP uses the HOTP algorithm to obtain the one time password. The only difference is that it uses “Time” in the place of “counter,” and that gives the solution to our second problem.

That means that instead of initializing the counter and keeping track of it, we can use time as a counter in the HOTP algorithm to obtain the OTP. As a server and phone both have access to time, neither of them has to keep track of the counter.

Also, to avoid the problem of different time zones of the server and phone, we can use a Unix timestamp, which is independent of time zones.

However the Unix time is defined in seconds, so it changes every second. That means the generated password will change every second which is not good. Instead, we need to add a significant interval before changing the password. For example, the Google Authenticator App changes the code every 30 seconds.

counter = currentUnixTime / 30

So we have solved the problem of the counter. Now we need to address our third problem: sharing the secret key with the phone application. Here, a QR code can help us.

Using a QR code

Though we can ask the users to type the secret key into their phone application directly, we want to make secret keys quite long for security reasons. Asking the user to type in such a long string would not be a user friendly experience.

Since the majority of smartphones are equipped with a camera, we can use it and ask the user to scan a QR code to obtain the secret key from it. So all we need to do is to convert the secret key in the QR code and show it to the user.

We have solved all three problems! And now you know how TOTP works. Let’s see how to implement it in an application.

How to implement TOTP

There are some free phone applications (like Google Authenticator App, Authy, and so on) available which can generate an OTP for the user. Therefore, in most cases, creating your own phone application is not necessary.

The following pseudo codes explain a way to implement TOTP-based 2-factor authentication in a web application.

When user request to enable 2-factor authentication

// Generate a secret key of length 20.secretKey = generateSecretKey(20);

// Save that secret key in database for this particular user.saveUserSecretKey(userId, secretKey);

// convert that secret key into qr image.qrCode = convertToQrCode(secretKey);

// send the qr image as responseresponse(qrCode);

The user is asked to scan that QR code. When the phone application scans the QR code, it gets the user’s secret key. Using that secret key, the current Unix time, and the HOTP algorithm, the phone application will generate and display the password.

We ask the user to type the generated code after scanning the QR code. This is required, because we want to make sure that the user has successfully scanned the image and the phone application has successfully generated the code.

User types the code displayed in the application.

// Fetch secret key from database.secretKey = getSecretKeyOfUser(userId);

if (codeTypedByUser == getHOTP(secretKey, currentUnixTime / 30)) {   enableTwoFactorAuthentication(userId);}

Here we use the HOTP algorithm on the server side to get the OTP-based authentication on the secret key and current unix time. If that OTP is the same as the one typed by the user, then we can enable 2-factor authentication for that user.

Now after every login operation, we need to check if this particular user has 2-factor authentication enabled. If it is enabled, then we ask for the one time password displayed in the phone application. And if that typed code is correct, only then is the user authenticated.

User types the code displayed in the phone application to login

// Fetch secret key from database.secretKey = getSecretKeyOfUser(userId);

if (codeTypedByUser == getHOTP(secretKey, currentUnixTime)) {   signIn(userId);}

What happens if the user loses the code?

There are a couple of ways to help the user to recover the code. Usually when they are enabling 2-factor authentication, we can show the secret key to them along with the QR code and ask them to save that code somewhere safely.

Applications like Google Authenticator App let you generate the password by directly entering the secret key. If the user loses the code, they can enter that safely saved secret key in the phone application to generate the OTP again.

If we have the user’s phone number, we can also use the SMS-based method to send an OTP to the user to help them recover the code.

Wrapping Up

Two factor authentication is gaining popularity. A lot of web applications are implementing it for extra security.

Unlike the SMS-based method, the TOTP method does not require a lot of extra effort either. So this feature is worth implementing for any application.