Nonchalantly Performs Magic

    react-native-smart-touch-id

    1.1.1 • Public • Published

    react-native-smart-touch-id

    npm npm npm npm

    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

    react-native-smart-touch-id-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 react-native-smart-touch-id@untilRN0.40 --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!')
      //    }
      //  })
      //}
     
      _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.

    Install

    npm i react-native-smart-touch-id

    DownloadsWeekly Downloads

    21

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • cyqresig