Touch ID, Face ID and Biometric Authentication

This step-by-step process 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.

Step-by-Step Integratation of Touch ID, Face ID and Biometric Authentication

1. Add Touch ID, Face ID and Biometric Authentication

Click on "Add" button to add Touch ID, Face ID and Biometric Authentication. Once you add, it will appear in Add-ons menu. After adding this add-on, you will see the settings option in the section.

2. Biometric Configuration

• Enable Biometric Authentication: As soon as you will click on the Settings, a pop-up will apper. Now, enable the Biometric Configuration.

As you will enable Biometric Authentication, two more settings will apper.

1. Automatically Authenticate with Biometrics on Launch: Select this option to ask users for Automatic Biometric Authentication as soon as the app opens. You can enable or disable this feature as per your requirements.

2. Allow Other Methods for Authentication: Select this option if you want to allow users to use other authentication methods in addition to biometrics.

• Call the native function from your website to initiate biometric authentication manually(adding a javascript code)
• You can also add respective domains in "White List Domains" so that users can use this feature on the listed domains.

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 command 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);
    }
});

Click on the "Save" button. Rebuild your app to apply and view the changes. This will ensure that the new secondary navigation is functional and visible in your app.

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