Authenticate users with Touch ID, with optional fallback to passcode (if TouchID is unavailable or not enrolled). Most of the code and documentation is originally from react-native-touch-id, but together with naoufal we decided that fallback to passcode didn't belong in react-native-touch-id.

• UI
• Install
• Usage
• Errors
• License

If TouchID is supported and enrolled (in this gif, 1st touch fails, 2nd succeeds)

If TouchID is not supported or not enrolled, you can fallback to device passcode


npm i --save react-native-local-auth

First link the library to your project. There's excellent documentation on how to do this in the React Native Docs.

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import io.tradle.reactlocalauth.LocalAuthPackage; to the imports at the top of the file
• Add new LocalAuthPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-local-auth'
   project(':react-native-local-auth').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-local-auth/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-local-auth')
   

var LocalAuth = require('react-native-local-auth')

var YourComponent = React.createClass({
  _pressHandler() {
    LocalAuth.authenticate({
        reason: 'this is a secure area, please authenticate yourself',
        fallbackToPasscode: true,    // fallback to passcode on cancel
        suppressEnterPassword: true // disallow Enter Password fallback
      })
      .then(success => {
        AlertIOS.alert('Authenticated Successfully')
      })
      .catch(error => {
        AlertIOS.alert('Authentication Failed', error.message)
      })
  },

  render() {
    return (
      <View>
        ...
        <TouchableHighlight onPress={this._pressHandler}>
          <Text>
            Authenticate with Touch ID / Passcode
          </Text>
        </TouchableHighlight>
      </View>
    )
  }
})

check if Touch ID is supported. Returns a Promise object.

There are various reasons why authenticating with Touch ID or device passcode may fail. Whenever authentication fails, LocalAuth.authenticate will return an error code representing the reason.

Below is a list of error codes that can be returned:

More information on errors can be found in Apple's Documentation.

ISC. react-native-touch-id license also included.