# Biometric Authentication

{% hint style="info" %}
You'll need to import the javascript file in your website before starting from this [link](https://docs.webtonative.com/javascript-apis/getting-started).
{% endhint %}

This module explains the ways to use the Biometric authentication functions where you can use the devices Touch/Face Id to unlock an app or use it to secure pages.

If you have choose to handle biometric by yourself then following js apis will be required.

## Show Biometric option

Use following code to show biometric in the app. If it is authenticated successfully then **callback** function will be called.

{% tabs %}
{% tab title="Plain JS" %}
{% code overflow="wrap" %}

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

{% endcode %}
{% endtab %}

{% tab title="ES 6+" %}

```javascript
import { show } from "webtonative/Biometric";

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


```

{% endtab %}
{% endtabs %}

```
Prompt - Used to show text to user when aithentication prompt is shown.

Callback - function called on user authenticating or cancelling the promt.
```

<figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2F9TtuS4o3wkqvC3hqBLbe%2FIMG_2986.jpg?alt=media&#x26;token=a280ac28-57d7-4b63-82ac-e239a848c4f3" alt="" width="188"><figcaption><p>Biometric Auth Screen</p></figcaption></figure>

### Save secret

Use following code to save secret in the app. This secret will be returned when you show the biometric when user opens the app. Secret can be used for example to store a login token, using that token you can handle custom handling like get the user logged in.

{% tabs %}
{% tab title="Plain JS" %}

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

{% endtab %}

{% tab title="ES 6+" %}

<pre class="language-javascript"><code class="lang-javascript">import { saveSecret } from "webtonative/Biometric";
<strong>
</strong><strong>saveSecret({
</strong>    secret:"send secret token here",
    callback:function(data){
         /* data returns the object in below format
        
        {
           success: true
        }
        */
    }
});
</code></pre>

{% endtab %}
{% endtabs %}

### Delete Secret

Use following code to delete secret in the app.

{% tabs %}
{% tab title="Plain JS" %}

<pre class="language-javascript"><code class="lang-javascript"><strong>window.WTN.Biometric.deleteSecret({
</strong>    callback:function(data){
        /* data returns the object below 
        {
            isSuccess: true
        }
        */
    }
});
</code></pre>

{% endtab %}

{% tab title="ES 6+" %}

```javascript
import { deleteSecret } from "webtonative/Biometric";

deleteSecret({
    callback:function(data){
       /* data returns the object below 
        {
            success: true
        }
        */
    }
});
```

{% endtab %}
{% endtabs %}

### Check Status

Check status function will return if biometric is active.

{% tabs %}
{% tab title="Plain JS" %}

<pre class="language-javascript"><code class="lang-javascript"><strong>window.WTN.Biometric.checkStatus({
</strong>    callback:function(data){
        /* data returns the object below */
        {
            isSuccess: true,
            hasTouchId: true,
            hasSecret: true/false
        }
    }
});
</code></pre>

{% endtab %}

{% tab title="ES 6+" %}

```javascript
import { checkStatus } from "webtonative/Biometric";

checkStatus({
    callback:function(data){
        console.log("Function called",data);
    }
});
```

{% endtab %}
{% endtabs %}

**Show Biometric without closing the app on cancel click - Android**

This let's you open the prompt and clicking on cancel won't close the app

{% tabs %}
{% tab title="Plain JS" %}

```javascript
window.WTN.Biometric.biometricAuthWithDismissOnCancel({
    prompt:"Authenticate to continue!"
    isAuthenticationOptional:true/false,
    callback:function(data){
        console.log("Function called",data);
    }
});
```

{% endtab %}

{% tab title="ES 6+" %}

```javascript
import { biometricAuthWithDismissOnCancel } from "webtonative/Biometric";

biometricAuthWithDismissOnCancel({
    prompt:"Authenticate to continue!"
    isAuthenticationOptional:true/false,
    callback:function(data){
        console.log("Function called",data);
    }
});
```

{% endtab %}
{% endtabs %}

{% code overflow="wrap" %}

```
Prompt - Used to show text to user when aithentication prompt is shown.
isAuthenticationOptional (Boolean) - Passing it true will allow closing the proompt without closing thr app on cancle.
Callback - function called on user authenticating or cancelling the promt.
```

{% endcode %}

Function - biometricAuthWithDismissOnCancel - Available on Android from 30/06/25