Adding Two-Factor Authentication (2FA) in Strapi with Users and Permissions via Email and Authenticator App

[emekaemego]

What is your article idea?

In this tutorial, I will guide readers in in adding two-factor authentication (2FA) via email and authenticator apps to Strapi application by extending the Users and Permissions plugin. I will walk through the process of adding 2FA to enhance the security of user authentication, while explaining the backend and frontend implementations.

The article will describe how to override and extend the default register and login actions, and routes of the Users and Permissions plugin with custom controller and actions, create a custom Content Type for managing email-based one-time passwords (OTP), and extend the User and Permissions model to handle Time-based One-Time Password (TOTP) information. The tutorial will cover generating and validating TOTP codes for authenticator apps like Google Authenticator and enabling QR code display on the frontend to make the process user-friendly.

Also, the tutorial will introduce and explain what 2FA and TOTP are, describe different approaches of extending the register and callback actions for implementing 2FA, and explain why the chosen method.

The article will cover:

• Setting up the project and extending the Users and Permissions plugin.
• Customizing Strapi application by integrate 2FA steps with custom controller actions that extend the default register and callback actions.
• Creating a Content Type to manage email OTP.
• Extending the plugin models to store TOTP-related data.
• Explaining the 2FA workflow and how to integrate email-based OTP.
• Implementing TOTP, including generating and validating codes for authenticator apps.
• Generating a QR code for TOTP setup on the frontend.
• Building a Next.js frontend application for registration and login with 2FA options.
• Sending OTP via email
• Enabling users to scan a QR code to set up TOTP in their authenticator app.
• Switching from email OTP to TOTP with authenticator app
• Explaining the need for 2FA and how it strengthens user account security.

What are the objectives of your article?

The key objectives of this article are:

• Readers will learn how to customize and extend the default Users and Permissions plugin by adding two-factor authentication (2FA) to improve security for users' accounts.

• The article will help readers through building both backend and frontend (Next.js) application, including OTP via email, TOTP generation and validation, and frontend QR code enrolment and validation for authenticator apps.

• The article will explain what 2FA is and how it works, along with an introduction to TOTP, explaining the needs of adding these features for secure authentication systems.

• Readers will see practical steps to improve user authentication through a detailed 2FA system, including the implementation of email OTP and TOTP for authenticator apps.

• Readers will learn how to create custom controllers, work with Server API, Entity Service API, Routes override, and some other useful Strapi customizations APIs.

What is your expertise as a developer or writer?

Advance

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[Theodore-Kelechukwu-Onyejiaku]

Hi @emekaemego ,

Could you please be more specific about the idea you are proposing. Do you want to extend Strapi by creating an OTP-based User Sign-Up with and email provider using Strapi?

[emekaemego]

Hi @emekaemego ,

Could you please be more specific about the idea you are proposing. Do you want to extend Strapi by creating an OTP-based User Sign-Up with and email provider using Strapi?

Hi @Theodore-Kelechukwu-Onyejiaku ,

Yes, I want to extend Strapi by creating an OTP-based user Sign-In with the email provider using Strapi. To simplify:

• I will intercept the user registration request (/api/auth/local/register) with a custom controller action, then invoke the plugins-users-permissions/server/controllers/auth/register action within it to prevent the JWT token from being sent after registration.

• I will also reroute requests to /api/auth/local to a custom controller action, which will process the request through plugins-users-permissions/server/controllers/auth/callback action. If the provider is email, additional steps will be taken to manage the OTP/TOTP flow.

[Theodore-Kelechukwu-Onyejiaku]

Thank you.

Please proceed.

[emekaemego]

Hi @Theodore-Kelechukwu-Onyejiaku,

My draft is ready for review:

Adding Two-factor Authentication in Strapi 5 with Email and Authenticator App : Part 1 https://hackmd.io/@emeka/r1u3gwlxyx
Adding Two-factor Authentication in Strapi 5 with Email and Authenticator App : Part 2 https://hackmd.io/@emeka/H1m9_07x1l

Thank you.

[Theodore-Kelechukwu-Onyejiaku]

Thank you @emekaemego!

I will now add this to the review backlog. Thank you for your contribution 💪

[Theodore-Kelechukwu-Onyejiaku]

Hi @emekaemego ,

Thank you for your interesting article. Could you please ping me the following details on Discord:

• Full Name
• Photo
• Email address
• Bio
• Job Title
• Twitter handle

Thank you!

[emekaemego]

Hi @emekaemego ,

Thank you for your interesting article. Could you please ping me the following details on Discord:

• Full Name
• Photo
• Email address
• Bio
• Job Title
• Twitter handle

Thank you!

Done.

Thanks.

[Theodore-Kelechukwu-Onyejiaku]

This has been published. Thank you for your contribution @emekaemego .