Backend – Nextra

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>

Frontend-quickstart Build your own callback