✨Works out of the box guarantee. If you face any issue at all, hit us up on Telegram and we will write the integration for you.


Publish on chain using nibijs


At this stage, we assume that you are familiar with the steps at ReactJs.

We will be using Keplr (opens in a new tab) as a wallet to interact with the frontend interface. Make sure that you have it installed and funded with testnet Nibi (opens in a new tab).

You can access the code of this walkthrough on Gitlab:

Contract deployment

Clone the client contract repo.

This Nibiru contract (opens in a new tab) serves as a client to our Reclaim contract. It instantiates Reclaim's contract, handles proofs, and verifies them.

git clone https://gitlab.reclaimprotocol.org/starterpacks/nibiru-client-contract
make build

Add your wallet information.

As stated in the README, add your wallet credentials to your node/.env.

MNEMONIC= // Your mnemonic

Deploy and verify a proof.

In the node directory, run npm run start, you can upload the contract, instantiate it, and verify a Reclaim proof on it. Run the script and take a note of your contract address, we will be using it later.


React client development

Cloning the frontend repo.

git clone https://gitlab.reclaimprotocol.org/starterpacks/nibiru-client-frontend
cd nibiru-client-frontend
npm install

Code discovery (App.js).

We will submit the proof on chain once we get the onSuccessCallback. Fill in your Reclaim credentials marked with //TODOs.

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
import { useState } from 'react'
import VerifyProof from './VerifyProof'
import ConnectButton from './ConnectButton'
function App() {
  const [url, setUrl] = useState('')
  const [ready, setReady] = useState(false);
  const [proof, setProof] = useState({});
  const reclaimClient = new Reclaim.ProofRequest('') //TODO: replace with your applicationId
  async function generateVerificationRequest() {
    const providerId = '' //TODO: replace with your provider ids you had selected while creating the application
    const APP_SECRET = "" //TODO : replace with your APP_SECRET
    await reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    await reclaimClient.buildProofRequest(providerId)
      await reclaimClient.generateSignature(
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
    await reclaimClient.startSession({
      onSuccessCallback: proof => {
        console.log('Verification success', proof)
        // Your business logic here
      onFailureCallback: error => {
        console.error('Verification failed', error)
        // Your business logic here to handle the error
  return (
    <div className='App'>
      <button onClick={() => generateVerificationRequest()}>
        Generate Verification Request
      <button onClick={() => window.open(url, '_blank')}>Open link</button>
      {ready && <VerifyProof proof={proof}></VerifyProof>}
export default App

Code discovery (src/nibiJs/nibijsFunctions.js).

Replace with your own Reclaim client contract's address.

import { useContext } from "react";
import { NibijsContext } from "./nibijsContext";
// Uncomment for mainnet
// let contractAddress = "nibi1d7ffxpewty3zd0lq39l9rxc2wtmgv8j3gsg3qf5yglzewqp84mkqlttmme";
let contractAddress = "nibi1l0yhggdxmvkcjd9a304gkel770rkyl2vy272q58seyp5sys7486spversq";
const NibijsFunctions = () => {
  const { nibijs, nibiAddress } = useContext(NibijsContext);
  let verify_proof = async (proof) => {
    let tx = await nibijs.wasmClient.execute(
        verify_proof: {
          proof: proof,
  return {
export { NibijsFunctions };

Submitting the proof

npm run build
npm run start

After requesting a proof from Reclaim and performing the verification on your end, a verify proof button will appear on the screen. Make sure your Keplr is connected, click the button, a wallet pop-up will show prompting you to submit.



Now your proof will get approved on-chain, here is the sample transaction (opens in a new tab) from the screenshot above.