The technology of and especially is one of the most exciting ones in the field of crypto because of the following reasons: zero-knowledge proof zk-SNARK You can prove you have information without revealing it (for example, you can use it for anonymous voting). The proof is small and easy to verify on the blockchain, so it can be used for rollups. is a blockchain scaling solution where the computation is done off-chain, and after a given number of transactions the state is synchronized back to the blockchain. This solution gives you the security of the blockchain (after the synchronization), but the proof needs much less space (and less gas) than the original transactions. So zk-rollups are the ideal scaling solutions for the blockchain. Rollup I have a where I show how zero-knowledge proofs work through the source code of the Tornado Cash coin mixer. If you are not familiar with the technology, it is strongly recommended to read that article before this one. previous article In this article, I will show you how you can use zk-SNARK in your JavaScript project. If you have read my , you know that you need a circuit to generate a zero-knowledge proof. A circuit is a huge mathematical expression used by the system to calculate the outputs and the proof. The zero-knowledge proof itself is proof that you have successfully done the calculation. previous article A circuit can be really complex, but fortunately, there are circuit programming languages and libraries that make it easy to write your own circuits. We will use . Circom is written in Rust. To install it, you have to install the Rust environment with the following command: Circom curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh After the Rust installation, clone the Circom repo and build the compiler: git clone https://github.com/iden3/circom.git
cd circom
cargo build --release
cargo install --path circom If everything went well, now you have the Circom compiler installed. The other thing we need is the . Circomlib is a programming library with many useful predefined circuits. So, create an empty project, and install circomlib using this code: circomlib npm init
npm i circomlib Now, everything is ready to create our circuit. Here’s what that looks like: pragma circom 2.0.0;

include "node_modules/circomlib/circuits/poseidon.circom";

template PoseidonHasher() {
    signal input in;
    signal output out;

    component poseidon = Poseidon(1);
    poseidon.inputs[0] <== in;
    out <== poseidon.out;
}

component main = PoseidonHasher(); This simple circuit has a private input and an output . We are using the poseidon hasher from circomlib to generate the input . Using this circuit, we can prove that we know the original data for the given without revealing it. signal hash hash In the first step, we compile the circuit by the circom compiler that will generate a wasm and an r1cs file. circom poseidon_hasher.circom --wasm --r1cs -o ./build The generated wasm and r1cs files are available in the build folder. To generate the proof, we need a proving key file, and to generate this file, we need a ptau file. This ptau file can be generated by , or you can download a pregenerated one (you can find the links in the snarkjs repo). For testing, the generated one is good for us, but in your production app, it’s recommended to do the ceremony and generate your own ptau file. (You can read about it in my .) snarkjs previous article wget https://hermez.s3-eu-west-1.amazonaws.com/powersOfTau28_hez_final_12.ptau Now we can generate the proving key (zkey file) by using the circuit and the ptau file: npx snarkjs groth16 setup build/poseidon_hasher.r1cs powersOfTau28_hez_final_12.ptau circuit_0000.zkey It is not recommended to use this zkey file for production, but for testing, it will be good for us (for more info, please check the ). snarkjs documentation Now, everything is ready to generate the proof. We will use snarkjs, so install it with this command: npm i snarkjs The generation of proof looks like this: const { proof, publicSignals } = await snarkjs.groth16.fullProve(
  { in: 10 }, 
  "build/poseidon_hasher_js/poseidon_hasher.wasm", 
  "circuit_0000.zkey");
console.log(publicSignals);
console.log(proof); The input signals are passed in the first parameter of the function. The second parameter is the compiled circuit, and the last parameter is the generated proving key. The function returns the outputs of the circuit and the proof. fullProve We need a verification key that can be generated from the proving key to verify the proof. Here’s how to get that: npx snarkjs zkey export verificationkey circuit_0000.zkey verification_key.json The verification code looks like this: const vKey = JSON.parse(fs.readFileSync("verification_key.json"));
const res = await snarkjs.groth16.verify(vKey, publicSignals, proof);

if (res === true) {
  console.log("Verification OK");
} else {
  console.log("Invalid proof");
} The verification key is the first parameter of the function, and the outputs and proof are the second and third parameters. The result of the function is a simple boolean. verify In this example, we used the circuit to calculate the , but it is not always possible because the can be a partial result, or our circuit would look like this: hash hash pragma circom 2.0.0;

include "node_modules/circomlib/circuits/poseidon.circom";

template PoseidonHasher() {
    signal input in;
    signal input hash;

    component poseidon = Poseidon(1);
    poseidon.inputs[0] <== in;
    hash === poseidon.out;
}

component main {public [hash]} = PoseidonHasher(); This circuit has no outputs, only two inputs. The first input is the data, and the second is the hash of it. In the last line of the template, we check the . The circuit will run successfully only if the given is the poseidon of the given data. But how can we calculate the poseidon in JS? hash hash hash hash Circomlib has a that can be used for this. Let’s install it: JS implementation npm i circomlibjs Now we can calculate the by using the following code: hash const poseidon = await circomlibjs.buildPoseidon();
 const hash = poseidon.F.toString(poseidon([10]));
 console.log(hash); The result of the function is a , which we have to convert to a number. In zk-SNARK, every calculation is done in a , so we have to use for the conversion. poseidon Buffer finite field poseidon.F.toString Circomlibjs and snarkjs work well in Node.js and the browser, so you can generate or verify proofs on the client side. It is also possible to generate a smart contract for verification that you can use in your Solidity code to verify the proof. (For more info, please check the .) snarkjs documentation Circomlibjs also has smart contract generators. For example, if you want to generate a poseidon on-chain, you can do it by the generated code. hash This was my very short tutorial on using zk-SNARK in JavaScript. It’s not a full course, and you probably have many questions, but I hope I helped you to start your journey. and are well documented, and you can also learn a lot from existing projects like . Circom snarkjs Tornado Cash The source codes for this tutorial are available in . this GitHub repo Also Published Here

How I Built an Anonymous Voting System on the Ethereum Blockchain Using Zero-Knowledge Proof

How I Migrated My WordPress Site to GitHub Pages

Nominated for 2022 - HackerNoon Contributor of the Year - Neural Networks

JavaScript tutorial for Zero-Knowledge Proofs Using SnarkJS and Circom

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Brief History of Money: From the Economy of Favors to Bitcoin

(1/100) Crypto Countdown: Golem

A Research Report on the Trader $JOE DeFi Platform

07/03/2018: Biggest Stories in the Cryptosphere

05/02/2018: Biggest Stories in the Cryptosphere

01/06/2018: Biggest Stories in the Cryptosphere

A Brief History of Money: From the Economy of Favors to Bitcoin

(1/100) Crypto Countdown: Golem

A Research Report on the Trader $JOE DeFi Platform

07/03/2018: Biggest Stories in the Cryptosphere

05/02/2018: Biggest Stories in the Cryptosphere

01/06/2018: Biggest Stories in the Cryptosphere

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps