> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/biometrics.md). # Biometrics The Avonni Biometrics component adds a button that triggers device biometric authentication (fingerprint or face recognition) in Salesforce mobile Screen Flows. Use it to add a security gate before revealing sensitive information or proceeding to a critical step.
{% hint style="warning" %} The Avonni Biometrics component leverages your device's security features. It's available **exclusively on the Salesforce Mobile App**. {% endhint %} *** ## Tutorials | Name | Description | Illustration | | ---------------------------------------------------------------------------------------------- | ------------------------------------------ | -------------------------------- | | [**Configuring the Avonni Biometrics**](/flow/tutorials/components/biometrics/101-tutorial.md) | Learn the basics of the Avonni Biometrics. | ![](/files/6TK4kxeVBckt0brht5R6) | *** ## Overview The component renders a single button. When the user taps it, the device's built-in biometric prompt appears (fingerprint reader or Face ID). On success, the **On Success** interaction fires — use it to navigate to the next screen, reveal sensitive data, or trigger any flow logic. *** ## Configuration To configure it, click the component on the Flow screen. The Edit Biometrics Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab. ### Properties **Label** sets the text displayed on the authentication button. Default: "Verify". **Variant** controls the visual style of the button: Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand-Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, or Success. **Icon Name** adds a Lightning Design System icon to the button. Specify in the format `utility:lock`. **Icon Position** places the icon to the Left or Right of the label. **Stretch** — when enabled, the button expands to fill the full available width. **Disabled** — when enabled, users cannot interact with the button. **Type** sets the HTML button type: Button, Reset, or Submit. *** ## Use Cases The Avonni Biometrics component adds an essential layer of protection for various industries and their most sensitive data: * **Financial Services:** Protect client portfolio data and transaction details. * **Sales:** Secure access to deal information, competitive analysis, and pricing data. * **Healthcare:** Safeguard patient records in compliance with regulatory standards. * **Intellectual Property:** Control access to confidential product designs and research. *** ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Biometrics. Configure them from the **Interactions** tab of the Edit Biometrics panel. ### Success Fires when device biometric authentication completes successfully. Use it to navigate to the next screen, reveal sensitive data, or proceed past a security checkpoint. *** ## Styling The **Style** tab gives you fine-grained control over the Biometrics's appearance. Configure it from the **Style** tab of the Edit Biometrics panel. {% tabs %} {% tab title="Margin" %} Controls outer spacing. * **Top:** Sets the top margin. * **Right:** Sets the right margin. * **Bottom:** Sets the bottom margin. * **Left:** Sets the left margin. {% endtab %} {% tab title="Padding" %} Controls inner spacing. * **Top:** Sets the top padding. * **Right:** Sets the right padding. * **Bottom:** Sets the bottom padding. * **Left:** Sets the left padding. {% endtab %} {% tab title="Border" %} Customizes the border. * **Color:** Sets the border color. * **Size:** Sets the border width. * **Style:** Sets the border style. * **Radius:** Sets the border radius. {% endtab %} {% tab title="Flow Dialog" %} Adjusts display when opened as a modal dialog inside a Flow screen. * **Width:** Sets the dialog width. * **Height:** Sets the dialog height. * **Background Color:** Sets the dialog background color. {% endtab %} {% tab title="Button Border" %} Customizes the authentication button's border. * **Size:** Sets the border width of the button. * **Style:** Sets the border style of the button. * **Radius:** Sets the border radius of the button. * **Color:** Sets the border color. * **Color Active:** Sets the border color when the button is active. * **Color Hover:** Sets the border color when the button is hovered. {% endtab %} {% tab title="Button Text" %} Styles the text label inside the authentication button. * **Font Size:** Sets the font size of the button label. * **Font Style:** Sets the font style of the button label. * **Font Weight:** Sets the font weight of the button label. * **Font Family:** Sets the font family of the button label. * **Line Height:** Sets the line height of the button label. * **Color:** Sets the text color. * **Color Active:** Sets the text color when the button is active. * **Color Hover:** Sets the text color when the button is hovered. {% endtab %} {% tab title="Button Shadow" %} Controls the shadow effect on the authentication button. * **Shadow:** Sets the box shadow of the button. * **Shadow Focus:** Sets the box shadow when the button is focused. {% endtab %} {% tab title="Button Background" %} Sets the background color of the authentication button. * **Color:** Sets the background color. * **Color Active:** Sets the background color when the button is active. * **Color Hover:** Sets the background color when the button is hovered. {% endtab %} {% endtabs %} ## Key Considerations * The Avonni Biometrics component relies on platform-specific APIs and is only functional within the Salesforce mobile app. * Device compatibility may vary — ensure user devices support the required biometric authentication methods. ## Output Variables The Biometrics exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Biometrics component, and pick the output variable you need. ### Authentication Result | Output variable | Type | What it returns | | --------------- | ------- | ------------------------------------------------------------------------------- | | **Value** | Boolean | `true` when biometric authentication completed successfully; `false` otherwise. | > **Example:** After the screen, add a Decision element branching on **Value** — route to the secure data screen when `true`, and display an error message when `false`. ### Flow Interaction Output Variables Like all interactive Flow components, the Biometrics exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/biometrics.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.