How to Implement TOTP(time-based one-time passwords) based 2FA in Bubble.io Without Using Any APIs?

This article is Powered by Zeroic and Sponsored by FormulaBot.

Limitations of Bubble.io’s native 2FA:

Bubble.io’s built-in two-factor authentication (2FA) primarily revolves around sending verification codes via email or SMS. While this works for basic identity verification, it doesn’t cover the TOTP (Time-Based One-Time Password) standard - the system used by popular authentication apps like Google Authenticator, Authy, or Microsoft Authenticator.

TOTP works differently from email or SMS verification. Instead of sending a code over the internet or through a messaging service, it relies on a shared secret key that’s stored both on the server (Bubble app) and the user’s device (in the authenticator app). This key generates a new 6-digit code every 30 seconds entirely offline, meaning no communication between your app and the authenticator is needed during verification.

Here’s the challenge:
Bubble’s native user authentication system doesn’t provide:

• A way to generate and share the secret key securely with the user.

• Built-in tools for generating or verifying TOTP codes.

• Access to low-level cryptographic functions (like HMAC-SHA1) is needed to calculate time-based tokens.

Because of these missing components, developers can’t directly implement app-based verification like TOTP purely through Bubble’s native features.

This limitation makes it difficult to offer the same security and convenience that users expect from standard authenticator-based 2FA systems - where verification doesn’t depend on email delivery, SMS reliability, or network access.

Advantages of using the Plugin over the API

Implementing TOTP (Time-Based One-Time Password) authentication manually inside Bubble can be quite complex. You’d need to handle several technical layers yourself - like generating the secret key, creating a QR code for users to scan with Google Authenticator, calculating time-based codes using cryptographic algorithms (HMAC-SHA1), and then verifying those codes securely when the user logs in.

While it’s possible to achieve some of this using custom JavaScript or backend workflows, the process is time-consuming, error-prone, and security-sensitive. That’s where a dedicated plugin comes in handy.

A good plugin encapsulates all these technical details behind simple Bubble actions - so you can set up TOTP-based 2FA with just a few workflows instead of writing and testing custom code.

Another big advantage is that you don’t need to register your app with third-party authentication providers like Auth0 or Stytch. These platforms require API keys, account setup, and extra configuration steps - and in many cases, their APIs come with usage limits or ongoing subscription costs.

By using a Bubble-native plugin, your entire 2FA system remains self-contained inside your Bubble app. This means:

• No dependency on external APIs or services.

• Faster setup - everything happens inside Bubble.

• Lower long-term maintenance, since you’re not managing third-party credentials or webhooks.

So, as a plugin has a one-time fee, it often pays for itself quickly in saved development hours, reduced complexity, and a cleaner, more maintainable authentication setup.

Here, I will provide a step-by-step guide to implement TOTP(time-based one-time passwords) based two-factor authentication (2FA) that will be compatible with popular authenticator apps such as Google Authenticator, Authy Authenticator, and Microsoft Authenticator.

Step 1: Install Crazy Two Factor - Authentication Plugin in the bubble.io app

You can install the Crazy Two-Factor Authentication plugin from the Bubble.io plugin store.

Step 2: Setup TOTP based 2FA Enabler for User in bubble.io app

Here, I have set this up on the user’s profile page, where the user can enable 2fa with switch toggle.

Once the switch is Yes, There is an action named ‘Two Factor’ from plugin, Use it to enable 2fa. Enabling 2fa won’t require secret and verification token as you can see in the screenshot below. You can write any text as an app name. This name will be shown in your authenticator app.

Now create 4 new field’s in User table named secret, is-2fa-enabled, is-2fa-verified and is-2fa-qr-code. All this field will be used in next step.

So bascially this ‘Two Factor’ action is generating QR code and secret which will be used to enable TOTP based 2fa for user. is-2fa-verified is ‘no’ because user just have enabled it but verification is still pending.

Step 3: Setup TOTP based 2FA Verifier for User in bubble.io app

Now Create a Group where this 2fa-qr-code will be shown and User will be asked to scan the QR code in authenticator app such as Google Authenticator and Write 6 digit token number in input box to verify as shown in the image below. This group will be shown immediately once the is-2fa-enabled is ‘Yes’.

Once the 6 digit token is provided and verification button is clicked, Run ‘Two factor’ action again. This time, it will be to verify and not to enable. Here is the setup image below

Now result of this action is either error or return data. If the result’s error detail is not empty → Show error to user below QR code or wherever you want.
If the result’s Return data is not empty→ Make is-2fa-verified ‘Yes’. Check the image below

Step 4: Setup Privacy rules for User table

Now, all the fields of user table must be protected by privacy rules. So logged out user’s details won’t be visible in network calls or concole app file. But I will make user table details find in searches enabled. Basically When will make ‘Do a search for user’ call, it will give me result but data will be empty because I can find the user in search but data is privacy protected.

Step 5: Setup login mechanism for 2fa-verified=Yes User

Once the user writes email and password on login page, check whether user has 2fa-enabled or not. I am checking it using custom event and returning data as yes or no.

If the search result is empty, the return data will be no and If the search reult is not empty, the return data will be Yes.
If the return data is yes, then on click of login, don’t ‘Log the User In’ but show verify group first ask for 6 digit verification token.

Once the input is not empty, Allow user to click continue button.
Log the user in and verify 6 digit verification code using ‘Two Factor’ action.

If the result of the ‘Two Factor’ action has an error detail not empty → Log the user out immediately.
If the result of the ‘Two Factor’ action has result data not empty → Keep user logged in.

This approach not only simplifies the setup process but also maintains the entire authentication system within the Bubble environment, reducing dependencies on third-party services and minimizing long-term maintenance. Ultimately, this method provides a more secure, efficient, and user-friendly authentication experience.

Key Takeaways: Implementing TOTP-Based 2FA in Bubble.io

• Bubble.io’s native 2FA supports only email and SMS verification - not TOTP-based authenticator apps.

• TOTP (Time-Based One-Time Password) works completely offline and generates new 6-digit codes every 30 seconds using apps like Google Authenticator, Authy, or Microsoft Authenticator.

• Bubble lacks native cryptographic functions like HMAC-SHA1, which are required to generate and verify time-based one-time passwords.

• The Crazy Two Factor – Authentication Plugin provides a simple and secure solution to enable TOTP 2FA inside Bubble without using any external APIs.

• The plugin handles all critical steps - secret key generation, QR code creation, and token verification - directly within Bubble workflows.

• Advantages of using the plugin:

  • No dependency on external APIs like Auth0 or Stytch

  • Faster and simpler setup

  • Lower maintenance and better control over security

• Developers can easily add workflows to enable, verify, and enforce 2FA for users with just a few actions.

• Applying strong privacy rules in the User data type ensures user secrets remain secure.

• This method keeps the entire authentication system Bubble-native, providing a robust, user-friendly, and scalable security flow.

Formula Bot has sponsored this article - Formula Bot is your AI-powered data analyst that instantly transforms data into charts, insights, reports, and more. Here is the link to check it out.

This article is powered by the dev team behind FormulaBot - Zeroic, a low-code and AI development studio. Here is the link to check them out.