Biometric Verification

Overview

Biometric verification provides an additional security layer using the device's built-in authentication methods (Face ID, Touch ID, or passcode). This feature offers two implementation approaches: full app lock or selective feature protection.

Implementation Options

Option 1: Full App Lock (Despia Editor)

Lock the entire application requiring biometric authentication before the app opens:

1. Go to Despia Editor

2. Navigate to Add-ons

3. Enable Biometric app lock

4. Republish your application

Note: This requires republishing through app stores as it modifies native binary files.

Option 2: Feature-Level Protection (WeWeb)

Protect specific features or actions within your app using WeWeb's visual editor. This guide focuses on this approach.

Prerequisites

1. Install the Despia plugin from the WeWeb Marketplace

2. Verify installation: Assets → Library → look for "Despia Provider"

Implementation Steps

Step 1: Add Despia Plugin Component

1. Click Add in WeWeb editor

2. Switch from Basics to Assets panel

3. Find Despia Provider → Despia native folder

4. Drag the Despia plugin to the top of your page

   • Add to every page requiring biometric features

Step 2: Create State Variable

1. Create a new variable named "biometric"

2. Set type to Text

3. Leave default value empty

Step 3: Add Trigger Button

1. Add a button element

2. Label it "Verify" or "Authenticate"

3. Go to Workflows → Add "On click" workflow

4. Add action: Execute component action

   • Component: Despia plugin

   • Action: "Start biometric verification"

Step 4: Handle Authentication Result

1. Select the Despia plugin component

2. Go to Workflows → Add new workflow

3. Change trigger from "On click" to "On biometric change"

4. Add action: Change variable value

   • Variable: Select "biometric"

   • Value: Bind to Event > state

Step 5: Use Authentication State

The biometric state returns three possible values:

• "success": Authentication successful

• "failure": Authentication failed

• "unavailable": Biometric not available on device

Use this state to:

• Show/hide sensitive content

• Enable/disable actions

• Trigger conditional workflows

• Make API calls only after successful verification

Security Considerations

Client-Side vs Server-Side

This WeWeb implementation is client-side security. Important points:

• Not a replacement for server-side authentication (Xano, Supabase, etc.)

• Complementary layer to existing authentication systems

• Protects against casual unauthorized access (someone picking up an unlocked phone)

• Does not protect against sophisticated attacks or code injection

Best Practices

1. Always combine with server-side authentication: Ensure your backend validates all requests

2. Use for sensitive actions: Payment confirmations, profile deletion, viewing private data

3. Provide fallback options: Handle devices without biometric capabilities

4. Clear user communication: Explain why biometric verification is needed

5. Session management: Consider timeout periods for re-authentication

Real-World Use Cases

Banking & Finance

• Authorize transactions

• View account balances

• Change security settings

Healthcare

• Access medical records

• View test results

• Schedule appointments

Social Apps

• Delete account/profile

• Change privacy settings

• Access private messages

E-commerce

• Complete purchases

• Access payment methods

• View order history

Publishing & Updates

• Changes made in WeWeb deploy via over-the-air updates

• No app store resubmission required

• Updates available immediately to all users

• No app rebuild necessary for WeWeb changes

Testing

In Development

• Browser preview won't trigger actual biometric

• Test on physical devices for real authentication

Device Fallbacks

• Face ID devices fall back to Touch ID if face not recognized

• All devices fall back to passcode if biometric fails

• Simulator testing uses passcode input

Troubleshooting

Authentication always fails

• Check device has biometric enrolled

• Verify app permissions in device settings

State not updating

• Ensure workflow is on the plugin component, not the button

• Check event trigger is "On biometric change"

Unavailable state

• Device may not support biometric

• User hasn't set up Face ID/Touch ID

• Check device settings

Additional Security Recommendations

For maximum security:

1. Implement server-side session validation

2. Use token-based authentication

3. Add request signing for sensitive operations

4. Implement rate limiting

5. Log authentication attempts

6. Consider multi-factor authentication