Integrating Touch ID and Fingerprint Authentication

This guide will help you integrate Touch ID (for iOS) and Android Fingerprint Authentication into your app, ensuring users are prompted to authenticate when they open the app. It also includes instructions to configure biometric settings and handle biometric data.

Key Features

• Integrates directly with any existing web authentication flow.
• Prompts for authentication when the user opens the app.
• Works with physical devices only.

Configuration Steps

Add biometric addon in your cart

Edit Biometric Settings: Go to plugin integration and then navigate to biometric settings.

Biometric Configuration:

• Enable Biometric Authentication: Toggle this option to enable biometric authentication.
• Automatically Authenticate with Biometrics on Launch: Toggle this option to prompt users for biometric authentication when the app launches.
• Allow Other Methods for Authentication: Toggle this option if you want to allow users to use other authentication methods in addition to biometrics.

Using Biometric Authentication Functions

Show Biometric Option

Use the following code to show the biometric prompt in the app. If the authentication is successful, the callback function will be called.

Plain JavaScript:

window.WTN.Biometric.show({
   prompt: "Authenticate to continue!",
   callback: function(data) {
       /* data returns the object below 
       {
           isSuccess: true,
           secret: 'saved secret token'
       }
       */
   }
});

ES6+:

import { show } from "webtonative/Biometric";
 
show({
   prompt: "Authenticate to continue!",
   callback: function(data) {
       /* data returns the object below 
       {
           isSuccess: true,
           secret: 'saved secret token'
       }
       */
   }
});

Save Secret

Use the following code to save a secret in the app. This secret will be returned when you show the biometric prompt when the user opens the app. The secret can be used to store a login token, which can help handle custom login functionality.

Plain JavaScript:

window.WTN.Biometric.saveSecret({
   secret: "send secret token here",
   callback: function(data) {
       /* data returns the object in below format
       {
          isSuccess: true
       }
       */
   }
});

ES6+:

import { saveSecret } from "webtonative/Biometric";
 
saveSecret({
    secret: "send secret token here",
    callback: function(data) {
         /* data returns the object in below format
        {
           success: true
        }
        */
    }
});

Delete Secret

Use the following code to delete a saved secret in the app.

Plain JavaScript:

window.WTN.Biometric.deleteSecret({
   callback: function(data) {
       /* data returns the object below 
       {
           isSuccess: true
       }
       */
   }
});

ES6+:

import { deleteSecret } from "webtonative/Biometric";
 
deleteSecret({
    callback: function(data) {
       /* data returns the object below 
        {
            success: true
        }
        */
    }
});

Check Status

Use the check status function to determine if biometric authentication is active.

Plain JavaScript:

window.WTN.Biometric.checkStatus({
   callback: function(data) {
       /* data returns the object below */
       {
           isSuccess: true,
           hasTouchId: true,
           hasSecret: true/false
       }
   }
});

ES6+:

import { checkStatus } from "webtonative/Biometric";
 
checkStatus({
    callback: function(data) {
        console.log("Function called", data);
    }
});

Save and Rebuild

Save your changes and rebuild your app to apply the new settings and see the changes in action.

By following these steps, you will successfully integrate Touch ID and Android Fingerprint Authentication into your app, ensuring secure and convenient user authentication.