Keystore available

Indicates whether or not the Keystore is available on the device. This will always return true for iOS devices. A percentage of Android devices will return false. To learn more about the implications of the Android Keystore being unavailable, read our Android Keystore resource.

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

export const Register = () => {
  const stytch = useStytch();
  const { session } = useStytchSession();

  const [isKeystoreAvailable, setIsKeystoreAvailable] = useState(false);
  useEffect(() => {
    if (stytch) {
      stytch.biometrics.isKeystoreAvailable().then(setIsKeystoreAvailable);
    }
  }, [stytch]);

  const registerBiometrics = useCallback(() => {
    if (session) {
      stytch.biometrics.register({
        prompt: 'Register Your Biometric Factor',
      });
    }
  }, [session, stytch.biometrics]);

  return isKeystoreAvailable ? (
    <View>
      <TouchableOpacity onPress={registerBiometrics}>
        <Text>Register with Biometrics</Text>
      </TouchableOpacity>
    </View>
  ) : null;
};