Consumer Authentication

/

Mobile SDKs

/

React Native SDK reference

/

Biometrics

/

Registration available

Registration available

Indicates if there is an existing biometric registration on device. This method can be used to determine whether or not to show biometric login or registration options.

import { useStytch } from '@stytch/react-native';
import React, { useCallback, useEffect, useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

export const Authenticate = () => {
  const stytch = useStytch();

  const [isBiometricsAvailable, setIsBiometricsAvailable] = useState(false);

  useEffect(() => {
    const checkBiometricsAvailability = async () => {
      if (stytch) {
        try {
          const available = await stytch.biometrics.isRegistrationAvailable();
          setIsBiometricsAvailable(available);
        } catch {
          setIsBiometricsAvailable(false);
        }
      } else {
        setIsBiometricsAvailable(false);
      }
    };

    checkBiometricsAvailability();
  }, [stytch]);

  const authenticateBiometrics = useCallback(() => {
    stytch.biometrics.authenticate({
      prompt: 'Login with Biometrics',
      sessionDurationMinutes: 60,
    });
  }, [stytch]);

  return isBiometricsAvailable ? (
    <View>
      <TouchableOpacity onPress={authenticateBiometrics}>
        <Text>Authenticate with Biometrics</Text>
      </TouchableOpacity>
    </View>
  ) : null;
};