Touch Id Authentication in React Native

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.

npm i --save react-native-touch-id

1	npm i --save react-native-touch-id

yarn add react-native-touch-id

1	yarn add react-native-touch-id

Secondly, We need to link the library by using :

react-native link react-native-touch-id

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 :

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

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

for IOS in your info.plist file :

<key>NSFaceIDUsageDescription</key>
<string>Enabling Face ID allows you quick and secure access to your account.</string>

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.

const optionalConfig = {
 title: "Authentication", // Android
 color: "#000000", // Android,
 fallbackLabel: "Authentication for IOS" // iOS (if empty, then label is hidden)
}

const optionalConfig = {

title: "Authentication", // Android

color: "#000000", // Android,

fallbackLabel: "Authentication for IOS" // iOS (if empty, then label is hidden)

}

We can use authenticate function without parameters like mentioned below :

TouchID.authenticate()
      .then(success => {
        Alert.alert('Authenticated Successfully');
      })
      .catch(error => {
        Alert.alert('Authentication Failed');
      });

TouchID.authenticate()

.then(success => {

Alert.alert('Authenticated Successfully');

})

.catch(error => {

Alert.alert('Authentication Failed');

});

With parameters :

TouchID.authenticate("Authentication Required", optionalConfig)
      .then(success => {
        Alert.alert('Authenticated Successfully');
      })
      .catch(error => {
        Alert.alert('Authentication Failed');
      });

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.

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

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:

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;

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 (

</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

Anand Kashyap 26 March 2021

. . .

3 comments

arun Jun 19, 2021 at 11:23 pm

How to allow in android. if fingerprint not available?

arun Jun 19, 2021 at 11:24 pm

How to allow passcode in android. if fingerprint not configured in device

Anand Kashyap (Moderator) Sep 28, 2021 at 12:17 pm
Hello arun,

You can use this package for passcode authenticate.

https://www.npmjs.com/package/react-native-passcode-auth

Reply

Touch Id Authentication in React Native

Leave a Comment Cancel Reply

3 comments

Message Sent!