Bubble.io Biometric Authentication Guide

This plugin enables biometric authentication for users in your Bubble.io application. Add secure biometric login for Android and iOS apps.

Overview

The WebToNative - Enable WTN Biometric plugin allows Bubble.io applications to integrate biometric authentication. This element provides an easy way to enable or disable biometric authentication for users within your app.

---

Key Features

1. Biometric Authentication on App Launch or Resume

• Prompts users for biometric verification when they open or return to the app.

• Configurable timeout for inactivity before requiring authentication again.

2. Login Using Biometrics

• Users can log in using their fingerprint or face ID instead of a password.

• A secure, temporary password is generated for authentication.

• When biometric login is enabled, the user's old password is replaced with a temporary one. To restore password-based login, the user must go through the "Forgot Password" process after disabling biometric authentication. After disabling biometric authentication to restore password-based login

How It Works

• The plugin contains an element called Enable WTN Biometric, which must be placed on the Profile Page.

• This element has a property called Enable Biometric, which allows biometric authentication to be enabled or disabled.

• When a user toggles the biometric authentication checkbox, the system either stores or removes the biometric secret in the user’s database.

Step 1: Enable Biometric Authentication And Save Biometric Secret

Step 1: Adding "Enable WTN Biometric" Element

1. Navigate to the Profile Page in your Bubble app.

2. Drag and drop the Enable WTN Biometric element onto the page.

3. Ensure the Enable Biometric property is properly configured.

4. Add a field named WTN Biometric Secret in the User's Collection in the database.

Step 2: Handling Biometric Authentication Events

This element triggers two events:

Set Biometric Secret

Unset Biometric Secret

• Set Biometric Secret: Triggered when the user enables biometric authentication.

• Unset Biometric Secret: Triggered when the user disables biometric authentication.

Configuring Workflow for Events

1. For the "Set Biometric Secret" Event:

   • Action: Make changes to the Current User.

   • Update the WTN Biometric Secret field with the biometric secret stored in the element’s state.

2. For the "Unset Biometric Secret" Event:

   • Action: Make changes to the Current User.

   • Set the WTN Biometric Secret field to an empty value.

Step 3: Adding "Biometric Authentication Handler"

Add the Biometric Authentication Handler action to enhance security, which runs automatically when the app loads or resumes.

Properties of Biometric Authentication Handler:

1. Prompt on Open: If enabled, prompt the user for biometric authentication when the app is opened.

2. Prompt on Resume: If enabled, prompt the user when they return to the app after inactivity.

3. Biometric Timeout (Minutes): Defines the inactivity time after which authentication is required again.

Step 4: Implementing Biometric Authentication Handling

• When the app is opened, the system checks if biometric authentication is enabled.

• If the Prompt on Open property is enabled, the user is prompted to authenticate.

• The system monitors app inactivity if the Prompt on Resume property is enabled.

• If the inactivity exceeds the specified timeout, biometric authentication is required again.

• If authentication fails, the app may close automatically for security reasons.

---

Biometric Login Feature

Setting Up Biometric Login

1. Create a Login with a Biometric button in your Bubble app.

2. Add a click event using the Bubble Workflow Editor.

3. Configure the workflow to run the Enable WTN Biometric element's action Biometric Login when the button is clicked.

1. The Biometric Login action will trigger the Do Biometric Login event.

1. After successful biometric authentication, execute the Assign a Temporary Password to User action.

1. Use the secret key stored in the database to identify the user’s email.

2. Log the user in using the temporary password.

Workflow Editor: https://bubble.io/page?id=developer-74531&test_plugin=1731489857971x210493134692679680_current&tab=Workflow&name=biometric_authentication&type=page

---

Conclusion

By following this guide, you can seamlessly integrate biometric authentication into your Bubble.io app. Whether enhancing security on app launch or enabling biometric login, this feature improves both security and user experience. 🚀