BiometricsService Example

Here’s a basic example of a Lightning web component that uses a device’s biometrics capabilities to verify device ownership.

The component’s HTML template is minimal, with a “Verify” button to initiate the biometrics check.

1<template>
2  <lightning-card title="Biometrics Service Demo" icon-name="custom:privately_shared">
3    <div class="slds-var-m-around_medium">
4      Use device biometrics capabilities to verify current user is indeed device owner:
5      <lightning-button
6        variant="brand"
7        label="Verify"
8        title="Verify device ownership using biometrics"
9        onclick="{handleVerifyClick}"
10        class="slds-var-m-left_x-small"
11      >
12      </lightning-button>
13    </div>
14    <div class="slds-var-m-around_medium">
15      <lightning-formatted-text value="{status}"></lightning-formatted-text>
16    </div>
17  </lightning-card>
18</template>

This example simply uses BiometricsService to prompt the user to complete a biometrics check. A status message is returned, indicating whether the check was successful or not.

1import { LightningElement } from "lwc";
2import { getBiometricsService } from "lightning/mobileCapabilities";
3
4export default class NimbusPluginBiometricsService extends LightningElement {
5  status;
6  biometricsService;
7
8  connectedCallback() {
9    this.biometricsService = getBiometricsService();
10  }
11
12  handleVerifyClick() {
13    if (this.biometricsService.isAvailable()) {
14      const options = {
15        permissionRequestBody: "Required to confirm device ownership.",
16        additionalSupportedPolicies: ["PIN_CODE"],
17      };
18      this.biometricsService
19        .checkUserIsDeviceOwner(options)
20        .then((result) => {
21          // Do something with the result
22          if (result === true) {
23            this.status = "✔ Current user is device owner.";
24          } else {
25            this.status = "𐄂 Current user is NOT device owner.";
26          }
27        })
28        .catch((error) => {
29          // Handle errors
30          this.status = "Error code: " + error.code + "\nError message: " + error.message;
31        });
32    } else {
33      // service not available
34      this.status = "Problem initiating Biometrics service. Are you using a mobile device?";
35    }
36  }
37}

See Also

Use the BiometricsService API