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.
npm install react-native-smart-touch-id --save
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
-
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.
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')
}
}
}
}
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.