From 89fdebc8fb84801305e8f31794e09736cb24a8f6 Mon Sep 17 00:00:00 2001 From: Kushal7788 Date: Fri, 6 Jun 2025 16:03:35 +0530 Subject: [PATCH] Fixed Broken Links and Advance Options for Web SDK --- content/docs/advance-options/meta.json | 4 + .../{advance-options.mdx => web-sdk.mdx} | 662 +++++++++--------- content/docs/android-kotlin/usage.mdx | 3 - content/docs/expo/installation.mdx | 2 +- content/docs/expo/usage.mdx | 2 +- content/docs/ionic/usage.mdx | 3 - content/docs/ios-swift/usage.mdx | 3 - content/docs/react-native/usage.mdx | 2 - content/docs/web/backend/index.mdx | 6 +- content/docs/web/backend/installation.mdx | 11 +- content/docs/web/backend/usage.mdx | 4 +- content/docs/web/frontend/fullstack.mdx | 33 +- content/docs/web/frontend/index.mdx | 8 +- content/docs/web/frontend/quickstart.mdx | 57 +- content/docs/web/index.mdx | 17 +- 15 files changed, 414 insertions(+), 403 deletions(-) create mode 100644 content/docs/advance-options/meta.json rename content/docs/advance-options/{advance-options.mdx => web-sdk.mdx} (57%) diff --git a/content/docs/advance-options/meta.json b/content/docs/advance-options/meta.json new file mode 100644 index 0000000..4c5c098 --- /dev/null +++ b/content/docs/advance-options/meta.json @@ -0,0 +1,4 @@ +{ + "title": "Advanced Options", + "pages": ["attestor-auth", "verification", "overrides","verification-options","verification-status","web-sdk","js-injections"] +} \ No newline at end of file diff --git a/content/docs/advance-options/advance-options.mdx b/content/docs/advance-options/web-sdk.mdx similarity index 57% rename from content/docs/advance-options/advance-options.mdx rename to content/docs/advance-options/web-sdk.mdx index 63c20c9..04bf093 100644 --- a/content/docs/advance-options/advance-options.mdx +++ b/content/docs/advance-options/web-sdk.mdx @@ -1,20 +1,15 @@ --- -title: Advance Options -description: This guide provides detailed information on advanced configuration options for the Reclaim Protocol SDK across multiple platforms. These options allow you to customize and enhance your integration for specific use cases. +title: Web SDK +description: This guide provides advanced options for the Reclaim Protocol SDK across multiple platforms. These options allow you to customize and enhance your integration for specific use cases. --- - import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; - - Before exploring advanced options, ensure you're familiar with the Basic Usage guide for your platform. - All advanced options should be set before calling `getRequestUrl()` or `triggerReclaimFlow()`. These options work for both frontend and backend implementations. - - ## Advanced Options +Reclaim SDKs provide a lot of flexibility to customize the verification process. -### Initialization Options +### init() -When initializing the SDK, you can pass additional options to customize its behavior: +The `init` method allows you to pass additional options to customize the SDK's behavior. @@ -23,18 +18,19 @@ When initializing the SDK, you can pass additional options to customize its beha 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID', + // optional fields { - useAppClip: true, - log: true, - useBrowserExtension: true, - extensionID: 'custom-extension-id' + useAppClip: true, // default: true + log: true, // default: false + useBrowserExtension: true, // default: true + extensionID: 'custom-extension-id' // default: 'reclaim-extension' } ) ``` - - `useAppClip`: When set to `true`, the SDK will give an App Clip url when calling `getRequestUrl()` which allows to open the reclaim verifier app directly from your application. - - `log`: When set to `true`, enables detailed logging for debugging purposes. - - `useBrowserExtension`: When set to `true` (default), enables browser extension support for seamless desktop verification. - - `extensionID`: Custom extension identifier if using a different browser extension. + - `useAppClip` (Default: `true`): This option enables the use of AppClip/Instant App for mobile users. Only should be set to `true` when building mobile apps. + - `log` (Default: `false`): When set to `true`, enables detailed logging for debugging purposes. + - `useBrowserExtension` (Default: `true`): This option enables the use of reclaim browser extension for desktop users. When extension is not installed, the SDK will fallback to QR code flow. + - `extensionID` (Default: `reclaim-extension`): Unique extension identifier if using a custom reclaim browser extension. ```python @@ -44,22 +40,19 @@ When initializing the SDK, you can pass additional options to customize its beha 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID', - options={'log': True} + # optional fields + options={'log': True} # default: False ) ``` - `log`: When set to `true`, enables detailed logging for debugging purposes. - - Use this option to enhance debugging capabilities in your application. The logging option is particularly useful during development and testing phases. - - +### setAppCallbackUrl() +The `setAppCallbackUrl` method allows you to specify a custom API endpoint where verification credentials(proofs) will be sent upon successful generation. -### Checking Extension Availability - - + ```javascript const reclaimProofRequest = await ReclaimProofRequest.init( @@ -68,24 +61,16 @@ When initializing the SDK, you can pass additional options to customize its beha 'YOUR_PROVIDER_ID' ) - // Check if browser extension is available - const isExtensionAvailable = await reclaimProofRequest.isBrowserExtensionAvailable() - - if (isExtensionAvailable) { - console.log('Reclaim browser extension is installed') - // Extension will be used automatically with triggerReclaimFlow() - } else { - console.log('Browser extension not available, will use QR code flow') - } - ``` - - + // Make sure to set this before starting the verification session. + reclaimProofRequest.setAppCallbackUrl('https://your-api.com/receive-proofs') // your custom callback url here -### Modal Customization + ``` -When the QR code modal is displayed (fallback on desktop), you can customize its appearance and behavior: + Parameters for `setAppCallbackUrl`: + - `URL`: The URL of the API endpoint where proofs will be sent. + - `jsonProofResponse` (Optional) (Default: `false`): When set to `false`, the proof is returned as a url encoded message in the response. When set to `true`, the proof is returned as a JSON object in the response. - + ```javascript const reclaimProofRequest = await ReclaimProofRequest.init( @@ -94,51 +79,49 @@ When the QR code modal is displayed (fallback on desktop), you can customize its 'YOUR_PROVIDER_ID' ) - // Customize modal appearance before triggering flow - reclaimProofRequest.setModalOptions({ - title: 'Verify Your Account', - description: 'Scan the QR code with your mobile device or install our browser extension', - darkTheme: false, // Enable dark theme (default: false) - extensionUrl: 'https://chrome.google.com/webstore/detail/reclaim' // Custom extension URL - }) + // Make sure to set this before starting the verification session. + reclaimProofRequest.setAppCallbackUrl('https://your-api.com/receive-proofs') // your custom callback url here - // Trigger the verification flow with custom modal - await reclaimProofRequest.triggerReclaimFlow() ``` - - -**Modal Options:** -- `title`: Custom title for the modal dialog -- `description`: Custom description text shown to users -- `darkTheme`: Boolean to enable dark theme styling -- `extensionUrl`: Custom URL for browser extension download/installation - - - Modal customization allows you to maintain brand consistency and provide clear instructions to your users about the verification process. - - -### Adding Context - -Use the `addContext` method to include additional information in your proof request. This context helps identify and differentiate between various proof requests in the resulting proof object. - - - ```javascript - const reclaimProofRequest = await ReclaimProofRequest.init( + ```dart + final reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' + ); + + // Make sure to set this before starting the verification session. + reclaimProofRequest.setAppCallbackUrl('https://your-api.com/receive-proofs') // your custom callback url here + + ``` + + + ```python + from reclaim_python_sdk.proof_request import ReclaimProofRequest + + reclaim_proof_request = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' ) - reclaimProofRequest.addContext('0x1234567890abcdef', 'User registration proof') + # Make sure to set this before starting the verification session. + reclaim_proof_request.set_app_callback_url('https://your-api.com/receive-proofs') # your custom callback url here - // Works with both traditional and streamlined flows - const requestUrl = await reclaimProofRequest.getRequestUrl() - // OR - await reclaimProofRequest.triggerReclaimFlow() ``` + + +This is the recommended way to receive proofs directly on your endpoint. Make sure to use proper middleware to parse the proof object in the response. Eg. `express.text({ type: '*/*', limit: '50mb' })` in express.js. + +### setRedirectUrl() + +The `setRedirectUrl` method allows you to specify a custom URL where users will be redirected after the successful verification process. + + + ```javascript const reclaimProofRequest = await ReclaimProofRequest.init( @@ -147,9 +130,9 @@ Use the `addContext` method to include additional information in your proof requ 'YOUR_PROVIDER_ID' ) - reclaimProofRequest.addContext('0x1234567890abcdef', 'User registration proof') + // Make sure to set this before starting the verification session. + reclaimProofRequest.setRedirectUrl('https://your-app.com/verification-complete') - const requestUrl = await reclaimProofRequest.getRequestUrl() ``` @@ -160,140 +143,196 @@ Use the `addContext` method to include additional information in your proof requ 'YOUR_PROVIDER_ID' ); - reclaimProofRequest.addContext('0x1234567890abcdef', 'User registration proof'); + // Make sure to set this before starting the verification session. + reclaimProofRequest.setRedirectUrl('https://your-app.com/verification-complete'); // you can add a deep link to your app here - final requestUrl = await reclaimProofRequest.getRequestUrl(); ``` + + + Setting Up Deep Linking in Your Flutter App + + Follow these steps to implement deep linking functionality: + + 1. Configure Custom URL Scheme + - Define a unique URL scheme for your app (example: 'yourapp://') + - This allows your app to respond when users click links with your custom scheme + + 2. Implement Route Handler + - Create a dedicated route to handle the '/verification-complete' path + - This route will be triggered when users access your app through deep links + + 3. Handle Deep Link Data + - Extract and process any parameters or data passed through the deep link + - Use this data to navigate users to the appropriate screen or perform specific actions + + For detailed implementation instructions and best practices, refer to the official Flutter documentation: + [Deep Linking in Flutter](https://docs.flutter.dev/ui/navigation/deep-linking) + + ```python - from reclaim_python_sdk import ReclaimProofRequest + from reclaim_python_sdk.proof_request import ReclaimProofRequest reclaim_proof_request = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', - 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - reclaim_proof_request.add_context('0x1234567890abcdef', 'User registration proof') + # Make sure to set this before starting the verification session. + reclaim_proof_request.set_redirect_url('https://your-app.com/verification-complete') - request_url = await reclaim_proof_request.get_request_url() ``` -- `contextId`: Unique hex address identifier (string) -- `Context message`: Descriptive information about the proof request (string) - - - Context provides valuable metadata about your proof request's purpose or origin. This is particularly helpful when managing multiple proof types. The contextId must be a valid hex address (starting with '0x' and containing only 0-9 and a-f). - - -### Setting Parameters +### Exporting and Importing SDK Configuration -The `setParams` method lets you define specific conditions for proof generation, enabling selective triggering and manual verification workflows. +The SDK provides methods to export and import the entire configuration as a JSON string. This allows you to use the same verification session across different platforms with all our SDKs. - + ```javascript + // Export configuration const reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - reclaimProofRequest.setParams({ // Params value must be a string - minConnections: '500', - industry: 'Technology' - }) + const reclaimProofRequestConfig = reclaimProofRequest.toJsonString() - // Works with both flows - await reclaimProofRequest.triggerReclaimFlow() - // OR - const requestUrl = await reclaimProofRequest.getRequestUrl() - ``` - - - ```javascript - const reclaimProofRequest = await ReclaimProofRequest.init( - 'YOUR_RECLAIM_APP_ID', - 'YOUR_RECLAIM_APP_SECRET', - 'YOUR_PROVIDER_ID' - ) - reclaimProofRequest.setParams({ // Params value must be a string - minConnections: '500', - industry: 'Technology' - }) + // On a different service or application import the configuration + const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig) - const requestUrl = await reclaimProofRequest.getRequestUrl() + // Start the verification session using either `getRequestUrl` or `triggerReclaimFlow` + ``` ```dart + // Export configuration final reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ); - reclaimProofRequest.setParams({ // Params value must be a string - 'minConnections': '500', - 'industry': 'Technology' - }); + final reclaimProofRequestConfig = reclaimProofRequest.toJsonString(); + // On a different service or application import the configuration + final reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig); final requestUrl = await reclaimProofRequest.getRequestUrl(); ``` ```python - from reclaim_python_sdk import ReclaimProofRequest - + # Export configuration reclaim_proof_request = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - reclaim_proof_request.set_params({ - 'minConnections': '500', - 'industry': 'Technology' - }) + reclaim_proof_request_config = reclaim_proof_request.to_json_string() + # On a different service or application import the configuration + reclaim_proof_request = await ReclaimProofRequest.from_json_string(reclaim_proof_request_config) request_url = await reclaim_proof_request.get_request_url() ``` - - Use parameters judiciously. Proof generation will fail if the actual data doesn't meet the specified parameters. Ensure your parameters are both achievable and relevant to your proof request. - +### verifyProof() -### Custom Redirect URL +The SDK provides a method to verify the verification credentials(proofs) to ensure their authenticity. This is particularly useful when receiving proofs in your backend. - + -The `setRedirectUrl` method allows you to specify a custom URL where users will be redirected after the verification process. ```javascript - const reclaimProofRequest = await ReclaimProofRequest.init( - 'YOUR_RECLAIM_APP_ID', - 'YOUR_RECLAIM_APP_SECRET', - 'YOUR_PROVIDER_ID' - ) + import { verifyProof } from 'reclaim-sdk' - reclaimProofRequest.setRedirectUrl('https://your-app.com/verification-complete') + // make sure proofObject is of type 'Proof' Object + const isValid = await verifyProof(proofObject) + if (isValid) { + console.log('Proof is valid!') + } else { + console.log('Invalid proof - signature verification failed') + } + ``` + + + ```dart + import 'package:reclaim_sdk/reclaim.dart'; - // Works with both traditional and streamlined flows - await reclaimProofRequest.triggerReclaimFlow() - // OR - const requestUrl = await reclaimProofRequest.getRequestUrl() + // make sure proofObject is of type 'Proof' Object + final isValid = await verifyProof(proofObject); + if (isValid) { + print('Proof is valid!'); + } else { + print('Invalid proof - signature verification failed'); + } ``` - - This enhances user experience by seamlessly guiding users back to your application after proof generation. Ensure the redirect URL is prepared to handle post-verification logic. Works seamlessly with the streamlined `triggerReclaimFlow()` method. - - The `setRedirectUrl` method allows you to specify a custom URL where users will be redirected after the verification process. You can use this to set up a deep link to your app, ensuring a seamless return to your application after proof generation. + ```python + from reclaim_python_sdk import verify_proof, Proof + + # make sure proof_object is of type 'Proof' Object + proof_object = Proof.from_json(proof_json_object) + is_valid = await verify_proof(proof_object) + if is_valid: + print('Proof is valid!') + else: + print('Invalid proof - signature verification failed') + ``` + + + + + The reclaim-rust-sdk crate is currently in development and only supports verify proof for now. + + + Install the reclaim-rust-sdk crate in your project. + + ```bash + cargo add reclaim-rust-sdk@=0.1.0 + cargo add serde_json@=1.0.0 + ``` + + Add the following to your `Cargo.toml` file: + + ```toml + [dependencies] + reclaim-rust-sdk = "0.1.0" + serde_json = "1.0.0" + ``` + + ```rust + use reclaim_rust_sdk::verify_proof; + use serde_json::json; + + let proof: reclaim_rust_sdk::Proof = serde_json::from_value(proof_json).unwrap(); + + let is_valid = verify_proof(&proof); + if is_valid { + println!("✅ Proof is valid!"); + } else { + println!("❌ Invalid proof - signature verification failed"); + } + ``` + + + + +### addContext() + +Use the `addContext` method to include any additional information in your verification credentials(proofs). This information will be included in the proof object under the `context` field. + + + ```javascript const reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', @@ -301,23 +340,11 @@ The `setRedirectUrl` method allows you to specify a custom URL where users will 'YOUR_PROVIDER_ID' ) - reclaimProofRequest.setRedirectUrl('https://your-app.com/verification-complete') - - const requestUrl = await reclaimProofRequest.getRequestUrl() + // Make sure to set this before starting the verification session. + reclaimProofRequest.addContext('0x1234567890abcdef', 'User registration proof') ``` - - To set up deep linking in your RN app: - 1. Configure your app to handle the custom URL scheme (e.g., 'yourapp://') - 2. Set up a route in your app to handle the '/verification-complete' path - 3. Process any additional data passed through the deep link as needed - - For a complete guide on deep linking in React Native, see: [Deep Linking in React Native](https://reactnavigation.org/docs/deep-linking/) - - - - The `setRedirectUrl` method allows you to specify a custom URL where users will be redirected after the verification process. You can use this to set up a deep link to your app, ensuring a seamless return to your application after proof generation. ```dart final reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', @@ -325,78 +352,40 @@ The `setRedirectUrl` method allows you to specify a custom URL where users will 'YOUR_PROVIDER_ID' ); - reclaimProofRequest.setRedirectUrl('https://your-app.com/verification-complete'); + // Make sure to set this before starting the verification session. + reclaimProofRequest.addContext('0x1234567890abcdef', 'User registration proof'); - final requestUrl = await reclaimProofRequest.getRequestUrl(); ``` - - - Setting Up Deep Linking in Your Flutter App - - Follow these steps to implement deep linking functionality: - - 1. Configure Custom URL Scheme - - Define a unique URL scheme for your app (example: 'yourapp://') - - This allows your app to respond when users click links with your custom scheme - - 2. Implement Route Handler - - Create a dedicated route to handle the '/verification-complete' path - - This route will be triggered when users access your app through deep links - - 3. Handle Deep Link Data - - Extract and process any parameters or data passed through the deep link - - Use this data to navigate users to the appropriate screen or perform specific actions - - For detailed implementation instructions and best practices, refer to the official Flutter documentation: - [Deep Linking in Flutter](https://docs.flutter.dev/ui/navigation/deep-linking) - - Note: Deep linking enables seamless navigation from external sources directly to specific screens within your app. - - ```python - from reclaim_python_sdk.proof_request import ReclaimProofRequest + from reclaim_python_sdk import ReclaimProofRequest reclaim_proof_request = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', - 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - reclaim_proof_request.set_redirect_url('https://your-app.com/verification-complete') + # Make sure to set this before starting the verification session. + reclaim_proof_request.add_context('0x1234567890abcdef', 'User registration proof') - request_url = await reclaim_proof_request.get_request_url() ``` -### Custom Callback URL - -The `setAppCallbackUrl` method allows you to specify a custom API endpoint where proofs will be sent upon successful generation. - - - - ```javascript - const reclaimProofRequest = await ReclaimProofRequest.init( - 'YOUR_RECLAIM_APP_ID', - 'YOUR_RECLAIM_APP_SECRET', - 'YOUR_PROVIDER_ID' - ) +- `contextId`: Unique hex address identifier (string) +- `Context message`: Additional information to be included in the proof object (string) - reclaimProofRequest.setAppCallbackUrl('https://your-api.com/receive-proofs') + +The contextId must be a valid hex address (starting with '0x' and containing only 0-9 and a-f). + - // Works with both flows - proofs sent to callback regardless of method - await reclaimProofRequest.triggerReclaimFlow() - // OR - const requestUrl = await reclaimProofRequest.getRequestUrl() - ``` +### setParams() - Parameters for `setAppCallbackUrl`: - - `URL`: The URL of the API endpoint where proofs will be sent. - - `jsonProofResponse` (Optional): By default, it is set to `false`. When set to `false`, the proof is returned as a url encoded message in the response. When set to `true`, the proof is returned as a JSON object in the response. +The `setParams` method lets you define specific conditions for proof generation, enabling selective triggering for verification sessions. - + ```javascript const reclaimProofRequest = await ReclaimProofRequest.init( @@ -405,9 +394,12 @@ The `setAppCallbackUrl` method allows you to specify a custom API endpoint where 'YOUR_PROVIDER_ID' ) - reclaimProofRequest.setAppCallbackUrl('https://your-api.com/receive-proofs') + // Make sure to set this before starting the verification session. + reclaimProofRequest.setParams({ + minConnections: '500', + industry: 'Technology' + }) - const requestUrl = await reclaimProofRequest.getRequestUrl() ``` @@ -418,14 +410,17 @@ The `setAppCallbackUrl` method allows you to specify a custom API endpoint where 'YOUR_PROVIDER_ID' ); - reclaimProofRequest.setAppCallbackUrl('https://your-api.com/receive-proofs'); + // Make sure to set this before starting the verification session. + reclaimProofRequest.setParams({ + 'minConnections': '500', + 'industry': 'Technology' + }); - final requestUrl = await reclaimProofRequest.getRequestUrl(); ``` ```python - from reclaim_python_sdk.proof_request import ReclaimProofRequest + from reclaim_python_sdk import ReclaimProofRequest reclaim_proof_request = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', @@ -433,193 +428,232 @@ The `setAppCallbackUrl` method allows you to specify a custom API endpoint where 'YOUR_PROVIDER_ID' ) - reclaim_proof_request.set_app_callback_url('https://your-api.com/receive-proofs') + # Make sure to set this before starting the verification session. + reclaim_proof_request.set_params({ + 'minConnections': '500', + 'industry': 'Technology' + }) - request_url = await reclaim_proof_request.get_request_url() ``` - This method is particularly useful for backend implementations. It allows you to receive proofs directly without polling the status URL. Ensure your endpoint is secure and can handle incoming proof data. Make sure to proper middleware to parse the proof object in the response. Eg. `express.text({ type: '*/*', limit: '50mb' })` in express.js. Works with both traditional and streamlined verification flows. + Proof generation will fail if the specified parameters are not present on the provider website. -### Exporting and Importing SDK Configuration +### isBrowserExtensionAvailable() -The SDK provides methods to export and import the entire configuration as a JSON string. This allows for flexible usage across different parts of your application. +The `isBrowserExtensionAvailable` method checks if any Reclaim browser extension is installed on the user's device. - + ```javascript - // Export configuration const reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - const reclaimProofRequestConfig = reclaimProofRequest.toJsonString() - - // On a different service or application import the configuration - const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig) + // Check if browser extension is available + const isExtensionAvailable = await reclaimProofRequest.isBrowserExtensionAvailable() - // Use with either flow method - await reclaimProofRequest.triggerReclaimFlow() - // OR - const requestUrl = await reclaimProofRequest.getRequestUrl() + if (isExtensionAvailable) { + console.log('Reclaim browser extension is installed') + // Extension will be used automatically with triggerReclaimFlow() + } else { + console.log('Browser extension not available, will use QR code flow') + } ``` + + +### setModalOptions() + +You can use `setModalOptions` method to customize the modal appearance and behavior of the QR code modal popup (appears on desktop when browser extension is not installed). +This is applicable only when using `triggerReclaimFlow` method. + + ```javascript - // Export configuration const reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - const reclaimProofRequestConfig = reclaimProofRequest.toJsonString() + // Customize modal appearance before triggering flow + reclaimProofRequest.setModalOptions({ + title: 'Verify Your Account', + description: 'Scan the QR code with your mobile device or install our browser extension', + darkTheme: false, // Enable dark theme (default: false) + extensionUrl: 'https://chrome.google.com/webstore/detail/reclaim' // Your extension download url + }) + + // Trigger the verification flow with custom modal + await reclaimProofRequest.triggerReclaimFlow() + ``` + + + +**Modal Options:** +- `title`: Custom title for the modal dialog +- `description`: Custom description text shown to users +- `darkTheme` (Default: `false`): Boolean to enable dark theme styling +- `extensionUrl`: Custom URL to install/download the browser extension + + +## Options to get various Session Details + +The SDK provides methods to fetch additional details about the verification session. + +### getRequestUrl() + +The `getRequestUrl` method returns the URL to start the verification session. + + + + ```javascript + const reclaimProofRequest = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) - // On a different service or application import the configuration - const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig) const requestUrl = await reclaimProofRequest.getRequestUrl() ``` ```dart - // Export configuration final reclaimProofRequest = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' - ); - - final reclaimProofRequestConfig = reclaimProofRequest.toJsonString(); + ) - // On a different service or application import the configuration - final reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig); - final requestUrl = await reclaimProofRequest.getRequestUrl(); + final requestUrl = await reclaimProofRequest.getRequestUrl() ``` ```python - # Export configuration + from reclaim_python_sdk import ReclaimProofRequest reclaim_proof_request = await ReclaimProofRequest.init( 'YOUR_RECLAIM_APP_ID', 'YOUR_RECLAIM_APP_SECRET', 'YOUR_PROVIDER_ID' ) - reclaim_proof_request_config = reclaim_proof_request.to_json_string() - - # On a different service or application import the configuration - reclaim_proof_request = await ReclaimProofRequest.from_json_string(reclaim_proof_request_config) request_url = await reclaim_proof_request.get_request_url() ``` - - This feature is particularly useful when you need to initialize the SDK in one part of your application (e.g., frontend) and use it in another (e.g., backend). It provides a seamless way to transfer the configuration. The exported configuration maintains all settings including modal customization and browser extension preferences. - -### Verifying Proof Signatures -The SDK provides a method to verify the cryptographic signatures of proofs to ensure their authenticity. This is particularly useful when receiving proofs from users or application sources. +### getSessionId() + +The `getSessionId` method returns the unique identifier for the verification session. - + + ```javascript - import { ReclaimProofRequest, verifyProof } from 'reclaim-sdk' + const reclaimProofRequest = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) - // make sure proofObject is of type Proof Object - const isValid = await verifyProof(proofObject) - if (isValid) { - console.log('Proof is valid!') - } else { - console.log('Invalid proof - signature verification failed') - } + const sessionId = await reclaimProofRequest.getSessionId() ``` + + +### getStatusUrl() + +The `getStatusUrl` method returns the URL to check the status of the verification session. You can use this URL to poll the status of the verification session. + + ```javascript - import { ReclaimProofRequest, verifyProof } from 'reclaim-sdk' + const reclaimProofRequest = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) - // make sure proofObject is of type Proof Object - const isValid = await verifyProof(proofObject) - if (isValid) { - console.log('Proof is valid!') - } else { - console.log('Invalid proof - signature verification failed') - } + const statusUrl = await reclaimProofRequest.getStatusUrl() ``` ```dart - import 'package:reclaim_sdk/reclaim.dart'; + final reclaimProofRequest = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) - // make sure proofObject is of type Proof Object - final isValid = await verifyProof(proofObject); - if (isValid) { - print('Proof is valid!'); - } else { - print('Invalid proof - signature verification failed'); - } + final statusUrl = await reclaimProofRequest.getStatusUrl() ``` ```python - from reclaim_python_sdk import ReclaimProofRequest, verify_proof, Proof + from reclaim_python_sdk import ReclaimProofRequest - # make sure proof_object is of type Proof Object - proof_object = Proof.from_json(proof_json_object) - is_valid = await verify_proof(proof_object) - if is_valid: - print('Proof is valid!') - else: - print('Invalid proof - signature verification failed') + reclaim_proof_request = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) + + status_url = await reclaim_proof_request.get_status_url() ``` - - - - The reclaim-rust-sdk crate is currently in development and only supports verify proof for now. - + - Install the reclaim-rust-sdk crate in your project. +### getAppCallbackUrl() - ```bash - cargo add reclaim-rust-sdk@=0.1.0 - cargo add serde_json@=1.0.0 - ``` +The `getAppCallbackUrl` method returns the URL where the verification credentials(proofs) will be sent upon successful generation. - Add the following to your `Cargo.toml` file: + + + ```javascript + const reclaimProofRequest = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) - ```toml - [dependencies] - reclaim-rust-sdk = "0.1.0" - serde_json = "1.0.0" + const appCallbackUrl = await reclaimProofRequest.getAppCallbackUrl() ``` + + + ```dart + final reclaimProofRequest = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) - ```rust - use reclaim_rust_sdk::verify_proof; - use serde_json::json; - - let proof: reclaim_rust_sdk::Proof = serde_json::from_value(proof_json).unwrap(); - - let is_valid = verify_proof(&proof); - if is_valid { - println!("✅ Proof is valid!"); - } else { - println!("❌ Invalid proof - signature verification failed"); - } + final appCallbackUrl = await reclaimProofRequest.getAppCallbackUrl() + ``` + + + ```python + from reclaim_python_sdk import ReclaimProofRequest + reclaim_proof_request = await ReclaimProofRequest.init( + 'YOUR_RECLAIM_APP_ID', + 'YOUR_RECLAIM_APP_SECRET', + 'YOUR_PROVIDER_ID' + ) + app_callback_url = await reclaim_proof_request.get_app_callback_url() ``` - - The `verifyProof` method checks the cryptographic signatures in the proof against the attestor's public key to ensure the proof hasn't been tampered with. Always verify proofs before accepting them as valid, especially when receiving them from different application sources. This verification works regardless of whether the proof was generated using traditional or streamlined flows. - + + + ## Understanding the Proof Structure diff --git a/content/docs/android-kotlin/usage.mdx b/content/docs/android-kotlin/usage.mdx index 83c291d..c6b06db 100644 --- a/content/docs/android-kotlin/usage.mdx +++ b/content/docs/android-kotlin/usage.mdx @@ -66,6 +66,3 @@ If the verification is cancelled or failed, the handler's `ReclaimVerification.R - See the [Reclaim Compose Example - Android](https://github.com/reclaimprotocol/reclaim-inapp-android-sdk/tree/main/example/README.md) for a complete example of how to use the SDK in an Android application. - -## Advanced Usage -For more usage options see [Advance Options guide](/advance-options/advance-options) diff --git a/content/docs/expo/installation.mdx b/content/docs/expo/installation.mdx index 19689b4..8f814d8 100644 --- a/content/docs/expo/installation.mdx +++ b/content/docs/expo/installation.mdx @@ -108,7 +108,7 @@ Replace `your-app-scheme`, `your-domain.com`, and package identifiers with your 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 +2. Explore [Advance Options](../advance-options/web-sdk) for customization ### Troubleshooting diff --git a/content/docs/expo/usage.mdx b/content/docs/expo/usage.mdx index e0cc72b..a548a47 100644 --- a/content/docs/expo/usage.mdx +++ b/content/docs/expo/usage.mdx @@ -144,4 +144,4 @@ function ReclaimDemo() { ## Advance Usage -You can check out available functions in the SDK in the [Advance Options](../advance-options/advance-options) guide +You can check out available functions in the SDK in the [Advance Options](../advance-options/web-sdk) guide diff --git a/content/docs/ionic/usage.mdx b/content/docs/ionic/usage.mdx index 3bc9cfe..76624c1 100644 --- a/content/docs/ionic/usage.mdx +++ b/content/docs/ionic/usage.mdx @@ -93,6 +93,3 @@ error.innerError - See the [Reclaim Example - Capacitor](https://github.com/reclaimprotocol/reclaim-inapp-capacitor-sdk/tree/main/example-app) for a complete example of how to use the SDK in a Capacitor application. - -## Advanced Usage -For more usage options see [Advance Options guide](/advance-options/advance-options) diff --git a/content/docs/ios-swift/usage.mdx b/content/docs/ios-swift/usage.mdx index 6275b52..5dbbcba 100644 --- a/content/docs/ios-swift/usage.mdx +++ b/content/docs/ios-swift/usage.mdx @@ -78,9 +78,6 @@ do { For a complete example, see the [Reclaim Example - SwiftUI](https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk/blob/53a19f88c8d90df485a60dc20190f740cd9fd108/Examples/SwiftUIExample/SwiftUIExample/ContentView.swift). -## Advanced Usage -For more usage options see [Advance Options guide](/advance-options/advance-options) - ## Example - See the [Reclaim Example - SwiftUI](https://github.com/reclaimprotocol/reclaim-inapp-ios-sdk/blob/53a19f88c8d90df485a60dc20190f740cd9fd108/Examples/SwiftUIExample/README.md) for a complete example of how to use the SDK in a SwiftUI application. diff --git a/content/docs/react-native/usage.mdx b/content/docs/react-native/usage.mdx index 69adcb6..8c09a23 100644 --- a/content/docs/react-native/usage.mdx +++ b/content/docs/react-native/usage.mdx @@ -90,5 +90,3 @@ error.innerError - Migration steps for [0.3.0](https://github.com/reclaimprotocol/reclaim-inapp-reactnative-sdk/blob/main/documentation/migration.md#030) - Migration steps for [0.2.1](https://github.com/reclaimprotocol/reclaim-inapp-reactnative-sdk/blob/main/documentation/migration.md#021) -## Advanced Usage -You can check out available functions in the SDK in the [Advance Options guide](/advance-options/advance-options) diff --git a/content/docs/web/backend/index.mdx b/content/docs/web/backend/index.mdx index 583847b..305283e 100644 --- a/content/docs/web/backend/index.mdx +++ b/content/docs/web/backend/index.mdx @@ -1,5 +1,5 @@ --- -title: Reclaim Protocol Backend SDKs +title: Reclaim Protocol Backend Integration description: This documentation helps you initiate a proof and verify the user-generated proof on the backend. This is the most secure way to request verifications. --- @@ -14,7 +14,7 @@ Reclaim Protocol offers two backend SDKs: 2. Set meta data in the Proof Request. a. Callback Url - where the proof, once generated, is sent b. Context - any additional information you want to be sent back to you in the proof -3. Send the Proof Request to the frontend. See how to use ProofRequest to optimally build your UI [here](/js/fullstack-example). +3. Send the Proof Request to the frontend. See how to use ProofRequest to optimally build your UI [here](../web/frontend/fullstack). 4. Accept the actual proof on the callback url set above. 5. Verify the proof that has been submitted, and then continue with your business logic. @@ -24,6 +24,6 @@ Reclaim Protocol offers two backend SDKs: 1. [Installation](./backend/installation) Learn how to set up either the JavaScript or Python SDK in your project. -2. [Backend Example](./backend/backend-example) +2. [Backend Example](./backend/usage) Understand the basic flow of using the SDKs in a backend environment. diff --git a/content/docs/web/backend/installation.mdx b/content/docs/web/backend/installation.mdx index cdc2ae5..a8c7ec9 100644 --- a/content/docs/web/backend/installation.mdx +++ b/content/docs/web/backend/installation.mdx @@ -1,14 +1,10 @@ --- title: Installation -description: Welcome to the guide on integrating Reclaim Protocol into your Node.js backend project! This guide will walk you through the installation process and help you get started quickly. +description: Welcome to the guide on integrating Reclaim Protocol into your backend project! This guide will walk you through the installation process and help you get started quickly. --- import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; -# Installing the Reclaim Protocol SDK for Backend - -Welcome to the guide on integrating Reclaim Protocol into your backend project! This guide will walk you through the installation process for both JavaScript and Python implementations. - ## Prerequisites Before you begin, make sure you have the appropriate environment set up: @@ -50,7 +46,7 @@ yarn add @reclaimprotocol/js-sdk Open your terminal and run: ```bash - pip install reclaim-python-sdk==1.0.0 + pip install reclaim-python-sdk ``` #### Verify Installation @@ -71,3 +67,6 @@ yarn add @reclaimprotocol/js-sdk ## Get an API Key Setup your project using the [Get API Key guide](/api-key). +## Integrate into your project +You can integrate the SDK into your backend using the [Usage guide](./usage) + diff --git a/content/docs/web/backend/usage.mdx b/content/docs/web/backend/usage.mdx index 1b6fdd9..ea85392 100644 --- a/content/docs/web/backend/usage.mdx +++ b/content/docs/web/backend/usage.mdx @@ -182,7 +182,7 @@ This endpoint will be called once the user generates the proof. Here is where we -For detailed information about the `proof` object received in the `/receive-proofs` endpoint, refer to the [Proof Structure](../advance-options/advance-options#understanding-the-proof-structure) section. +For detailed information about the `proof` object received in the `/receive-proofs` endpoint, refer to the [Proof Structure](../../advance-options/web-sdk#understanding-the-proof-structure) section. ### 3. Run the server @@ -209,6 +209,6 @@ For detailed information about the `proof` object received in the `/receive-proo ### 4. Display the Proof Request to the user -You can now display the Proof Request to the user, by following the [Fullstack Example here](/js/fullstack-example#2-frontend-implementation) +You can now display the Proof Request to the user, by following the [Fullstack Example here](../frontend/fullstack) diff --git a/content/docs/web/frontend/fullstack.mdx b/content/docs/web/frontend/fullstack.mdx index 3709ce8..f20463e 100644 --- a/content/docs/web/frontend/fullstack.mdx +++ b/content/docs/web/frontend/fullstack.mdx @@ -17,11 +17,9 @@ description: This guide demonstrates how to integrate the Reclaim Protocol JavaS - Install the React libraries using the [Installation guide](./installation) - Get the `APPLICATION_ID`, `APPLICATION_SECRET` and `PROVIDER_ID` using the [API Key guide](/api-key) -## Implementation Guide - ### 1. Backend Implementation -For a detailed backend implementation using Node.js and Express, please refer to the [Backend guide](./backend). +For a detailed backend implementation using Node.js/Python , please refer to the [Backend guide](../backend). If you are deploying on localhost, be sure to use [ngrok](https://ngrok.com) to make it visible on a public url. @@ -29,9 +27,17 @@ This guide will assume the backend has been deployed. ### 2. Frontend Implementation -### Streamlined Implementation with triggerReclaimFlow (Recommended) +There are two ways to implement the Reclaim Protocol on your frontend. + +- Using the `triggerReclaimFlow()` method (Recommended) +- Using the `getRequestUrl()` method + +### Using the `triggerReclaimFlow()` method (Recommended) -The modern approach uses the `triggerReclaimFlow()` method which automatically handles platform detection and provides the optimal user experience. Here's how to integrate it with your backend: +This method automatically detects the user's environment and chooses the best verification method for the user. +- Browser extension for desktop users (if installed) +- QR code popup for desktop users (if extension is not installed) +- AppClip/InstantApp redirection for mobile users ```javascript import { useState } from 'react'; @@ -39,7 +45,7 @@ import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk'; const BASE_URL = "https://your-domain.com"; // if using ngrok, use the ngrok base url here -function ReclaimDemo() { +function StartReclaimVerification() { const [proofs, setProofs] = useState(null); const [isLoading, setIsLoading] = useState(false); @@ -99,16 +105,12 @@ function ReclaimDemo() { ); } -export default ReclaimDemo; +export default StartReclaimVerification; ``` -### Customizing the Modal (Optional) - -You can customize the modal appearance and behavior using the `setModalOptions()` method. Check out the [advanced configuration options](./quickstart#advanced-configuration-options) for more details. - -### Traditional Implementation Guide +### Using the `getRequestUrl()` method -For more control over the verification flow, you can use the traditional approach: +This method generates a verification request URL that user needs to visit to start the session. ```javascript const getVerificationReq = async () => { @@ -177,3 +179,8 @@ Once `requestUrl` is set, display the QR or button for user to initiate verifica ``` + +To further customize the verification flow and UI, you can use the [Web SDK advanced options](../../advance-options/web-sdk) + + + diff --git a/content/docs/web/frontend/index.mdx b/content/docs/web/frontend/index.mdx index 46343f2..267be94 100644 --- a/content/docs/web/frontend/index.mdx +++ b/content/docs/web/frontend/index.mdx @@ -1,14 +1,16 @@ --- -title: Frontend +title: Reclaim Protocol Frontend Integration description: This guide will help you implement the front end using React --- + + ## Two modes ### Quickstart -To quickly get something up and running, you can use the [quickstart guide](./quickstart). +To quickly get something up and running, you can use the [quickstart guide](./frontend/quickstart). Though this is the easiest to get started, this is not secure - and not recommended for production deployments. ### Fullstack, production ready -To build a fullstack secure application, follow the [Fullstack guide](./fullstack) \ No newline at end of file +To build a fullstack secure application, follow the [Fullstack guide](./frontend/fullstack) \ No newline at end of file diff --git a/content/docs/web/frontend/quickstart.mdx b/content/docs/web/frontend/quickstart.mdx index c4402e6..7393172 100644 --- a/content/docs/web/frontend/quickstart.mdx +++ b/content/docs/web/frontend/quickstart.mdx @@ -7,9 +7,19 @@ description: This is the fastest way to get an prototype running and experience - Install the React libraries using the [Installation guide](./installation) - Get the `APPLICATION_ID`, `APPLICATION_SECRET` and `PROVIDER_ID` using the [API Key guide](/api-key) -## Streamlined Implementation with triggerReclaimFlow (Recommended) +## Quickstart -The Reclaim SDK now provides a simplified `triggerReclaimFlow()` method that automatically handles the verification process across different platforms and devices. This method intelligently chooses the best verification method based on the user's environment. +There are two ways to implement the Reclaim Protocol on your frontend. + +1. Using the `triggerReclaimFlow()` method (Recommended) +2. Using the `getRequestUrl()` method + +### 1. Using the `triggerReclaimFlow()` method (Recommended) + +This method automatically detects the user's environment and chooses the best verification method for the user. +- Browser extension for desktop users (if installed) +- QR code popup for desktop users (if extension is not installed) +- AppClip/InstantApp redirection for mobile users ```javascript import { useState } from 'react'; @@ -31,11 +41,7 @@ function ReclaimDemo() { // Initialize the Reclaim SDK with your credentials const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID); - // Trigger the verification flow automatically - // This method detects the user's platform and provides the optimal experience: - // - Browser extension for desktop users (if installed) - // - QR code modal for desktop users (fallback) - // - Native app clips for mobile users + // Trigger the verification session await reclaimProofRequest.triggerReclaimFlow(); // Start listening for proof submissions @@ -75,39 +81,8 @@ function ReclaimDemo() { export default ReclaimDemo; ``` -### How triggerReclaimFlow() Works - -The `triggerReclaimFlow()` method automatically detects the user's environment and chooses the optimal verification method: - -#### On Desktop Browsers: -1. **Browser Extension First**: If the Reclaim browser extension is installed, it uses the extension for seamless in-browser verification. -2. **QR Code Modal Fallback**: If the extension is not available, it automatically displays a QR code modal for mobile scanning. - -#### On Mobile Devices: -1. **iOS Devices**: Automatically redirects to the Reclaim App Clip for native iOS verification. -2. **Android Devices**: Automatically redirects to the Reclaim Instant App for native Android verification. - -### Browser Extension Support - -You can also manually check for browser extension availability and customize the QR code modal: - -```javascript -// Check if browser extension is available -const isExtensionAvailable = await reclaimProofRequest.isBrowserExtensionAvailable(); -console.log('Extension available:', isExtensionAvailable); - -// Customize modal appearance (optional) -reclaimProofRequest.setModalOptions({ - title: 'Verify Your Account', - description: 'Scan the QR code with your mobile device or install our browser extension', - darkTheme: false, - extensionUrl: 'https://chrome.google.com/webstore/detail/reclaim' -}); -``` - -## Traditional Implementation Guide - -For more control over the verification flow, you can use the traditional approach: +### 2. Using the `getRequestUrl()` method +This method generates a verification request URL that user needs to visit to start the session. ```javascript import { useState } from 'react'; @@ -180,4 +155,4 @@ export default ReclaimDemo; ``` ## Get production Ready -For production usecases, you might want to make sure that the proofs are sent directly to your backend - so that the user doesn't have an opportunity to tamper with the data. For that implement the [Backend](../backend) and follow the [Fullstack guide](./fullstack) \ No newline at end of file +For production usecases, you might want to make sure that the proofs are sent directly to your backend - so that the user doesn't have an opportunity to tamper with the data. Refer to the [Backend](../backend) and [Fullstack guide](./fullstack) for more details. \ No newline at end of file diff --git a/content/docs/web/index.mdx b/content/docs/web/index.mdx index 947d7ab..49edacc 100644 --- a/content/docs/web/index.mdx +++ b/content/docs/web/index.mdx @@ -1,17 +1,18 @@ --- title: Web SDK -description: Integrate Reclaim Protocol into your webapp using the NodeJS and React SDKs. +description: Integrate Reclaim Protocol into your webapp using our JS and Python SDKs. --- -## Understanding how the WebSDKs workflow +## Understanding the WebSDKs workflow ### Steps involved -1. A verification link is created on the frontend and displayed for the user to tap/scan QR code. -2. The user opens the above verification link and completes the verification using the Reclaim Protocol [AppClip](https://developer.apple.com/app-clips/)/[InstantApp](https://developer.android.com/topic/google-play-instant). The verification must be done using a mobile phone. No app install is required. -3. Once the user completes the verification on the AppClip/InstantApp, they will be prompted to redirect back to your webapp -4. The webapp polls the status of the verification and continues business logic, once the verification has been marked as complete. +1. A verification session is created on the frontend and displayed to the user to tap/scan QR code. +2. The user starts the session and completes the verification using the Reclaim Protocol [AppClip](https://developer.apple.com/app-clips/)/[InstantApp](https://developer.android.com/topic/google-play-instant). The verification must be done using a mobile phone. No app install is required. +3. Once the user completes the verification, they will be prompted to redirect back to your webapp. +4. The webapp polls the status of the verification session and continues business logic, once the verification has been marked as complete. +5. The backend will verify the proof and return the result to the frontend. ### What you need to implement -1. [Frontend](./frontend) application using React -2. [Backend](./backend) application to process the verification securely +1. [Frontend](./web/frontend) application using React +2. [Backend](./web/backend) application to process the verification securely using NodeJS/Python