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

$ 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:

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

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

In your Info.plist:

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

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.**

-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);
    });
};

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();
    });
}

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);
    });
}

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 6 March 2021

. . .

Using RN Fingerprint in our React Native Application

App Permissions

Leave a Comment Cancel Reply

Message Sent!