diff --git a/content/docs/expo/installation.mdx b/content/docs/expo/installation.mdx new file mode 100644 index 0000000..19689b4 --- /dev/null +++ b/content/docs/expo/installation.mdx @@ -0,0 +1,131 @@ +--- +title: Installation +description: Welcome to the first step in integrating Reclaim Protocol 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/reactnative-sdk +``` + +Using yarn: +```bash +yarn add @reclaimprotocol/reactnative-sdk +``` + +Using Expo CLI: +```bash +npx expo install @reclaimprotocol/reactnative-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 proof request +2. Explore [Advance Options](../advance-options/advance-options) 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`. + diff --git a/content/docs/expo/meta.json b/content/docs/expo/meta.json new file mode 100644 index 0000000..575aec3 --- /dev/null +++ b/content/docs/expo/meta.json @@ -0,0 +1,4 @@ +{ + "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 new file mode 100644 index 0000000..e0cc72b --- /dev/null +++ b/content/docs/expo/usage.mdx @@ -0,0 +1,147 @@ +--- +title: Usage +description: Learn how to integrate and use Reclaim Protocol in your React Native Expo app, from initialization to handling proof requests and responses. +--- + +## Prerequisites + +Before implementing the Reclaim Protocol SDK in your React Native Expo application, ensure you have: + +- Installed the Reclaim Protocol 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 components: + +```javascript +import React, { useState, useEffect } from 'react'; +import { View, Text, Button, Linking } from 'react-native'; +import { ReclaimProofRequest } from '@reclaimprotocol/reactnative-sdk'; +``` + +### 2. SDK Initialization + +Configure the SDK with your credentials: + +```javascript +const APP_ID = 'YOUR_APPLICATION_ID'; +const APP_SECRET = 'YOUR_APPLICATION_SECRET'; +const PROVIDER_ID = 'YOUR_PROVIDER_ID'; + +async function initializeReclaim() { + const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID); + return reclaimProofRequest; +} +``` + + +Replace the placeholder credentials with your actual values from the Reclaim Developer Portal. + + +### 3. Request URL Generation + +Create a verification request URL for users: + +```javascript +async function generateRequestUrl(reclaimProofRequest) { + const requestUrl = await reclaimProofRequest.getRequestUrl(); + console.log('Request URL:', requestUrl); + return requestUrl; +} +``` + +### 4. Verification Session Management + +Set up the verification session listener: + +```javascript +async function startVerificationSession(reclaimProofRequest, onSuccess, onError) { + await reclaimProofRequest.startSession({ + onSuccess: onSuccess, + onError: onError, + }); +} +``` + +### 5. React Native Expo Component Implementation + +The following component demonstrates a complete integration of the Reclaim Protocol: + +```javascript +function ReclaimDemo() { + // State management for URL and verification status + const [requestUrl, setRequestUrl] = useState(''); + const [status, setStatus] = useState(''); + + useEffect(() => { + async function setup() { + try { + // Initialize SDK and generate request URL + const reclaimProofRequest = await initializeReclaim(); + const url = await generateRequestUrl(reclaimProofRequest); + setRequestUrl(url); + setStatus('Ready to start verification'); + + // Start listening for verification results + await startVerificationSession( + reclaimProofRequest, + (proofs) => { + if (proofs) { + if (typeof proofs === 'string') { + // Handle custom callback URL response + console.log('SDK Message:', proofs); + } else if (typeof proofs !== 'string') { + // Handle default callback URL response + if (Array.isArray(proofs)) { + // when using provider with multiple proofs, we get an array of proofs + console.log('Proof received:', JSON.stringify(proofs.map(p => p.claimData.context))); + } else { + // when using provider with a single proof, we get a single proof object + console.log('Proof received:', JSON.stringify(proofs.claimData.context)); + } + } + setStatus('Proof received!'); + } + }, + (error) => { + console.error('Verification failed', error); + setStatus(`Error: ${error.message}`); + } + ); + } catch (error) { + console.error('Setup failed', error); + setStatus(`Setup failed: ${error.message}`); + } + } + + setup(); + }, []); + + const openRequestUrl = () => { + if (requestUrl) { + Linking.openURL(requestUrl); + } + }; + + return ( + + Reclaim Demo + Status: {status} + {requestUrl &&