# Biometric Authentication

### **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

<figure><img src="/files/LFsI0kCcnblFrEYoXQf0" alt="" width="375"><figcaption></figcaption></figure>

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.

<figure><img src="/files/K5v4B6grq926wG5wjPq4" alt=""><figcaption></figcaption></figure>

#### Step 2: Handling Biometric Authentication Events

This element triggers two events:

<figure><img src="/files/JHvRWukMsRz2s4CORCBM" alt=""><figcaption><p>Set Biometric Secret</p></figcaption></figure>

<figure><img src="/files/eZsufjnQRGR6pSg91Szy" alt=""><figcaption><p>Unset Biometric Secret</p></figcaption></figure>

* **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.

<figure><img src="/files/VQ0aDZBieSoTmUrtN619" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/lwRl9BYvEOTIyiknxLbb" alt=""><figcaption></figcaption></figure>

4. The **Biometric Login** action will trigger the **Do Biometric Login** event.

<figure><img src="/files/iJ8XV1OMYqvLRPwbbpzS" alt=""><figcaption></figcaption></figure>

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

<div><figure><img src="/files/mCjVTKRb7naJF6lK8BCg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/nu3D426XwAt91ARFzJQ2" alt=""><figcaption></figcaption></figure></div>

6. Use the secret key stored in the database to identify the user’s email.
7. Log the user in using the temporary password.

<figure><img src="/files/v7cJ9CAvDqSKH6keZ23E" alt=""><figcaption></figcaption></figure>

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. 🚀


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/website-plugins/bubble.io/biometric-authentication.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.