react-native-smart-touch-id

Smart authentication with the native Touch ID popup for React Native app.

This component is compatible with React Native 0.25 and newer, only supports iOS.

Preview

Installation

npm install react-native-smart-touch-id --save

Installation (iOS)

• Drag RCTTouchId.xcodeproj to your project on Xcode.

• Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTTouchId.a from the Products folder inside the RCTTouchId.xcodeproj.

• Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.

Full Demo

see ReactNativeComponentDemos

Usage

import React, {
  Component
} from 'react'
import {
  View,
  Text,
  Alert,
} from 'react-native'

import TouchId from 'react-native-smart-touch-id'
import Button from 'react-native-smart-button'

export default class TouchIdTest extends Component {

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', }}>
          <Button
            touchableType={'blur'}
            style={{marginVertical: 10, width: 300, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
            textStyle={{fontSize: 17,  color: 'white'}}
            onPress={this._isSupported}>
            verify if touchId is supported
          </Button>
          <Button
            touchableType={'blur'}
            style={{marginVertical: 10, width: 300, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
            textStyle={{fontSize: 17,  color: 'white'}}
            onPress={this._trggerTouchId}>
            trigger touch id
          </Button>
        </View>
    )
  }

  _isSupported = () => {
    TouchId.isSupported( (error) => {
      if (error) {
        Alert.alert('TouchId is not supported!')
      } else {
        Alert.alert('TouchId is supported!')
      }
    })
  }

  _trggerTouchId = () => {
    let description = 'Verify the existing mobile phone fingerprint using the home key'
    //let title       //fallback button title will be default as 'Enter Password'(localized)
    //let title = ""  //fallback button will be hidden
    let title = "Verify Password"   //fallback button title will be 'Verify Password'(unlocalized)
    TouchId.verify( description, title, (error) => {
      if (error) {
        if(error.message == '-3') {
            //fallback button is pressed
          Alert.alert('errorCode: ' + error.message + ' verify failed, user wants to ' + title)
        }
        else {
          Alert.alert('errorCode: ' + error.message + ' verify failed')
        }
      } else {
        Alert.alert('verify succeeded')
      }
    })
  }

}

Errors

There are various reasons why authenticating with Touch ID may fail. Whenever calling Touch ID authentication fails, TouchId.verify will return an error code.

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