How To Build A React App With SnarkJS

Rubydusa

1 min read

·

Oct 30, 2022

--

Listen

Share

Press enter or click to view image in full size

In this short tutorial I will demonstrate how to import and use SnarkJS in a react project, prior knowledge of circom and react are expected.

Make sure to check the official docs on the matter first: https://github.com/iden3/snarkjs#in-the-browser

Developers with experience with react could probably put the pieces together from the docs, but personally it took me quite a while to figure it out so I hope this tutorial reaches other newbies like me.

Importing SnarkJS

1. Install SnarkJS through npm:

npm i snarkjs

2. Copy snarkjs.min.js to the public folder

// in the root directorycp node_modules/snarkjs/build/snarkjs.min.js public/

3. Add this script tag to public/index.html

<head>
  ...
  <script src="/snarkjs.min.js"></script>
  ...
</head>

Using SnarkJS

1. Load SnarkJS in App.js (or any other react component)

const snarkjs = window.snarkjs;

2. You’re done! You may now use SnarkJS as you would in node.

function App() {
  return (
    <div>
      <button onClick={async () => 
        const {proof, publicSignals} = await snarkjs.groth16.fullProve({ a: 11, b: 3 }, "circuit.wasm", "circuit.zkey")
        console.log({ proof, publicSignals });}>
      </button>
    </div>
  )
}

Notice that wasm and zkey files should be placed under the public directory (e.g. public/circuit.wasmand public/circuit.zkey)