{"id":2788,"date":"2026-05-02T16:44:14","date_gmt":"2026-05-02T08:44:14","guid":{"rendered":"http:\/\/www.oryggisblod.com\/blog\/?p=2788"},"modified":"2026-05-02T16:44:14","modified_gmt":"2026-05-02T08:44:14","slug":"how-to-use-the-touch-id-face-id-in-a-capacitor-app-4352-e7cbfe","status":"publish","type":"post","link":"http:\/\/www.oryggisblod.com\/blog\/2026\/05\/02\/how-to-use-the-touch-id-face-id-in-a-capacitor-app-4352-e7cbfe\/","title":{"rendered":"How to use the touch ID\/Face ID in a Capacitor app?"},"content":{"rendered":"

Hey there! I’m part of a Capacitor supplier team, and today I wanna chat about how to use Touch ID and Face ID in a Capacitor app. It’s pretty cool tech that can really up your app’s security and user experience. Capacitor<\/a><\/p>\n

<\/p>\n

Why Use Touch ID\/Face ID in Your Capacitor App?<\/h3>\n

First off, let’s talk about why you’d even want to use Touch ID or Face ID in your app. These biometric authentication methods are super convenient for users. Instead of typing in a long password every time they open your app, they can just use their fingerprint or face to log in. It saves time and makes the whole process smoother.<\/p>\n

From a security perspective, biometric authentication is way more secure than traditional passwords. Passwords can be easily forgotten, stolen, or guessed. But your fingerprint or face is unique to you, making it much harder for someone else to access your account.<\/p>\n

Setting Up Your Capacitor Project<\/h3>\n

Before we dive into the code, you need to set up your Capacitor project. If you haven’t already, make sure you have Node.js and npm installed on your machine. Then, you can create a new Capacitor project using the following commands:<\/p>\n

npm init capacitor\n<\/code><\/pre>\n
Follow the prompts to set up your project. You’ll need to choose a name for your app, select a framework (like React, Vue, or Angular), and set up the project directory.<\/p>\n
Once your project is set up, you can add the Capacitor Biometric plugin. This plugin allows you to use Touch ID and Face ID in your app. To install it, run the following command in your project directory:<\/p>\n
npm install @capacitor\/biometric\nnpx cap sync\n<\/code><\/pre>\n
Checking for Biometric Support<\/h3>\n
Before you start using Touch ID or Face ID, you need to check if the user’s device supports biometric authentication. You can do this using the isAvailable<\/code> method provided by the Capacitor Biometric plugin. Here’s an example of how to do it in JavaScript:<\/p>\n
import { Biometric } from '@capacitor\/biometric';\n\nasync function checkBiometricSupport() {\n  try {\n    const result = await Biometric.isAvailable();\n    if (result.available) {\n      console.log('Biometric authentication is available');\n      \/\/ You can now prompt the user to use biometric authentication\n    } else {\n      console.log('Biometric authentication is not available');\n      \/\/ You can show an alternative authentication method, like a password\n    }\n  } catch (error) {\n    console.error('Error checking biometric support:', error);\n  }\n}\n\ncheckBiometricSupport();\n<\/code><\/pre>\n
Prompting the User for Biometric Authentication<\/h3>\n
Once you’ve confirmed that the user’s device supports biometric authentication, you can prompt the user to use it. You can do this using the authenticate<\/code> method provided by the Capacitor Biometric plugin. Here’s an example of how to do it in JavaScript:<\/p>\n
import { Biometric } from '@capacitor\/biometric';\n\nasync function authenticateUser() {\n  try {\n    const result = await Biometric.authenticate({\n      reason: 'Please authenticate to access your account',\n      title: 'Authenticate',\n      subtitle: 'Use your fingerprint or face to log in',\n      description: 'This will keep your account secure',\n    });\n    if (result.success) {\n      console.log('User authenticated successfully');\n      \/\/ You can now grant the user access to the app\n    } else {\n      console.log('User authentication failed');\n      \/\/ You can show an error message to the user\n    }\n  } catch (error) {\n    console.error('Error authenticating user:', error);\n  }\n}\n\nauthenticateUser();\n<\/code><\/pre>\n
Handling Errors and Edge Cases<\/h3>\n
When using biometric authentication, there are a few errors and edge cases you need to handle. For example, the user might cancel the authentication process, or the biometric sensor might fail to recognize the user’s fingerprint or face.<\/p>\n
Here’s an example of how to handle these errors in JavaScript:<\/p>\n
import { Biometric } from '@capacitor\/biometric';\n\nasync function authenticateUser() {\n  try {\n    const result = await Biometric.authenticate({\n      reason: 'Please authenticate to access your account',\n      title: 'Authenticate',\n      subtitle: 'Use your fingerprint or face to log in',\n      description: 'This will keep your account secure',\n    });\n    if (result.success) {\n      console.log('User authenticated successfully');\n      \/\/ You can now grant the user access to the app\n    } else {\n      console.log('User authentication failed');\n      \/\/ You can show an error message to the user\n    }\n  } catch (error) {\n    if (error.code === 'ERR_CANCELED') {\n      console.log('User canceled the authentication process');\n    } else if (error.code === 'ERR_NOT_AVAILABLE') {\n      console.log('Biometric authentication is not available');\n    } else {\n      console.error('Error authenticating user:', error);\n    }\n  }\n}\n\nauthenticateUser();\n<\/code><\/pre>\n
Best Practices for Using Touch ID\/Face ID in Your Capacitor App<\/h3>\n
Here are some best practices to keep in mind when using Touch ID and Face ID in your Capacitor app:<\/p>\n