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:
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 w3wiki </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> w3wiki is a computer science portal for Beginner. 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: