VIEW SAMPLE CODE URL
https://bubble.io/page?id=otpgeneratorapp&test_plugin=1754362258935x181716293592285200_current&tab=Design&name=index&elements=bTHHP

DEMO PAGE
https://otpgeneratorapp.bubbleapps.io/version-test?debug_mode=true



3. How to Use: A Step-by-Step Implementation Guide
This section outlines the process for a Bubble developer to integrate the GS OTP Generator. The workflow is split into two main parts: the initial user setup and the daily login process.
Step 1: Initial User Setup (Web App)
This workflow is for when a user first registers or enables OTP login on the web app.

Generate a Secret Key:

Create a new workflow that triggers when a new user signs up or when an existing user chooses to enable OTP login.
Use the plugin action Generate Secret Key.
Save this secret key to the user's data record in your database. Create a new field, for example,
otp_secret_key
of type
text
on the
User
data type.
Inform the User:

Inform the user that their account is now set up for OTP login and that they will need to use the mobile app to generate a code for future logins on the web.
Step 2: The Mobile App (OTP Generation)
This is the workflow for how the mobile app generates the OTP for the user.

Retrieve Secret Key:

On a specific page in your mobile app (e.g., a "Generate Code" page), create a workflow that retrieves the
Current_User's
otp_secret_key
from the database.
Generate OTP:

Use the plugin action Generate OTP.
The parameter for this action is the
otp_secret_key
of the
Current User
.
The action will return a 6-digit OTP.
Display the OTP:

Display the result of the Generate OTP action in a prominent text element on the mobile app's screen.
Consider adding a message indicating that the code is valid for a short period (typically 30 seconds). You can also use the optional countdown timer included in the plugin to provide a visual indicator of the remaining time.
Step 3: The Web App (Login Verification)
This is the workflow for how a user logs in via a web browser using the OTP from their mobile app.

Login Form:

Create a login form on your web app that includes input fields for a user's identifier (like email or username) and an additional input field for the OTP code.
Login Workflow:

When the user attempts to log in, first retrieve the user's data (e.g., by searching for the user based on the email input).
If a user is found, use the plugin action Verify OTP.
The parameters for this action are:

Secret Key: The
otp_secret_key
stored on the retrieved user's data record.
OTP Code: The value from the OTP input field on the login form.
The action will return
true
or
false
.
If the result is
true
, the login is successful. Use the
Log the user in
action to complete the process.
If
false
, display an error message like "Invalid OTP. Please try again."
4. Best Practices for a Secure Implementation

Protect the Secret Key: The secret key is the most critical piece of data. Never display it to the user and ensure it's stored securely in your database.
User Interface (UI): Clearly communicate the mobile-to-web login flow to your users. On the web app, instruct them to open their mobile app to get the code. On the mobile app, make the generated code easy to read and copy.
Recovery Workflow: Build a "forgot password" or "lost mobile device" workflow that allows a user to disable or reset their OTP secret key after a multi-step verification process (e.g., email link, security questions).