Search code examples
androidreact-nativeauthenticationfingerprintbiometrics

How to register a new fingerprint in the device?


I am using this library in RN to implement fingerprint scanning react-native-fingerprint-scanner and its working fine with scanning but I would like to implement a function that registers a new fingerprint for this app. I was absolutely not able to find it anything on the internet related to this.

Here is the code that I have implemented so far:

import React, { Component } from 'react';
import {
    Alert,
    Image,
    Text,
    TouchableOpacity,
    View,
    ViewPropTypes
} from 'react-native';
import FingerprintScanner from 'react-native-fingerprint-scanner';
import PropTypes from 'prop-types';

import ShakingText from './ShakingText.component';
import styles from './FingerprintPopup.component.styles';

class FingerprintPopup extends Component {

    constructor(props) {
        super(props);
        this.state = { errorMessage: undefined };
    }

    componentDidMount() {
        FingerprintScanner
            .authenticate({ onAttempt: this.handleAuthenticationAttempted })
            .then(() => {
                this.props.handlePopupDismissed();
                Alert.alert('Fingerprint Authentication', 'Authenticated successfully');
            })
            .catch((error) => {
                this.setState({ errorMessage: error.message });
                this.description.shake();
            });
    }

    componentWillUnmount() {
        FingerprintScanner.release();
    }

    handleAuthenticationAttempted = (error) => {
        this.setState({ errorMessage: error.message });
        this.description.shake();
    };

    render() {
        const { errorMessage } = this.state;
        const { style, handlePopupDismissed } = this.props;

        return (
            <View style={styles.container}>
                <View style={[styles.contentContainer, style]}>

                    <Image
                        style={styles.logo}
                        source={require('../pictures/finger_print.png')}
                    />

                    <Text style={styles.heading}>
                        Fingerprint{'\n'}Authentication
          </Text>
                    <ShakingText
                        ref={(instance) => { this.description = instance; }}
                        style={styles.description(!!errorMessage)}>
                        {errorMessage || 'Scan your fingerprint on the\ndevice scanner to continue'}
                    </ShakingText>

                    <TouchableOpacity
                        style={styles.buttonContainer}
                        onPress={handlePopupDismissed}
                    >
                        <Text style={styles.buttonText}>
                            BACK TO MAIN
            </Text>
                    </TouchableOpacity>

                </View>
            </View>
        );
    }
}

FingerprintPopup.propTypes = {
    style: ViewPropTypes.style,
    handlePopupDismissed: PropTypes.func.isRequired,
};

export default FingerprintPopup;

EDIT: Or at least I would like to prompt the user to set Fingerprint if they already don't have any finger enrolled in the phone.


Solution

  • I have found out that none of the OS (Android, iOS) will give you access to the keychain that's holding the credentials, for security reasons. However, I can use the same that's stored in the device's memory by the user to access my app same as other apps if they have the fingerprint feature implemented.

    All in all, you cant enrol a new unique fingerprint ONLY for your app!