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.
To give you a better idea of what we’re going to create, let’s watch a demo video.
Demo Video
Prerequisites & Technologies 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 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-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, 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.
//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",
},
});
