Skip to main content
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;
};
Call this method to check 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.

​
Response

​
available
boolean
Whether there is an existing biometric registration on device.
​
request_id
string
Globally unique UUID that is returned with every API call. This value is important to log for debugging purposes; we may ask for this value to help identify a specific API call when helping you debug an issue.
​
status_code
number
The HTTP status code of the response. Stytch follows standard HTTP response status code patterns, e.g. 2XX values equate to success, 3XX values are redirects, 4XX are client errors, and 5XX are server errors.