diff --git a/content/docs/expo/installation.mdx b/content/docs/expo/installation.mdx deleted file mode 100644 index bd219fe..0000000 --- a/content/docs/expo/installation.mdx +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Installation -description: Welcome to the first step in integrating Reclaim Protocol's InApp SDK into your React Native Expo project! This guide will walk you through the installation process and help you get started quickly. ---- - -## Prerequisites - -Before starting, ensure you have the following requirements installed: -- Node.js (version 16.0.0 or later) -- npm (Node Package Manager, included with Node.js) or yarn -- A working React Native Expo project - - If you haven't created one, run: `npx create-expo-app@latest my-app` - - -Make sure your Expo project is properly configured and can run successfully before installing the SDK. - - -## Installation - -### 1. Install the SDK - -Navigate to your React Native Expo project's root directory and execute one of the following commands: - -Using npm: -```bash -npm install @reclaimprotocol/inapp-rn-sdk -``` - -Using yarn: -```bash -yarn add @reclaimprotocol/inapp-rn-sdk -``` - -Using Expo CLI: -```bash -npx expo install @reclaimprotocol/inapp-rn-sdk -``` - -### 2. Expo Configuration - -Since the Reclaim SDK uses native modules and deep linking, you need to configure your Expo project properly. - -#### Update app.json/app.config.js - -Add the following configuration to your `app.json` or `app.config.js`: - -```json -{ - "expo": { - "name": "Your App Name", - "slug": "your-app-slug", - "version": "1.0.0", - "orientation": "portrait", - "icon": "./assets/icon.png", - "userInterfaceStyle": "light", - "splash": { - "image": "./assets/splash.png", - "resizeMode": "contain", - "backgroundColor": "#ffffff" - }, - "scheme": "your-app-scheme", - "plugins": [ - "expo-router", - "expo-splash-screen", - "expo-web-browser" - ], - "assetBundlePatterns": [ - "**/*" - ], - "ios": { - "supportsTablet": true, - "bundleIdentifier": "com.yourcompany.yourapp" - }, - "android": { - "adaptiveIcon": { - "foregroundImage": "./assets/adaptive-icon.png", - "backgroundColor": "#FFFFFF" - }, - "package": "com.yourcompany.yourapp", - "intentFilters": [ - { - "action": "VIEW", - "autoVerify": true, - "data": [ - { - "scheme": "https", - "host": "your-domain.com" - } - ], - "category": ["BROWSABLE", "DEFAULT"] - } - ] - }, - "web": { - "favicon": "./assets/favicon.png" - } - } -} -``` - - -Replace `your-app-scheme`, `your-domain.com`, and package identifiers with your actual values. - - - -## Next Steps - -Now that you've installed the SDK successfully, you can: - -1. Follow the [Usage](./usage) guide to create your first verification request -2. Explore [Advance Options](../advance-options/web-sdk) for customization - -### Troubleshooting - -Common issues and solutions: - -#### Metro bundler issues -```bash -# Clear Metro cache -npx expo start --clear -``` - -#### Native module issues -```bash -# Rebuild development build -eas build --profile development --platform all --clear-cache -``` - - -Keep your SDK and Expo SDK versions up to date by regularly checking for updates using `npx expo install --fix`. - - - -**Compatibility Notice**: Please be aware of a known incompatibility between ReclaimInAppSdk and the `expo-dev-client` package on the iOS platform. When both packages are present in your iOS application, critical network requests from ReclaimInAppSdk may fail with a request timeout error. We recommend temporarily removing expo-dev-client from your project when you need to test or use ReclaimInAppSdk functionality on iOS. - diff --git a/content/docs/expo/meta.json b/content/docs/expo/meta.json deleted file mode 100644 index 575aec3..0000000 --- a/content/docs/expo/meta.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "title": "Expo SDK", - "pages": ["installation", "usage"] -} \ No newline at end of file diff --git a/content/docs/expo/usage.mdx b/content/docs/expo/usage.mdx deleted file mode 100644 index 26b2f3e..0000000 --- a/content/docs/expo/usage.mdx +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Usage -description: Learn how to integrate and use Reclaim Protocol's InApp SDK in your React Native Expo app, from initialization to handling verification requests and responses. ---- - -## Prerequisites - -Before implementing the Reclaim Protocol InApp SDK in your React Native Expo application, ensure you have: - -- Installed the Reclaim Protocol InApp SDK (detailed instructions in the [Installation Guide](./installation)) -- Obtained your credentials from the [Reclaim Developer Portal](https://dev.reclaimprotocol.org/): - - Application ID - - Application Secret - - Provider ID - -Security Notice: Never include your Application Secret in client-side code or version control systems. - -## Implementation Guide - -### 1. Import Required Dependencies - -Start by importing the necessary React Native, Expo, and Reclaim Protocol InApp SDK components: - -```javascript -import React, { useState } from 'react'; -import { View, Text, Button, Alert } from 'react-native'; -import { ReclaimVerification } from '@reclaimprotocol/inapp-rn-sdk'; -``` - -### 2. SDK Initialization - -Initialize the ReclaimVerification class to create an instance: - -```javascript -const APP_ID = 'YOUR_APPLICATION_ID'; -const APP_SECRET = 'YOUR_APPLICATION_SECRET'; -const PROVIDER_ID = 'YOUR_PROVIDER_ID'; - -const reclaimVerification = new ReclaimVerification(); -``` - - -Replace the placeholder credentials with your actual values from the Reclaim Developer Portal. - - -### 3. Start Verification Flow - -Start the verification flow by providing the app id, secret and provider id: - -```javascript -async function startVerification() { - try { - const verificationResult = await reclaimVerification.startVerification({ - appId: APP_ID, - secret: APP_SECRET, - providerId: PROVIDER_ID, - }); - - // Handle successful verification - if (verificationResult.proofs) { - console.log('Verification successful:', verificationResult.proofs); - return verificationResult; - } - } catch (error) { - // Handle verification errors - handleVerificationError(error); - } -} -``` - -### 4. Exception Handling - -Handle verification exceptions using the ReclaimVerificationException: - -```javascript -function handleVerificationError(error) { - if (error instanceof ReclaimVerification.ReclaimVerificationException) { - switch (error.type) { - case ReclaimVerification.ExceptionType.Cancelled: - Alert.alert('Verification Cancelled', 'The verification process was cancelled by the user.'); - break; - case ReclaimVerification.ExceptionType.Dismissed: - Alert.alert('Verification Dismissed', 'The verification process was dismissed.'); - break; - case ReclaimVerification.ExceptionType.SessionExpired: - Alert.alert('Session Expired', 'The verification session has expired. Please try again.'); - break; - case ReclaimVerification.ExceptionType.Failed: - default: - Alert.alert('Verification Failed', 'The verification process failed. Please try again.'); - } - - // Access additional error details - console.log('Session ID:', error.sessionId); - console.log('Reason:', error.reason); - console.log('Inner Error:', error.innerError); - } else { - Alert.alert('Error', error instanceof Error ? error.message : 'An unknown verification error occurred'); - } -} -``` - -### 5. React Native Expo Component Implementation - -The following component demonstrates a complete integration of the Reclaim Protocol InApp SDK: - -```javascript -function ReclaimDemo() { - const [status, setStatus] = useState('Ready to start verification'); - const [isVerifying, setIsVerifying] = useState(false); - - const handleStartVerification = async () => { - setIsVerifying(true); - setStatus('Starting verification...'); - - try { - const result = await startVerification(); - if (result && result.proofs) { - setStatus('Verification successful!'); - console.log('Proofs received:', result.proofs); - } - } catch (error) { - setStatus('Verification failed'); - handleVerificationError(error); - } finally { - setIsVerifying(false); - } - }; - - return ( - - Reclaim InApp Demo - Status: {status} -