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.
//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: