Security is one of the most critical elements of storing your data on a device. We’re excited to announce that in Spring ’24, Salesforce is introducing the BiometricsService mobile capability! BiometricsService enables developers to add additional security measures to the data being stored on Lightning web components (LWCs).

Let’s say, for example, that you are looking to build an LWC to store sensitive data, such as a contact’s physical address and identification information. However, these are sensitive data points that you wouldn’t want just anyone to have access to. Through BiometricsService, you will be able to use security measures, such as FaceID and fingerprint scanning, to add additional security to the data being processed within your Salesforce mobile apps.

Let’s take a look at how!

Work with the BiometricsService API

Before we discuss how to use the BiometricsService API, let’s walk through a quick example of BiometricsService using Dreamhouse, a sample app that features some LWCs for mobile use cases in a real estate context.

Say that you’re a real estate agent who has closed a deal with a client on a new home, and you are updating the Opportunity information in Salesforce. To process the transaction, you will need to collect the following paperwork and personal details on the Opportunity record.

• Purchase agreements
• Buyer and seller details
  • Phone numbers
  • Current residency details
• Purchased home address information
• And more!

You are filling out these details on the spot, and given the sensitive nature of the data you are updating, you do not want just anyone to have access to this information when they are accessing your device. As you go from one place to another, you will need to access this information, but what if you misplace your phone or someone else not authorized to access this data attempts to do so? How can you stop this?

Enter BiometricsService! Using the BiometricsService API, you can add security measures, such as fingerprint unlock or Face ID scan, so that you have an additional security measure on the device at all times. You are protecting sensitive data access on the Opportunity record directly via the LWC.

Note: BiometricsService is a mobile-only capability via LWC. It does not support biometrics unlock of LWCs when configured via web devices using features like fingerprint scan via Touch ID on desktop.

Configure the BiometricsService API

The BiometricsService API enables you to verify device ownership when interfacing with an LWC. This can be done through two steps:

1. Configure your LWC HTML template to include a lightning-button base component. This will be used to prompt the user for biometric authentication.
2. Connect that button with the JavaScript API that BiometricsService provides to invoke auth capabilities.

Note: To use BiometricsService, the end user looking to use the functionality on a mobile device must first have a fingerprint or Face ID scan pre-configured on the device. Reference the official iOS and Android device on how to configure.

Let’s dive into more details on these steps!

Step 1: Configure your LWC HTML template

For this LWC, we’ll use the handleVerifyClick onclick method call, which invokes the API we’ll need to begin using BiometricsService on LWC. This onclick method can be housed in the lightning-button HTML base component which, when invoked, will begin prompting the user for device ownership.

Tip: When prompting biometric auth, you would want it to be a very upfront action for the end user trying to access the LWCs holding the aforementioned sensitive data. As such, a general recommendation is to house the lightning-button component within a lightning-card base component, which will render a card-style modal as a banner at the forefront for users when attempting to access sensitive data.

Once those HTML configs are set, you will get a view of BiometricsService running within your LWC. Here is a sample view of the HTML payload from above, running in iOS:

Step 2: Connect your user interface with the BiometricsService API

In Step 1, we configured the handleVerifyClick method on the LWC in the HTML file. Here we will need to connect that method to the BiometricsService API that we import via mobileCapabilities.

You can use the following API calls to interface with BiometricsService.

When using this API in your JavaScript LWC code, it would look like this:

Important Notes

• The options constant is a required parameter, and when checking device ownership, the addionalSupportedPolicies object allows you to configure the fallback options in the event that the biometrics scan fails. In this case, adding PIN_CODE in the object array will alert BiometricsService to prompt for the device pin code as the fallback.
• If the barcode scan fails, it will return a set of failure codes. Reference BiometricsServiceFailureCodes for more details.

BiometricsService compatibility

BiometricsService is available in the Spring ’24 release across the Salesforce Mobile App, Salesforce Mobile App Plus, and Mobile Publisher offerings. See the Mobile Capabilities Compatibility Summary to stay up to date with its availability across our Salesforce mobile apps.

Conclusion

We hope that you’ve enjoyed this blog post and that you are looking forward to using the biometrics scanning capabilities on your LWC for mobile. To get started:

• Dive in! Take a look at our example LWCs to get familiar with the plugin.
• Personalize it! Take BiometricsService capabilities and expand on them to customize them for your business needs.
• Reach out! If you have any questions, comments, or ideas, you can connect with us in the Salesforce Mobile Trailblazer Community.

To learn more about Salesforce’s mobile offerings, check out the Mobile and Offline Developer Guide.

About the author

Ashwin Nair is a Product Manager at Salesforce focused on Salesforce Mobile. He is currently working on mobile platform experiences and has been in the web and mobile development space for over seven years. Follow him on LinkedIn.