Create a Biometric Authentication App using React-Native

Last Updated : 30 Jun, 2025

Biometric authentication, such as fingerprint, facial recognition, and other biometric identifiers, provides a smooth user experience and high-level security. In this tutorial, we will learn to implement a Biometric Authentication App using React-Native.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Prerequisites & Technologies Used:

Approach to Create Biometric Authentication App using React-Native

This will be a single-page application.
Using the LocalAuthentication package, we create a button to show or hide content.
When clicked on the button is clicked, we call the authenticateAsync method to authenticate with the available hardware.
On successful authentication, the hidden content will be displayed.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users:

For the Android Emulator, press " a" as mentioned in the image below.
For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.

For iOS users, simply scan the QR code using the Camera app.

If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Update Dependencies

The updated dependencies in package.json file will look like:

"dependencies": {
  "expo": "53.0.13",
  "expo-status-bar": "~2.2.3",
  "react": "18.2.0",
  "react-native": "0.79.0",
  "expo-local-authentication": "~16.0.4"
}

Step 4: Start Coding

Example: In this example, we are following the above-explained approach.

JavaScript

//App.js

import { StatusBar } from "expo-status-bar";
import { Alert, Button, StyleSheet, Text, View } from "react-native";
import * as LocalAuthentication from "expo-local-authentication";
import { useState } from "react";

export default function App() {
    const [authenticated, setAuthenticated] = useState(false);
    const checkDeviceForHardware = async () => {
        let compatible = await LocalAuthentication.hasHardwareAsync();
        console.log("compatible", compatible);
    };

    const checkForBiometrics = async () => {
        let biometricRecords = await LocalAuthentication.isEnrolledAsync();
        console.log("biometricRecords", biometricRecords);
    };

    const authenticate = async () => {
        let result = await LocalAuthentication.authenticateAsync();
        if (result.success) {
            setAuthenticated(true);
        } else {
            Alert.alert("Authentication failed");
        }
    };

    return (
        <View style={styles.container}>
            <StatusBar style="auto" />
            <Text style={styles.heading}>
                Biometric Authentication GeeksforGeeks
            </Text>
            <Button
                title={authenticated ? "Hide Content" : "Show Hidden Content"}
                onPress={() => {
                    if (authenticated) {
                        setAuthenticated(false);
                        return;
                    }
                    checkDeviceForHardware();
                    checkForBiometrics();
                    authenticate();
                }}
            />
            {authenticated && (
                <Text>
                    <Text style={{ fontWeight: "bold" }}>Hidden Content: </Text>
                    GeeksforGeeks is a computer science portal for geeks. It
                    contains well written, well thought and well explained
                    computer science and programming articles, quizzes and
                    practice/competitive programming/company interview
                    Questions.
                </Text>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "space-evenly",
        flex: 1,
    },
    heading: {
        fontSize: 20,
        fontWeight: "bold",
        marginBottom: 20,
        color: "green",
    },
});

Output:

Create an E-commerce App using React-Native

manavsarkar07

Improve

Article Tags :