How can I implement a Google Authenticator/Authy 2FA?

I’m trying to implement 2FA within the application so that when a user signed up and logged in it will enable the user to create/activate 2fa on their profile.

The user would go to a Setup 2FA page where a QR code would be generated and that QR code would be scanned on the Google Authenticator or Authy app. To validate the 2FA code the user should then type the code from the authenticator app and check if it matches to complete the 2FA Setup.

This 2FA code can expire every month so that the device can be remembered(this is to avoid having the user go through 2FA every single login)

This is more or less a summary of what I want to do which seems simple in theory but difficult to do without seeing code(Sorry I’m new to the world of bubble and no code platform :smiley: )

I’m aware that you can enable 2FA in the project/application settings and work with it through workflows.
I was able to generate QR code when confirming the password however I’m struggling to present it back to the user so it can be scanned.
image

Do I have to setup some Data Types to store these codes or does bubble handle these code generations and storage externally?

Thanks in advance
Michal

  1. Use the Generate a 2FA QR code action to create a QR code to display to the user for them to scan from their authenticator app in order to add an account to that app.
  2. Use the Validate token and activate 2FA action to verify the token input to your app by the user, using the token generated by their authenticator app, and enable 2FA for their account in your app.
  3. Use the Generate one-time backup codes action to generate codes to display to the user for them to save for reference and use if they ever can’t access their authenticator app.
  4. When a user signs in to your app, use the Check 2FA token action to verify the token input to your app by the user, using the token generated by their authenticator app. Here, select the Valid_30_days property to disable for 30 days re-verification from the user’s current browser.