{"library":"react-native-passkey","title":"React Native Passkey Integration","description":"react-native-passkey provides native Passkey support for React Native applications targeting iOS 15.0+ and Android API 28+. It bridges WebAuthn API calls to the native platform credential managers, enabling secure, passwordless authentication. The package is currently at version 3.3.3 and maintains an active release cadence, with several minor and patch releases in the past year addressing fixes, updates, and new features like PRF extension support and improved error handling. A key differentiator is its direct native integration, abstracting away the platform-specific complexities of FIDO2 attestation and assertion, and offering support for advanced features like `largeBlob` and `authenticatorSelection` options. It ships with TypeScript types, facilitating safer development. The library works by taking FIDO2 attestation/assertion requests (typically from a backend) and handling the native UI and cryptographic operations, returning FIDO2 results for server verification.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-passkey"],"cli":null},"imports":["import { Passkey } from 'react-native-passkey';","import type { PasskeyCreateResult } from 'react-native-passkey';","import type { PasskeyGetResult } from 'react-native-passkey';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Passkey } from 'react-native-passkey';\nimport React, { useState, useEffect } from 'react';\nimport { View, Text, Button, Alert, ActivityIndicator, StyleSheet } from 'react-native';\n\nconst EXAMPLE_BACKEND_URL = process.env.PASSKEY_SERVER_URL ?? 'https://your-passkey-server.com';\n\nconst PasskeyDemo = () => {\n  const [isSupported, setIsSupported] = useState<boolean | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  useEffect(() => {\n    setIsSupported(Passkey.isSupported());\n  }, []);\n\n  const handleCreatePasskey = async () => {\n    if (!isSupported) {\n      Alert.alert('Not Supported', 'Passkeys are not supported on this device.');\n      return;\n    }\n    setIsLoading(true);\n    try {\n      // This request would typically come from your backend\n      // For demo, we'll simulate a simple registration request\n      const registrationChallengeResponse = await fetch(`${EXAMPLE_BACKEND_URL}/register/challenge`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ username: 'demoUser' + Date.now() })\n      });\n      const requestJson = await registrationChallengeResponse.json();\n\n      console.log('FIDO2 attestation request:', JSON.stringify(requestJson, null, 2));\n      const result = await Passkey.create(JSON.stringify(requestJson));\n      \n      // Send the result to your server for verification\n      const verificationResponse = await fetch(`${EXAMPLE_BACKEND_URL}/register/verify`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(result)\n      });\n      const verificationResult = await verificationResponse.json();\n\n      if (verificationResult.verified) {\n        Alert.alert('Success', 'Passkey created and verified!');\n      } else {\n        Alert.alert('Error', 'Passkey creation failed verification.');\n      }\n    } catch (error: any) {\n      console.error('Passkey creation error:', error);\n      Alert.alert('Error', `Failed to create Passkey: ${error.message}`);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>Passkey Demo</Text>\n      {isSupported === null ? (\n        <ActivityIndicator size=\"large\" />\n      ) : (\n        <Text style={styles.status}>Passkey Supported: {isSupported ? 'Yes' : 'No'}</Text>\n      )}\n      <Button\n        title=\"Create New Passkey\"\n        onPress={handleCreatePasskey}\n        disabled={isLoading || !isSupported}\n      />\n      {isLoading && <ActivityIndicator size=\"small\" style={styles.spinner} />}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 20,\n  },\n  status: {\n    fontSize: 18,\n    marginBottom: 20,\n  },\n  spinner: {\n    marginTop: 10\n  }\n});\n\nexport default PasskeyDemo;","lang":"typescript","description":"This quickstart demonstrates how to check for Passkey support and initiate the creation of a new Passkey. It simulates fetching a FIDO2 attestation request from a backend and then uses `Passkey.create()` to prompt the user, subsequently sending the result back for verification. Replace `EXAMPLE_BACKEND_URL` with your actual FIDO2 server endpoint.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}