{"id":28185999,"url":"https://github.com/reclaimprotocol/reclaim-js-sdk","last_synced_at":"2025-05-16T06:13:25.676Z","repository":{"id":255079671,"uuid":"840202416","full_name":"reclaimprotocol/reclaim-js-sdk","owner":"reclaimprotocol","description":"JavaScript SDK for easy integration of Reclaim Protocol that enables authenticated web data export via HTTPS and zero-knowledge proofs","archived":false,"fork":false,"pushed_at":"2025-05-05T10:50:18.000Z","size":418,"stargazers_count":32,"open_issues_count":9,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-14T16:58:48.162Z","etag":null,"topics":["hacktoberfest","hacktoberfest-2024","javascript","reclaim-protocol","sdk"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reclaimprotocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-09T07:27:30.000Z","updated_at":"2025-04-25T05:48:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e0d51d3-cf72-4c60-8fee-ffe4a488b02c","html_url":"https://github.com/reclaimprotocol/reclaim-js-sdk","commit_stats":null,"previous_names":["reclaimprotocol/reclaim-js-sdk"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reclaimprotocol%2Freclaim-js-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reclaimprotocol%2Freclaim-js-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reclaimprotocol%2Freclaim-js-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reclaimprotocol%2Freclaim-js-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reclaimprotocol","download_url":"https://codeload.github.com/reclaimprotocol/reclaim-js-sdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478020,"owners_count":22077679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","hacktoberfest-2024","javascript","reclaim-protocol","sdk"],"created_at":"2025-05-16T06:13:25.563Z","updated_at":"2025-05-16T06:13:25.645Z","avatar_url":"https://github.com/reclaimprotocol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n    \u003cdiv\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/reclaimprotocol/.github/main/assets/banners/JS-SDK.png\"  /\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n# Reclaim Protocol JavaScript SDK Integration Guide\n\nThis guide will walk you through integrating the Reclaim Protocol JavaScript SDK into your application. We'll create a simple React application that demonstrates how to use the SDK to generate proofs and verify claims.\n\n## Prerequisites\n\nBefore we begin, make sure you have:\n\n1. An application ID from Reclaim Protocol.\n2. An application secret from Reclaim Protocol.\n3. A provider ID for the specific service you want to verify.\n\nYou can obtain these details from the [Reclaim Developer Portal](https://dev.reclaimprotocol.org/).\n\n## Step 1: Create a new React application\n\nLet's start by creating a new React application:\n\n```bash\nnpx create-react-app reclaim-app\ncd reclaim-app\n```\n\n## Step 2: Install necessary dependencies\n\nInstall the Reclaim Protocol SDK and a QR code generator:\n\n```bash\nnpm install @reclaimprotocol/js-sdk react-qr-code\n```\n\n## Step 3: Set up your React component\n\nReplace the contents of `src/App.js` with the following code:\n\n```javascript\nimport React, { useState, useEffect } from 'react'\nimport { ReclaimProofRequest } from '@reclaimprotocol/js-sdk'\nimport QRCode from 'react-qr-code'\n\nfunction App() {\n  const [reclaimProofRequest, setReclaimProofRequest] = useState(null)\n  const [requestUrl, setRequestUrl] = useState('')\n  const [statusUrl, setStatusUrl] = useState('')\n  const [proofs, setProofs] = useState(null)\n\n  useEffect(() =\u003e {\n    async function initializeReclaim() {\n      const APP_ID = 'YOUR_APPLICATION_ID_HERE'\n      const APP_SECRET = 'YOUR_APPLICATION_SECRET_HERE'\n      const PROVIDER_ID = 'YOUR_PROVIDER_ID_HERE'\n\n      const proofRequest = await ReclaimProofRequest.init(\n        APP_ID,\n        APP_SECRET,\n        PROVIDER_ID\n      )\n      setReclaimProofRequest(proofRequest)\n    }\n\n    initializeReclaim()\n  }, [])\n\n  async function handleCreateClaim() {\n    if (!reclaimProofRequest) {\n      console.error('Reclaim Proof Request not initialized')\n      return\n    }\n\n    const url = await reclaimProofRequest.getRequestUrl()\n    setRequestUrl(url)\n\n    const status = reclaimProofRequest.getStatusUrl()\n    setStatusUrl(status)\n    console.log('Status URL:', status)\n\n    await reclaimProofRequest.startSession({\n      onSuccess: (proofs) =\u003e {\n        if (proofs \u0026\u0026 typeof proofs  === 'string') {\n            // When using a custom callback url, the proof is returned to the callback url and we get a message instead of a proof\n            console.log('SDK Message:', proofs)\n            setProofs(proofs)\n          } else if (proofs \u0026\u0026 typeof proofs !== 'string') {\n            // When using the default callback url, we get a proof\n            if (Array.isArray(proofs)) {\n              // when using the cascading providers, providers having more than one proof will return an array of proofs\n              console.log(JSON.stringify(proofs.map(p =\u003e p.claimData.context)))\n            } else {\n              console.log('Proof received:', proofs?.claimData.context)\n            }\n            setProofs(proofs)\n          }\n      },\n      onFailure: (error) =\u003e {\n        console.error('Verification failed', error)\n      }\n    })\n  }\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003eReclaim Protocol Demo\u003c/h1\u003e\n      \u003cbutton onClick={handleCreateClaim}\u003eCreate Claim\u003c/button\u003e\n      {requestUrl \u0026\u0026 (\n        \u003cdiv\u003e\n          \u003ch2\u003eScan this QR code to start the verification process:\u003c/h2\u003e\n          \u003cQRCode value={requestUrl} /\u003e\n        \u003c/div\u003e\n      )}\n      {proofs \u0026\u0026 (\n        \u003cdiv\u003e\n          \u003ch2\u003eVerification Successful!\u003c/h2\u003e\n          \u003cpre\u003e{JSON.stringify(proofs, null, 2)}\u003c/pre\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## Step 4: Understanding the code\n\nLet's break down what's happening in this code:\n\n1. We initialize the Reclaim SDK with your application ID, secret, and provider ID. This happens once when the component mounts.\n\n2. When the user clicks the \"Create Claim\" button, we:\n   - Generate a request URL using `getRequestUrl()`. This URL is used to create the QR code.\n   - Get the status URL using `getStatusUrl()`. This URL can be used to check the status of the claim process.\n   - Start a session with `startSession()`, which sets up callbacks for successful and failed verifications.\n\n3. We display a QR code using the request URL. When a user scans this code, it starts the verification process.\n\n4. The status URL is logged to the console. You can use this URL to check the status of the claim process programmatically.\n\n5. When the verification is successful, we display the proof data on the page.\n\n## Step 5: Run your application\n\nStart your development server:\n\n```bash\nnpm start\n```\n\nYour Reclaim SDK demo should now be running. Click the \"Create Claim\" button to generate a QR code. Scan this code to start the verification process.\n\n## Understanding the Claim Process\n\n1. **Creating a Claim**: When you click \"Create Claim\", the SDK generates a unique request for verification.\n\n2. **QR Code**: The QR code contains the request URL. When scanned, it initiates the verification process.\n\n3. **Status URL**: This URL (logged to the console) can be used to check the status of the claim process. It's useful for tracking the progress of verification.\n\n4. **Verification**: The `onSuccess` is called when verification is successful, providing the proof data. When using a custom callback url, the proof is returned to the callback url and we get a message instead of a proof.\n\n5. **Handling Failures**: The `onFailure` is called if verification fails, allowing you to handle errors gracefully.\n\n## Advanced Configuration\n\nThe Reclaim SDK offers several advanced options to customize your integration:\n\n1. **Adding Context**:\n   You can add context to your proof request, which can be useful for providing additional information:\n   ```javascript\n   reclaimProofRequest.addContext('0x00000000000', 'Example context message')\n   ```\n\n2. **Setting Parameters**:\n   If your provider requires specific parameters, you can set them like this:\n   ```javascript\n   reclaimProofRequest.setParams({ email: \"test@example.com\", userName: \"testUser\" })\n   ```\n\n3. **Custom Redirect URL**:\n   Set a custom URL to redirect users after the verification process:\n   ```javascript\n   reclaimProofRequest.setRedirectUrl('https://example.com/redirect')\n   ```\n\n4. **Custom Callback URL**:\n   Set a custom callback URL for your app which allows you to receive proofs and status updates on your callback URL:\n   Pass in `jsonProofResponse: true` to receive the proof in JSON format: By default, the proof is returned as a url encoded string.\n   ```javascript\n   reclaimProofRequest.setAppCallbackUrl('https://example.com/callback', true)\n   ```\n\n5. **Exporting and Importing SDK Configuration**:\n   You can export the entire Reclaim SDK configuration as a JSON string and use it to initialize the SDK with the same configuration on a different service or backend:\n   ```javascript\n   // On the client-side or initial service\n   const configJson = reclaimProofRequest.toJsonString()\n   console.log('Exportable config:', configJson)\n   \n   // Send this configJson to your backend or another service\n   \n   // On the backend or different service\n   const importedRequest = ReclaimProofRequest.fromJsonString(configJson)\n   const requestUrl = await importedRequest.getRequestUrl()\n   ```\n   This allows you to generate request URLs and other details from your backend or a different service while maintaining the same configuration.\n\n## Handling Proofs on Your Backend\n\nFor production applications, it's recommended to handle proofs on your backend:\n\n1. Set a callback URL:\n   ```javascript\n   reclaimProofRequest.setCallbackUrl('https://your-backend.com/receive-proofs')\n   ```\n\n\nThese options allow you to securely process proofs and status updates on your server.\n\n## Next Steps\n\nExplore the [Reclaim Protocol documentation](https://docs.reclaimprotocol.org/) for more advanced features and best practices for integrating the SDK into your production applications.\n\nHappy coding with Reclaim Protocol!\n\n## Contributing to Our Project\n\nWe welcome contributions to our project! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.\n\n## Security Note\n\nAlways keep your Application Secret secure. Never expose it in client-side code or public repositories.\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](https://github.com/reclaimprotocol/.github/blob/main/Code-of-Conduct.md) to ensure a positive and inclusive environment for all contributors.\n\n## Security\n\nIf you discover any security-related issues, please refer to our [Security Policy](https://github.com/reclaimprotocol/.github/blob/main/SECURITY.md) for information on how to responsibly disclose vulnerabilities.\n\n## Contributor License Agreement\n\nBefore contributing to this project, please read and sign our [Contributor License Agreement (CLA)](https://github.com/reclaimprotocol/.github/blob/main/CLA.md).\n\n## Indie Hackers\n\nFor Indie Hackers: [Check out our guidelines and potential grant opportunities](https://github.com/reclaimprotocol/.github/blob/main/Indie-Hackers.md)\n\n## License\n\nThis project is licensed under a [custom license](https://github.com/reclaimprotocol/.github/blob/main/LICENSE). By contributing to this project, you agree that your contributions will be licensed under its terms.\n\nThank you for your contributions!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freclaimprotocol%2Freclaim-js-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freclaimprotocol%2Freclaim-js-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freclaimprotocol%2Freclaim-js-sdk/lists"}