Create a Biometric Authentication App using React-Native

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.

Preview of the final output:

Prerequisites & Technolgies Used:

• Introduction to React Native
• React Native State
• React Native Props
• Expo CLI
• Node.js and npm (Node Package Manager)

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 a content.
• When clicked on the button, we call the authenticateAsync method to authenticate with the available hardware.
• On successful authentication, the hidden content will be displayed.

Steps to Create React Native Application:

Step 1: Create the project:

npx create-expo-app biometric-authentication-app

Step 2: Navigate to the project

cd biometric-authentication-app

Step 3: Install the packages as follows:

npx expo install expo-local-authentication

Project Structure

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

"dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "expo-local-authentication": "~13.4.1"
}

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",
    },
});

Step to run the application:

Step 1: Navigate to the terminal or command prompt and type the required command there to run the React native application.

npx expo start

Step 2: Depending on your Operating System, type the following command in terminal

• To run on Android:

npx react-native run-android

• To run on IOS:

npx react-native run-ios

Output: