# Frontend SDK

> **Scope**: How to install, configure, and embed the component. [API Reference](/self-pass/qrcode-sdk/qrcode-sdk-api-reference.md) (all props, types) lives on a separate page.

## Installation

{% tabs %}
{% tab title="npm" %}
npm i @selfxyz/qrcode
{% endtab %}

{% tab title="yarn " %}
yarn add @selfxyz/qrcode
{% endtab %}

{% tab title="pnpm " %}
pnpm i @selfxyz/qrcode
{% endtab %}
{% endtabs %}

## Usage (Desktop)

The `SelfQRCode` component is responsible for storing information about your app. This includes data about mock/real document verification mode, the userId you want to store, and the config that should be checked for a given proof.

This involves 2 steps:

1. Create a `SelfApp` from the `SelfAppBuilder` that takes in `Partial<SelfApp>`.
2. Pass the `SelfApp` to the QRCode component along with `onSuccess` and `onError` functions.

{% code fullWidth="false" %}

```tsx
import { useEffect, useState } from 'react'
import { countries, SelfQRcodeWrapper } from '@selfxyz/qrcode'
import { SelfAppBuilder } from '@selfxyz/qrcode'

export default function Verify() {
  const [selfApp, setSelfApp] = useState<any | null>(null)

  useEffect(() => {
    const userId = '0xYourUserEthAddress' // or a UUID depending on your setup
    
    const app = new SelfAppBuilder({
      version: 2,
      appName: process.env.NEXT_PUBLIC_SELF_APP_NAME || 'Self Docs',
      scope: process.env.NEXT_PUBLIC_SELF_SCOPE || 'self-docs',
      endpoint: `${process.env.NEXT_PUBLIC_SELF_ENDPOINT}`,
      logoBase64: 'https://i.postimg.cc/mrmVf9hm/self.png',
      userId,
      endpointType: 'staging_celo',
      userIdType: 'hex', // 'hex' for EVM address or 'uuid' for uuidv4
      userDefinedData: 'Hello from the Docs!!',
      disclosures: {
        // What you want to verify from the user's identity
        minimumAge: 18,
        excludedCountries: [countries.CUBA, countries.IRAN, countries.NORTH_KOREA, countries.RUSSIA],

        // What you want users to
        nationality: true,
        gender: true,
      },
    }).build()

    setSelfApp(app)
  }, [])

  const handleSuccessfulVerification = () => {
    // Persist the attestation / session result to your backend, then gate content
    console.log('Verified!')
  }

  return (
    <div>
      {selfApp ? (
        <SelfQRcodeWrapper
          selfApp={selfApp}
          onSuccess={handleSuccessfulVerification}
          onError={() => {
            console.error('Error: Failed to verify identity')
          }}
        />
      ) : (
        <div>
          <p>Loading QR Code...</p>
        </div>
      )}
    </div>
  )
}
```

{% endcode %}

{% hint style="warning" %}
The claims you want to verify MUST exactly match the ones you set in your backend configuration.
{% endhint %}

{% hint style="danger" %}
If you're using a contract to verify proofs, ensure `endpoint` points to the correct deployed contract address for the selected `endpointType` network.
{% endhint %}

## Usage (Mobile)

If you're developing an app then it's not easy to scan a QR Code. Instead, what you would do is to create a deeplink to the Self app and pass in a `deeplinkCallback` url that the Self app can navigate to once the proof is verified. Here's what you'll need to add:

```tsx
import { useEffect, useState } from 'react'
import { countries, SelfQRcodeWrapper } from '@selfxyz/qrcode'
import { SelfAppBuilder } from '@selfxyz/qrcode'
import { getUniversalLink } from '@selfxyz/core'

export default function Verify() {
  const [selfApp, setSelfApp] = useState<any | null>(null);
  const [universalLink, setUniversalLink] = useState("");

  useEffect(() => {
    const userId = '0xYourUserEthAddress' // or a UUID depending on your setup
    
    const app = new SelfAppBuilder({
      ..., //same as previous example 
      deeplinkCallback: "https://your-callback-url.com", 
    }).build()

    setSelfApp(app); 
    setUniversalLink(getUniversalLink(app));
  }, []);

  const openSelfApp = () => {
    if (!universalLink) return;
    window.open(universalLink, "_blank");
  }

  return (
    <div>
      {selfApp ? (
         <button
            type="button"
            onClick={openSelfApp}
            disabled={!universalLink}
          >
          Open Self App
        </button>
      ) : (
        <div>
          <p>Loading QR Code...</p>
        </div>
      )}
    </div>
  )
}
```


---

# 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.self.xyz/self-pass/qrcode-sdk.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.