Quickstart

To implement OpenPassport in your app, you need to implement it in both your front-end and back-end. The front-end will generate a QR code containing all the information relative to your app and what you are requesting users to disclose. The back-end will verify proofs and manage nullifiers.

🚧 Deeplinking is WIP. If you want to implement OpenPassport in a mobile application, please contact us.

Implement OpenPassportQRcode in your front-end

Install dependencies

npm install @openpassport/core @openpassport/qrcode

Instantiate OpenPassportVerifier

import { OpenPassportVerifier } from '@openpassport/core';

const scope = "myExampleApp";
const openPassportVerifier: OpenPassportVerifier = new OpenPassportVerifier('prove_offchain', scope);

OpenPassportVerifier requires two arguments: 'scope' and 'mode'.

• scope is simply an identifier for your app, choose a simple one in standard ASCII.

• mode corresponds to the behavior of the circuit.

Two modes are available according to where you want to verify the proof:

Mode	Usecases
prove_offchain	web2 applications
prove_onchain	web3 dApps

Two more modes are available to enable full anonymity, cf. ...

Disclosing passport data

Call methods from openPassportVerifier to ask users to disclose specific passport data.

const openPassportVerifier: OpenPassportVerifier = new OpenPassportVerifier('prove_offchain', scope).setMinimumAge(18);

See all methods on OpenPassportVerifier documentation.

Test environment

If you want to debug your app with a mock passport generated inside the application, you have to call the method allowMockPassports();

const openPassportVerifier: OpenPassportVerifier = new OpenPassportVerifier('prove_offchain', scope).allowMockPassports();

Instantiate OpenPassportQRcode

OpenPassportQRcode is a React component that you can instantiate in your front-end:

import { OpenPassportQRcode } from '@openpassport/qrcode';

// [...]

const name = 'My Example App 🥳';
 
return (
<OpenPassportQRcode
appName={name}
userId={userId}
userIdType={'uuid'}
openPassportVerifier={openPassportVerifier}
onSuccess={(attestation) => {
// send the code to the backend server
}} 
/> 
);

Here are the different parameters of OpenPassportQRcode:

Parameter	Type	Description
appName	string	Name of your app, part that will be displayed in the mobile app.
userId	string	userID is passed as a parameter of the proof in order to prevent users from stealing proof between each other.
userIdType	'hex' | 'uuid' | 'string'	Type of userId.
openPassportVerifier	OpenPassportVerifier	Instance of OpenPassportVerifier.
onSuccess	function	Callback method fired after proof verification. This is the place where you want to send the proof to your backend for web2 apps or send tx to verifier contracts for dApps.

Verify the proof in your back-end (or smart-contracts)

Web2 apps

Install dependencies:

npm install @openpassport/core

Instantiate OpenPassportVerifier

Note: you have to use the same scope as in your front-end.

import { OpenPassportVerifier } from '@openpassport/core';

const scope = "myExampleApp";
const openPassportVerifier: OpenPassportVerifier = new OpenPassportVerifier('prove_offchain', scope);

Verify the proof:

import { OpenPassportVerifierReport } from '@openpassport/core';

const scope = "myExampleApp";
const validProof: boolean = (openPassportVerifier.verify(openPassportAttestation) as OpenPassportVerifierReport).valid;

Nullify the proof:

import { OpenPassportDynamicAttestation } from '@openpassport/core';

const dynamicAttestation = new OpenPassportDynamicAttestation(openPassportAttestation);
const nullifier = dynamicAttestation.getNullifier();

const validNullifier: boolean = verifyNullifierIsNotAlreadyRegistered(nullifier) // you have to manage nullifiers yourself

Once the proof and nullifier are verified, you can fire your custom functions:

if (validProof && validNullifier) {
const userId = dynamicAttestation.getUserId();
addUserToMyBirthdayWhitelist(userId); // fire your custom code implementation
}

Web3 dApps

Install dependencies: