# Biometric Authentication

### Introduction

The WebToNative Biometric Authentication Plugin enhances your Shopify mobile app's security while providing a seamless user experience. This plugin allows customers to authenticate using their device's biometric capabilities (fingerprint or facial recognition) instead of repeatedly entering passwords.

### Features Overview

* **App Resume Authentication**: Prompt users for biometric verification when returning to the app after a set period of inactivity
* **App Launch Authentication**: Secure app access with biometric verification when the app is first opened
* **Biometric Login**: Allow users to log in using biometrics instead of username/password
* **User Preference Controls**: Let users enable or disable biometric authentication according to their preferences
* **Configurable Timeout**: Set custom timeouts for when authentication is required

### Implementation Steps

#### Step 1: Configure Biometric Authentication in Admin

<div><figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2F3EzshzlFamSnmfN96Jls%2FScreenshot%202025-04-01%20at%2012.56.55%E2%80%AFPM.png?alt=media&#x26;token=871cb70f-85e1-4ced-80b0-e208390320b6" alt="" width="236"><figcaption></figcaption></figure> <figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2FDvNmzCwrrcvBdGKfrNQ2%2FScreenshot%202025-04-01%20at%2012.59.15%E2%80%AFPM.png?alt=media&#x26;token=a6857a05-c245-4706-baa5-876236c24993" alt="" width="563"><figcaption></figcaption></figure></div>

After installing the WebToNative app, you need to enable biometric authentication:

1. Navigate to the **Apps** section in your Shopify admin
2. Find and click on **Webtonative** from the list of installed apps
3. In the side navigation menu, click on **Biometric Authentication**
4. Toggle the **Enable** switch to turn on biometric authentication functionality
5. Click the **Save** button to confirm your changes

#### Step 2: Enable User Controls on Profile Page

<div align="left"><figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2Fuzy7xEybbBvXOKgAyaEU%2FScreenshot%202025-04-01%20at%201.04.49%E2%80%AFPM.png?alt=media&#x26;token=fa7e7f30-1954-431c-b2e5-235fa17a28e7" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2Ft1C31M1US9R8xr8B2nNY%2FIMG_0109.jpg?alt=media&#x26;token=85cccbe4-0467-440c-ac4c-5a6d8a9d52c6" alt="" width="375"><figcaption></figcaption></figure></div>

To give your customers control over their biometric authentication preferences:

1. Go to **Online Store > Themes** in your Shopify admin
2. Click **Customize** next to your current theme
3. Navigate to the **Template** section and select **Account** or your profile page template
4. Under the **Apps** section, click **Add block**
5. Select the **ON/OFF Biometric Auth** block by WebToNative
6. Click **Save** to apply the changes

**Note**: This block will only be visible to users on native mobile devices. Desktop users won't see this option.

#### Step 3: Configure Authentication Settings in Theme

<figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2FPWU0tBKHHKvOJEH0qlwp%2FScreenshot%202025-04-01%20at%201.12.59%E2%80%AFPM.png?alt=media&#x26;token=e01c7d5b-2c71-453b-86e0-8348057bd1f4" alt="" width="306"><figcaption></figcaption></figure>

Configure when and how biometric authentication is triggered:

1. Go to **Online Store > Themes** in your Shopify admin
2. Click **Customize** next to your current theme
3. Find the **App Embeds** section or navigate to where app blocks are managed
4. Locate and enable the **Biometric Authentication** block
5. Configure the following settings:
   * **Prompt on Resume**: Toggle ON to require authentication when users return to the app after switching to another app
   * **Biometric Timeout (Minutes)**: Set how long the app can be inactive before requiring reauthentication (e.g., 1 minute)
   * **Prompt on Open**: Toggle ON to require authentication when the app is first launched
6. Click **Save** to apply your configuration

#### Step 4: Set Up Biometric Login (Optional)

<div><figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2Fse7diOvz8sNURhpCHEvj%2FScreenshot%202025-04-01%20at%201.26.00%E2%80%AFPM.png?alt=media&#x26;token=47d6bcf1-e4f0-4a15-b513-13da3f585722" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2F9C4Gp17OTWTYVHtwFwrb%2FIMG_0106.jpg?alt=media&#x26;token=d8dfa92d-d72f-45cc-9df0-e18bc4353361" alt="" width="375"><figcaption></figcaption></figure></div>

To enable users to log in with biometrics instead of passwords:

1. Go to **Online Store > Themes** in your Shopify admin
2. Click **Customize** next to your current theme
3. Navigate to the **Login Page** section
4. Click **Add block**
5. Select the **Biometric Login** block by WebToNative
6. Click **Save** to apply the changes

**Note**: The biometric login option will only appear for users on mobile devices who have previously logged in and enabled biometric authentication.\
\
**User Experience**: When a customer clicks the **Login with Biometric** button, they will be prompted to authenticate using their device's biometric system (fingerprint or facial recognition). Upon successful authentication, the user will be automatically logged in and redirected to their profile/account page without needing to enter their username or password.

### Understanding Authentication Options

#### Prompt on Resume

When enabled, this option requires users to authenticate using their biometrics when returning to your app after using another app or after the device has been locked. This prevents unauthorized access if users leave their device unlocked with your app open.

#### Biometric Timeout

This setting determines how long (in minutes) a user can be away from the app before needing to re-authenticate. A shorter timeout provides more security, while a longer timeout offers more convenience.

#### Prompt on Open

When enabled, users must authenticate with biometrics each time they open the app, even if they've recently used it. This provides the highest level of security but may impact user experience if users frequently access your app.

### Best Practices

1. **Balance Security and Convenience**: Consider your customers' needs when setting timeout durations. Shorter timeouts increase security but may frustrate users if too frequent.
2. **Educate Your Customers**: Inform users about the biometric features through in-app messages or email communications. Explain the benefits of using biometric authentication.
3. **Provide Alternatives**: Some users may not have biometric capabilities on their devices or may prefer not to use them. Always ensure traditional login methods remain available.
4. **Test Thoroughly**: Before fully deploying, test the biometric authentication on various devices to ensure a smooth experience across different platforms and operating systems.

### Troubleshooting

#### Biometric Authentication Not Appearing

* Ensure the app has been updated to the latest version
* Verify that blocks have been properly added to your theme
* Confirm the device supports biometric authentication
* Check that the user has set up biometrics on their device

#### Authentication Failures

* Advise users to ensure their biometric settings are up-to-date on their device
* Suggest cleaning the fingerprint sensor or ensuring facial recognition cameras are unobstructed
* Provide password login as a fallback method

### FAQs

**Q: Is biometric data stored on your servers?**\
A: No. All biometric data remains securely on the user's device. The plugin only receives authentication confirmation, not the actual biometric data.

**Q: Which devices support this feature?**\
A: The plugin works on iOS devices with Touch ID or Face ID and Android devices with fingerprint or facial recognition capabilities.

**Q: Can users disable biometric authentication if they prefer not to use it?**\
A: Yes. Users can toggle this feature off through the profile/account page where you've added the ON/OFF Biometric Auth block.

**Q: Will this slow down my app?**\
A: No. Biometric authentication is designed to be fast and efficient, often faster than typing passwords.

**Q: Does this replace the need for passwords?**\
A: After initial setup, it provides an alternative to password entry, but passwords remain as a backup authentication method.