Create a Biometric Authentication App using React-Native - Coding

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:

Screenshot-2023-12-08-082150

Prerequisites & Technolgies 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 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

Screenshot-2023-12-03-081717

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:

screenrec_36

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Python Pyramid - Environment Setup
C++ Program to Find Largest Among Four Numbers
Bus Reservation System in C++
FastAPI - Templates
Configure Keyboard Shortcuts in Jupyter Notebook

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11