# 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](https://t.me/openpassport).

### Implement `OpenPassportQRcode` in your front-end

#### Install dependencies

```bash
npm install @openpassport/core @openpassport/qrcode
```

#### Instantiate OpenPassportVerifier

```typescript
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.

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

See all methods on [OpenPassportVerifier](/docs/technical-docs/sdk-class/openpassportverifier.md) 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();`

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

#### Instantiate OpenPassportQRcode

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

```typescript
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`:

<table><thead><tr><th width="208">Parameter</th><th width="194">Type</th><th>Description</th></tr></thead><tbody><tr><td>appName</td><td>string</td><td>Name of your app, part that will be displayed in the mobile app.</td></tr><tr><td>userId</td><td>string</td><td>userID is passed as a parameter of the proof in order to prevent users from stealing proof between each other.</td></tr><tr><td>userIdType</td><td>'hex' | 'uuid' | 'string'</td><td>Type of userId.</td></tr><tr><td>openPassportVerifier</td><td>OpenPassportVerifier</td><td>Instance of OpenPassportVerifier.</td></tr><tr><td>onSuccess</td><td>function</td><td>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.</td></tr></tbody></table>

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

#### Web2 apps

**Install dependencies:**

```bash
npm install @openpassport/core
```

**Instantiate `OpenPassportVerifier`**

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

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

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

**Verify the proof:**

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

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

**Nullify the proof:**

```typescript
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:

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

**Web3 dApps**

Install dependencies:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openpassport.app/docs/use-openpassport/quickstart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.