Before you begin
All sdk's methods used in this tutorial are expalined in detail in Methods documentation.
We will be building a simple app, which users can use to generate a proof request, then generate the actual proof using Reclaim mobile App. Please note that for JS sdk, this process can be implemented either on the frontend or the backend.
We will be walking you through the Backend implementation in this section, you can also take a look at the frontend implementation.
Prerequisites
- Node.js 18.0.0 or later
Quickstart
The following tutorial is based on node express backend
Create an application on Dev Tool
Head to https://dev.reclaimprotocol.org (opens in a new tab) and create a new application. You'll be prompted to provide the websites you want to import data from. Once you create the application, you'll be given an application ID
and an application secret
. Please take note of these. These will be used in the next steps.
Install Reclaim SDK
npm i @reclaimprotocol/js-sdk
Import Reclaim Client
import { Reclaim } from '@reclaimprotocol/js-sdk'
Generate a user session id
This can be as simple as creatig a new uuid
.
Be sure to store the session id in your database to map the session id to your website's user id.
In some cases, it might be ok to set the sessionId to the user's userId
const sessionId = random() // we recommend using uuid.v4()
// or
const sessionId = userId
// or
const sessionId = null // reclaim protocol will auto generate a sessionId
Initialize Reclaim Client
Boiler plate stuff.
router.get('/request-proofs', async () => {
const reclaimClient = new Reclaim.ProofRequest(
'YOUR_APPLICATION_ID_HERE',
sessionId
) //TODO: replace with your applicationId
})
Add Context to the proof, optional but recommended
You can add context to your proof. There are two pieces of information that are part of context.
- Address - this can be an Ethereum/Solana/Cosmos address. This is typically set when the proof is to be used on a blockchain application. When using on blockchain applications, we recommend setting this context address and using this address in the business logic instead of signer of the transaction (e.g.
msg.sender
). If you don't set the context address and use transaction signer as the user's address, there is a front-running security threat. - Message - this can be used to inform the user why this proof is being requested. If your application needs to be sure that the user generates a fresh cryptographic proof for your application, and not reuse an existing proof they created for some other application, you should set the
context.message
to something that is unique to your application. Upon receiving the proof from the user, ensure that the context.message is exactly what you had set it to earlier to avoid scammers from spoofing your users' proofs.
router.get('/request-proofs', async () => {
const reclaimClient = new Reclaim.ProofRequest(
'YOUR_APPLICATION_ID_HERE',
sessionId
) //TODO: replace with your applicationId
await reclaimClient.addContext(
(`user's address`),
('for acmecorp.com on 1st january')
)
})
Build the Proof Request
router.get('/request-proofs', async () => {
const reclaimClient = new Reclaim.ProofRequest(
'YOUR_APPLICATION_ID_HERE',
sessionId
) //TODO: replace with your applicationId
await reclaimClient.addContext(
(`user's address`),
('for acmecorp.com on 1st january')
)
// id of the provider you want to generate the proof for
await reclaimClient.buildProofRequest('PROVIDER_ID')
})
Set Signature for request
You must set a signature on the request so that the users don't get tricked on phishing websites, and mistakenly upload all their data to a malicious website.
router.get('/request-proofs', async () => {
const reclaimClient = new Reclaim.ProofRequest(
'YOUR_APPLICATION_ID_HERE',
sessionId
) //TODO: replace with your applicationId
await reclaimClient.addContext(
(`user's address`),
('for acmecorp.com on 1st january')
)
// id of the provider you want to generate the proof for
await reclaimClient.buildProofRequest('PROVIDER_ID')
reclaimClient.setSignature(
await reclaimClient.generateSignature(
APP_SECRET //TODO : replace with your APP_SECRET
)
)
})
Get the status URL & request URL
router.get('/request-proofs', () => {
const reclaimClient = new Reclaim.ProofRequest(
'YOUR_APPLICATION_ID_HERE',
sessionId
) //TODO: replace with your applicationId
await reclaimClient.addContext(
(`user's address`),
('for acmecorp.com on 1st january')
)
// id of the provider you want to generate the proof for
await reclaimClient.buildProofRequest('PROVIDER_ID')
reclaimClient.setSignature(
await reclaimClient.generateSignature(
APP_SECRET //TODO : replace with your APP_SECRET
)
)
const {requestUrl, statusUrl} = await reclaimClient.createVerificationRequest();
res.send('request-proof', {requestUrl, statusUrl})
});
Display the QR code or display a button
If the user opens your website on a laptop, show the QR code of the requestUrl
.
If the user opens your website on a mobile, show a button that has a link to requestUrl
.
<html>
<body>
<img
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=#{requestUrl}"
/>
</body>
</html>
Poll statusUrl
You can poll the status URL. When, the proof is uploaded, the status is updated to Ok
<html>
<body>
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=#{requestUrl}" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var intervalId;
intervalId = setInterval(function(){
const statusResponse = axios.get("#{statusUrl}");
if(statusResponse.data.message == "Ok"){
const context = JSON.parse(statusResponse.data.session.proofs[0].claimData.context); //optional
clearInterval(intervalId);
alert("Verified")
}
}, 3000)
</script>
</body>
</html>