Support Passcode Fallback along with touchID.

React Native authentication with the native Touch ID popup can be achieved using naoufal’s react-native-touch-id. Secure biometric authentication needs to be seamless authentication flow for the user. This library also supports passcode and Face ID authentication.

How to install and use this library is detailed in the link below:

https://medium.com/react-native-training/integrate-touch-id-and-face-id-to-your-react-native-app-707e7db17edc

Why “react-native-touch-id”? Of course, it’s more popular with 14k weekly downloads and 1.2k stars as on nov 19.

For mobile apps created using create react native app there isn’t a component which supports passcode and touch ID authentication at the same time. In this post we will see how both touchID and passcode can work together. I have forked the react-native-touch-id library. So, let’s take a look at the changes:

Open the TouchID.xcodeproj project of react-native-touch-id in XCode and open the touchID.m file. Commented out is the old code. You need to pass the passcodeFallback flag as a boolvalue:

Changed the condition to evaluate the device owner authentication policy along with passcodeFallback:

At the time of authentication, changed the logic as below:

Also, we need to make sure that the conditions for passcodefallback and fingerprint are checked for device policies. Ensure that we return exact exception messages when user is not authenticated with the Touch ID or Passcode.

To use it in react native, pass the optionalConfigObject in TouchID.authenticate method. Take a look at the below code :

const optionalConfigObject = {
title: “Authentication Required”, // Android
color :”#4306e0",
imageErrorColor: “#ff0000”, // Android
sensorDescription: “Touch sensor”, // Android
sensorErrorDescription: “Failed to Authenticate your fingerprint”, // Android
cancelText: “Cancel”, // Android
fallbackLabel: ‘Enter Passcode’, // iOS (if empty, then label is hidden)
unifiedErrors: false, // use unified error messages (default false)
passcodeFallback: true , // iOS
}

Putting it all together

The code above shows the cleaned-up version of both authentication methods using react-native-touch-id. Notice here that earlier we were passing the passcodefallback as a numeric value to the touch ID implementation in touch.m . Also from react component side for TouchID.authenticate method we need to pass optionalConfigObject with passcodeFallback: true .

This is well tested feature implemented in one of our apps developed for iOS. In case you are interested, take a look at the pull request that includes all above changes. There are quite some people who found this feature useful. Do checkout the pull request at:

https://github.com/naoufal/react-native-touch-id/pull/216

You can also use my GitHub forked code:

pawankhadpe/react-native-touch-id

Hope you enjoyed reading this one!!