In this blog, we are going to integrate Touch id authentication in React Native.
We have a Touch Id authentication library for biometric authentication and Face Id it is working for both platforms Android and IOS.
Firstly, We have to install the package by using npm or yarn.
|
1 |
npm i --save react-native-touch-id |
or
|
1 |
yarn add react-native-touch-id |
Secondly, We need to link the library by using :
|
1 |
react-native link react-native-touch-id |
Now the dependency configuration has completed.
After this, we need the permissions.
In your Manifest file for android :
|
1 |
<uses-permissionandroid:name="android.permission.USE_FINGERPRINT"/> |
for IOS in your info.plist file :
|
1 2 |
<key>NSFaceIDUsageDescription</key> <string>Enabling Face ID allows you quick and secure access to your account.</string> |
After providing all this permission just need to import the package and use its function to authenticate function it can take 2 parameters but it is not required.
First Parameter: The first parameter is a string parameter that stands for the title of the dialog box.
Second Parameter: Second parameter is an object that container 3 values title (for android only), color (for android only), and fallbackLabel (for ios only). the object is only for changing the color and title.
|
1 2 3 4 5 |
const optionalConfig = { title: "Authentication", // Android color: "#000000", // Android, fallbackLabel: "Authentication for IOS" // iOS (if empty, then label is hidden) } |
|
1 2 3 4 5 6 7 |
TouchID.authenticate() .then(success => { Alert.alert('Authenticated Successfully'); }) .catch(error => { Alert.alert('Authentication Failed'); }); |
With parameters :
|
1 2 3 4 5 6 7 |
TouchID.authenticate("Authentication Required", optionalConfig) .then(success => { Alert.alert('Authenticated Successfully'); }) .catch(error => { Alert.alert('Authentication Failed'); }); |
We have one function called isSupported, By the help of this function, you can check that the device is support authentication or face authentication. This function also checks that your device has any registered fingerprint or not.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
TouchID.isSupported(optionalConfigObject) .then(biometryType => { // Success code if (biometryType === 'FaceID') { console.log('FaceID is supported.'); } else { console.log('TouchID is supported.'); } }) .catch(error => { // Failure code console.log(error); }); |
Here we have the final code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React from 'react'; import { Alert, Text, TouchableOpacity, Button, View } from 'react-native'; import TouchID from 'react-native-touch-id'; const optionalConfigObject = { title: "Authentication Required", // Android color: "ffffff", // Android, fallbackLabel: "Show Passcode" // iOS (if empty, then label is hidden) } class App extends React.Component { touchIdAuth = () => { TouchID.isSupported() .then(biometryType => { // Success code if (biometryType === 'FaceID') { console.log('FaceID is supported.'); } else { console.log('TouchID is supported.'); TouchID.authenticate("Authenticate", optionalConfigObject) .then(success => { Alert.alert('Authenticated Successfully'); }) .catch(error => { Alert.alert('Authentication Failed', error.toString()); }); } }) .catch(error => { // Failure code console.log(error); }); } render() { return ( <View style={{justifyContent:'center',flex:1,alignSelf:'center'}}> <TouchableOpacity style={{flexWrap:'wrap'}}> <Button title="Authenticate" onPress={this.touchIdAuth.bind(this)}/> </TouchableOpacity> </View> ); } } export default App; |
In conclusion, we will achieve this:
I hope it will help you to integrate fingerprint authentication in your react native apps.
Reference link:- https://www.npmjs.com/package/react-native-touch-id
3 comments
You can use this package for passcode authenticate.
https://www.npmjs.com/package/react-native-passcode-auth