React Native Expo Local Authentication | Face ID | Touch ID | Passcode 2022 | Code with Beto

I walk you through adding local authentication to a React Native app using Expo. You’ll learn how to prompt users for Face ID, Touch ID, or device passcode on supported devices. The tutorial covers everything from setting up a new Expo project to implementing biometric login and conditional screen rendering.

I build a simple login screen that triggers authentication and a payment screen that appears after successful login. Along the way, I show how to install necessary packages, create reusable SVG components for UI, and handle authentication state with React hooks. This is a practical guide for securing your Expo app with native device authentication.

What's inside

Creating a new Expo project with a blank template
Installing expo-local-authentication and react-native-svg
Building the logout and payment screens with React Native components
Adding an SVG payment card component
Checking if the device supports biometrics or passcode
Implementing the authenticateAsync method to prompt user authentication
Managing authentication state and conditional screen rendering
Handling fallback messages and user feedback during authentication

Creating a new Expo project with a blank template

I start by running and naming the project "local auth," choosing the blank template to keep things simple. After the project is created, I open it in Visual Studio Code to prepare for development. This clean setup gives you a fresh base to add local authentication features without extra clutter.

This step ensures you have all the default Expo dependencies installed and ready. It also sets up the folder structure where you’ll add screens and components. Starting with a blank template helps keep the focus on the authentication logic and UI components we’ll build next.

Installing expo-local-authentication and react-native-svg

To enable biometric authentication, I install the package using . This package provides access to native Face ID, Touch ID, and passcode prompts on supported devices.

Since the app will display a payment card using SVG graphics, I also install with . This library lets you render scalable vector graphics in React Native, which is perfect for creating clean, reusable UI components like the payment card.

Both packages are essential: handles the biometric prompts, while supports the custom UI elements we add later. Installing them via Expo ensures compatibility and smooth integration.

Building the logout and payment screens with React Native components

I create two main screens: for the login interface and for the post-login view. The login screen includes an image, title, description, and a login button that triggers authentication. The payment screen shows user info, an avatar, and payment details.

Both screens use core React Native components such as , , , and . I organize the screens inside a folder for clarity. Styling is done with to keep the UI consistent and maintainable.

This setup provides a clear flow: users start at the login screen, authenticate, and then see the payment screen. The logout button on the payment screen lets users return to the login screen, completing the cycle.

Adding an SVG payment card component

To enhance the payment screen’s UI, I create a reusable SVG component called inside a new folder. This component imports from and renders the payment card graphic.

By isolating the SVG into its own component, the code stays modular and easier to maintain. You can reuse or update the card design without touching the payment screen logic. This approach also keeps the payment screen code cleaner and focused on layout and state.

The SVG component uses elements like and from to draw the card shapes and details. This method gives you full control over the vector graphics and lets you customize the card’s appearance as needed.

Checking if the device supports biometrics or passcode

Using , I check if the device supports biometric hardware or passcode authentication by calling . This asynchronous method returns a boolean indicating hardware availability.

I store this result in a React state variable called . This lets the app conditionally enable or disable authentication features based on device capabilities. For example, if biometrics aren’t available, you can fallback to passcode or show alternative UI.

This check is important to avoid errors on devices without biometric sensors. It also helps provide a better user experience by adapting the authentication flow to the device’s features.

Implementing the authenticateAsync method to prompt user authentication

The core authentication function calls with custom messages for the prompt and fallback options. This method triggers the native Face ID, Touch ID, or passcode dialog on the device.

I pass options like to customize the dialog text and to provide a fallback button label such as "Enter password." The method returns a result object with a property indicating if authentication passed.

Based on the result, I update the app’s authentication state to show the payment screen or keep the user on the login screen. I also log the result to the console for debugging purposes during development.

This approach leverages Expo’s built-in biometric APIs to provide secure, native authentication without extra native code.

Managing authentication state and conditional screen rendering

I use React’s and hooks to track whether the user is authenticated and if biometrics are supported. Initially, the user is not authenticated, so the login screen is shown.

When authentication succeeds, the state updates to reflect the logged-in status. The app then conditionally renders either the or the based on this state.

This state-driven UI flow ensures users see the correct screen depending on their login status. It also makes it easy to add logout functionality by resetting the authentication state.

Handling fallback messages and user feedback during authentication

The authentication prompt includes customizable messages like "Authenticate only for example" to guide users. The fallback label, such as "Enter password," provides an alternative if biometrics aren’t available or fail.

These messages improve user experience by clearly communicating what’s expected during authentication. They also help users understand their options if biometric login isn’t possible.

During development, I use console logs to inspect the authentication results and troubleshoot any issues. This feedback loop is helpful for refining the authentication flow and handling edge cases gracefully.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

YouTubeReact Native Expo Local Authentication | Face ID | Touch ID | Passcode 2022

Official video tutorial on integrating local authentication in Expo apps.

Let's connect!