Using RN Fingerprint in our React Native Application

A Fingerprint is a type of electronic security system that uses fingerprints for biometric authentication to grant the user access to information or to approve transactions. Basically, I have used it for Fingerprint Login. For it, I have saved/add User secure information wit his fingerprint and retrieve user information when user wants to log in.

For Fingerprint Scanner I have uses “react-native-fingerprint-scanner” library. it supports both technology iOS and Android and it easy to implement and modifiable.

How to Install it on our project- Use the following command

$ npm install react-native-fingerprint-scanner --save

Automatic Configuration

$ react-native link react-native-fingerprint-scanner

App Permissions

Add the following permissions to their respective files:

In your AndroidManifest.xml:

1	<uses-permission android:name="android.permission.USE_FINGERPRINT" />

In your Info.plist:

1 2	<key>NSFaceIDUsageDescription</key> <string>$(PRODUCT_NAME) requires FaceID access to allows you quick and secure access.</string>

If you use proguard rule then add following code on your android/app/proguard-rules.pro file

-keep class com.fingerprints.service.** { *; }

-dontwarn com.fingerprints.service.**

# Samsung Fingerprint

-keep class com.samsung.android.sdk.** { *; }

-dontwarn com.samsung.android.sdk.**

Check fingerprint availability in the device when start Login Component.

checkFingurePrintAvailability = () => {

FingerprintScanner.isSensorAvailable()

.then(biometryType =>{

this.biometric = biometryType;

console.log("BiometryType", biometryType)

AsyncStorage.getItem(AppConstant.IS_FINGER_PRINT_ENABLE).then(isEnable=>{

if(isEnable == 'true'){

this.setState({

isFingerPrintEnable : true

})

}

})

} )

.catch(error => {

console.log("BiometryType++++", error.message);

});

};

and now create a popup dialog for Android/iOS and add fingerprint Authentication in its componentDidMount

For Android

componentDidMount() {

FingerprintScanner

.authenticate({ onAttempt: this.handleAuthenticationAttempted })

.then(() => {

this.handlePopupDismissed(true);

})

.catch((error) => {

console.log("Error", error.message);

this.setState({ errorMessage: error.message, biometric: error.biometric });

this.description.shake();

});

}

For iOS (Please note that there is no need to return a view from render method It auto provide iOS dialog for render view)

componentDidMount() {

FingerprintScanner

.authenticate({ description: (StringConstant.SCAN_BIOMETRIC_TEXT(this.props.biometric))})

.then(() => {

this.handlePopupDismissed(true);

})

.catch((error) => {

this.handlePopupDismissed(false);

});

}

References: https://www.npmjs.com/package/react-native-fingerprint-scanner

ashwini gupta 30 August 2019

. . .

Using RN Fingerprint in our React Native Application

App Permissions

Leave a Comment Cancel Reply

Message Sent!