/bubble-tutorials

How to set up Google two-step verification in Bubble

Learn how to set up Google two‑step verification in Bubble with simple steps to boost security, protect user accounts, and improve app trust.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a Free Consultation

How to set up Google two-step verification in Bubble

You set up Google two‑step verification in Bubble by using a TOTP (Time‑based One‑Time Password) plugin. Bubble does not generate Google Authenticator codes natively, so the correct method is: install a TOTP plugin, generate a secret key for each User, show them the QR code to scan with Google Authenticator, then require them to enter the 6‑digit code during login to verify. This works with any authenticator app (Google Authenticator, Authy, 1Password, etc.).

 

What You Need

 

  • A real TOTP plugin (for example: One Time Password (2FA), or TOTP Authenticator from the Bubble plugin marketplace).
  • A field in your User data type: totp\_secret (text).

 

Step‑by‑Step Setup

 

  • Generate a secret: In a workflow (usually after account signup), use the plugin action Generate TOTP Secret and save the returned secret into Current User's totp\_secret.
  • Show a QR code: Use the plugin’s QR Code for TOTP element or data source. Bind it to Current User's totp\_secret. The user scans this with Google Authenticator.
  • Verify the 6‑digit code: Create a page where the user enters the TOTP code. Run a workflow using the plugin action Verify TOTP Code with:
    • Secret = Current User's totp\_secret
    • Code = Input’s value
  • If verification is valid: Mark a field like 2fa\_enabled = yes on the User.
  • Protect login: After "Log the User in", check:
    • If Current User's 2fa\_enabled is yes, send them to a "Verify 2FA" page.

 

Example: Verifying a Code in a Workflow

 

// Bubble plugin action (conceptual example)
Verify TOTP Code:
secret = Current User's totp_secret
code = Input Code's value

 

If the plugin returns "valid = yes", continue login. If not, show an error message. This is the exact flow real apps use for Google Authenticator inside Bubble.

Explore More Valuable No-Code Resources

How to integrate Bubble.io with Git?

Learn how to seamlessly integrate Bubble.io with Git through our comprehensive step-by-step guide. Perfect for beginners and professionals.

Explore

How to integrate Bubble.io with Reddit Ads?

Learn how to seamlessly integrate Bubble.io with Reddit Ads using our easy step-by-step guide. Boost your ad management today!

Explore

How to integrate Bubble.io with AWS S3?

Explore our step-by-step guide on integrating Bubble.io with AWS S3, making your app development process more efficient and secure.

Explore

How to integrate Bubble.io with Lucidchart?

Follow our step-by-step guide to seamlessly integrate Bubble.io with Lucidchart, enhancing your workflow & productivity.

Explore

How to integrate Bubble.io with Kentico?

Learn how to seamlessly integrate Bubble.io and Kentico with our comprehensive, easy to follow step-by-step guide.

Explore

How to integrate Bubble.io with Box?

Discover easy-to-follow steps for integrating Bubble.io with Box. Boost your workflow and secure your files seamlessly today.

Explore

Stuck in Bubble.io? We’re here to help!

Fix broken workflows | Optimize logic | Boost performance | Scale with confidence

4.9
Clutch rating 🌟
600+
Happy partners
17+
Countries served
190+
Team members

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences