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
|
1 2 3 4 |
$ 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
|
1 2 3 4 5 6 7 |
-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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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)
|
1 2 3 4 5 6 7 8 9 10 |
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