How to check support of Touch ID, Face Id ,Password and pattern lock in React-Native

Question

I am implementing biometric authentication for the application using react-native-fingerprint-scanner npm, with this npm I am not able to ensure that the device support biometric authentication or not, only for touch id is working for me.

How can I achieve Face Id, Passcode authentication ?

Verified using react-native-touch-id but it is not working for me.

Is there any way to achieve authentication on both platforms iOS and Android?

Reference:Link

Inae

You can see if the device is supported by a module. What's the problem? – Graviton

How to check in react-native any lib? – Inae

The answer to that has already been written by Johnborges. – Graviton

for me biometryType returns true only and how to go for pattern/password – Inae

Is the value of 'biometryType' always true, not a string? – Graviton

on my device I have set all three pattern it returns true – Inae

have you fixed it for face id? – Candlestick

Answer 1

react-native-touch-id should work for both TouchID and FaceID.

iOS allows the device to fall back to using the passcode, if faceid/touch is not available. this does not mean that if touchid/faceid fails the first few times it will revert to passcode, rather that if the former are not enrolled, then it will use the passcode.

from the docs

You can check to see if its supported first.

const optionalConfigObject = {
  fallbackLabel: 'Show Passcode', 
  passcodeFallback: true,
}

TouchID.isSupported(optionalConfigObject)
  .then(biometryType => {
    // Success code
    if (biometryType === 'FaceID') {
        console.log('FaceID is supported.');
    } else {
        console.log('TouchID is supported.');
    }
  })
  .catch(error => {
    // Failure code
    console.log(error);
  });

Vitality

Have you done for pass code if finger scan not done – Inae

From my understanding, thats not how the pass code fallback works. See my updated answer. – Vitality

react-native-touch-id is a deprecated plugin, which one can I use today? – Woken

It doesn't look deprecated just not actively maintained. An alternative is expo-local-authentication – Vitality

@Vitality do you have implementation guide for this expo-local-authentication? – Inae

you can use my guide where i have puted code, if touch id or face ID fails than you can use device passcode github.com/avaiyakapil/react-native-touch-id – Gettysburg

Answer 2

react-native-touch-id supports FaceId too. But, is not actively maintained anymore. So, they recommend to use expo local authentication. It works in all react native applications regardless of expo or not.

To use this, first you have to install react-native-unimodules. follow this guide https://docs.expo.io/bare/installing-unimodules/

Once it is installed you can install it by

npm install expo-local-authentication

add following line to your import

import LocalAuthentication from 'expo-local-authentication';

After that, we can use it.

async function biometricAuth(){
  const compatible = await LocalAuthentication.hasHardwareAsync();
  if (compatible) {
    const hasRecords = await LocalAuthentication.isEnrolledAsync();
    if (hasRecords) {
      const result = await LocalAuthentication.authenticateAsync();
      return result;
    }
  }
}

It will automatically choose between available local authentication (TouchID, FaceID, Number lock, Pattern lock etc) and authenticate the user.

Crepitate

Yes, it is for react native. Expo team made it supported for RN. Follow the steps above. – Crepitate

"import * as LocalAuthentication from 'expo-local-authentication'; " should be right here. – Hadsall

This solution doesn't work for android devices which supports only face recognition unlock. Do you know any solution? I provided precise question here: #73391935 – Tonguetied

Answer 3

enter image description here // use this package import RNBiometrics from "react-native-simple-biometrics"; this is both for touchId and passcode for android and ios

Zoo

Please consider sharing the code directly in the answer instead of in a screenshot – Rhineland

Answer 4

react-native-touch-id will work for both TouchID and FaceID

I have updated the repo so now if you want to use passcode after face ID or Touch ID fails than use will be prompted to enter the PIN (only for ios)checkout my repo

https://github.com/avaiyakapil/react-native-touch-id

import TouchID from 'react-native-touch-id';

TouchID.authenticate('Authentication')
     .then(success => {
              // Success code
            })
            .catch(error => {
              // Failure code
            });

Gettysburg

Answer 5

//this code is for checking whether touch id is supported or not
    TouchID.isSupported()
          .then(biometryType => {
            // Success code
            if (biometryType === 'FaceID') {
              console.log('FaceID is supported.');
            } else if (biometryType === 'TouchID'){
              console.log('TouchID is supported.');
            } else if (biometryType === true) {
              // Touch ID is supported on Android
        }
          })
          .catch(error => {
            // Failure code if the user's device does not have touchID or faceID enabled
            console.log(error);
          });

Slr