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 Notice
It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use npm install [email protected] --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
Usage
import React, { Component } from 'react' import { View, Text, Alert, StyleSheet } 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!') // } // }) //} _isSupported = async () => { try { await TouchId.isSupported() Alert.alert('TouchId is supported!') } catch(e) { Alert.alert('TouchId is not 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') // } // }) //} _trggerTouchId = async () => { 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) try { await TouchId.verify({ description, title, }); //await TouchId.verify("123123123123"); Alert.alert('verify succeeded') } catch(e) { if (e.code == '-3') { //fallback button is pressed Alert.alert('errorCode: ' + e.code + ' verify failed, user wants to ' + title) } else { Alert.alert('errorCode: ' + e.code + ' verify failed') } } } } 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.
