Skip to content
LogoLogo

usePasskeySupport

Checks if the current device supports passkey-based wallet recovery. Use this hook to conditionally show passkey options in your UI.

Usage

import { usePasskeySupport } from '@openfort/react-native';
 
function RecoveryMethodPicker() {
  const { isSupported, isLoading } = usePasskeySupport();
 
  if (isLoading) {
    return <ActivityIndicator />;
  }
 
  return (
    <View>
      <Button title="Use Automatic Recovery" onPress={handleAutomatic} />
      <Button title="Use Password Recovery" onPress={handlePassword} />
      {isSupported && (
        <Button title="Use Passkey Recovery" onPress={handlePasskey} />
      )}
    </View>
  );
}

Return type

type UsePasskeySupportReturn = {
  isSupported: boolean  // Whether the device supports passkeys
  isLoading: boolean    // Whether the check is still in progress
}

How it works

The hook uses the react-native-passkeys library to check WebAuthn support on the device:

  • iOS: Requires iOS 16+ with Face ID or Touch ID
  • Android: Requires Android 9+ with a configured screen lock and Google Play Services

Requirements

For passkey support to work, you need:

  1. Native build: Cannot use Expo Go
  2. Associated domains (iOS): Configure webcredentials:your-domain.com in your app's entitlements
  3. Digital Asset Links (Android): Host an assetlinks.json file at /.well-known/assetlinks.json
  4. HTTPS domain: Passkeys require a valid HTTPS domain as the Relying Party ID

See the Passkey Recovery Quickstart for complete setup instructions.

Example with wallet creation

import { usePasskeySupport, useEmbeddedEthereumWallet } from '@openfort/react-native';
 
function CreateWalletScreen() {
  const { isSupported: passkeySupported } = usePasskeySupport();
  const { create, status } = useEmbeddedEthereumWallet();
 
  const handleCreateWithPasskey = async () => {
    if (!passkeySupported) {
      Alert.alert('Error', 'Passkeys are not supported on this device');
      return;
    }
 
    try {
      await create({
        recoveryMethod: 'passkey',
        onSuccess: ({ account }) => {
          Alert.alert('Success', `Wallet created: ${account?.address}`);
        },
        onError: (error) => {
          Alert.alert('Error', error.message);
        },
      });
    } catch (error) {
      console.error('Failed to create wallet with passkey:', error);
    }
  };
 
  return (
    <View>
      <Button
        title={status === 'creating' ? 'Creating...' : 'Create Wallet with Passkey'}
        onPress={handleCreateWithPasskey}
        disabled={status === 'creating' || !passkeySupported}
      />
      {!passkeySupported && (
        <Text style={{ color: 'gray' }}>
          Passkeys not available on this device
        </Text>
      )}
    </View>
  );
}