Fullstack Example: Integrating Reclaim SDK in a JavaScript Application
This guide demonstrates how to integrate the Reclaim Protocol JavaScript SDK into a fullstack application. We'll cover both the backend and frontend implementations.
Backend Implementation
For a detailed backend implementation using Node.js and Express, please refer to the Backend Example.
The backend example provides a comprehensive guide on setting up a server that generates the SDK configuration and handles proof verification.
Frontend Implementation
Here's a basic implementation of how to use the SDK configuration from the backend to initialize the Reclaim SDK on the frontend:
import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk'
async function initializeReclaim() {
try {
// Fetch the configuration from your backend
const response = await fetch('https://your-backend.com/reclaim/generate-config')
const { reclaimProofRequestConfig } = await response.json()
// Reconstruct the ReclaimProofRequest object
const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig)
// Generate request URL
const requestUrl = await reclaimProofRequest.getRequestUrl()
// Start the session for better UX
await reclaimProofRequest.startSession({
onSuccess: (proofs) => {
console.log('Verification success', proofs)
// Handle successful verification (e.g., update UI, send to backend)
},
onFailure: (error) => {
console.error('Verification failed', error)
// Handle verification failure (e.g., show error message)
}
})
console.log('Request URL:', requestUrl)
} catch (error) {
console.error('Error initializing Reclaim:', error)
// Handle initialization error (e.g., show error message)
}
}
// Call this function when you want to start the Reclaim process
initializeReclaim()
This frontend implementation keeps things simple and user-friendly. It fetches the configuration from your backend, initializes the SDK, and provides basic success and failure handling.
Usage
- Set up your backend as described in the Backend Example.
- Implement the frontend code in your JavaScript application.
- Call the
initializeReclaim()
function when you want to start the Reclaim process (e.g., when a user clicks a button).
Remember to replace 'https://your-backend.com/reclaim/generate-config (opens in a new tab)' with the actual URL of your backend endpoint.
Next Steps
- Customize the UI to guide users through the Reclaim process.
- Implement error handling and loading states for a better user experience.
- Consider adding additional security measures, such as user authentication.
- Test thoroughly in different environments and edge cases.
By following this example, you'll have a basic fullstack implementation of the Reclaim Protocol in your JavaScript application. Happy coding!