> For the complete documentation index, see [llms.txt](https://docs.quadrata.com/integration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md).

# 4. QuadClient Package

## `<QuadClient /> Component`&#x20;

<pre class="language-tsx"><code class="lang-tsx">import { QuadClient } from '@quadrata/client-react';

const MyComponent = () => {
<strong>  &#x3C;QuadClient
</strong><strong>      accessToken={accessToken}                 // JWT token obtained by calling /v1/api/login
</strong>      account={account}                         // wallet address of the user to onboard
      attributes={quadAttributes}               // list of attributes required by the protocol
      bypassMint={bypassMint}                   // Optional boolean flag indicating whether to bypass the mint screen. If this is set to true, onMintClick is optional 
      chainId={chainId}                         // Blockchain chainId to onboard to (see: https://chainlist.org/)
      config={quadConfig}                       // Custom Configuration (i.e endpoint, protocol name)
      darkMode={false}
      mintComplete={mintComplete}               // Boolean flag indicating when the "passport minting" is completed
      mintError={mintError}                     // Optional string that can be passed to display mint error message
      offeringId={offeringId}                   // Optional string or number that can be passed to track accreditation status for a company offering
      onApplicationEnd={handleOnApplicationEnd} // Optional callback function: triggered when the application reaches an end state (error or completion)
      onConsentGranted={handleConsentGranted}   // Optional callback function: triggered with privacy consent is granted
      onHide={handleHide}                       // Optional callback function: triggered when the modal is closed
      onMintClick={handleMintClick}             // Optional callback function: triggered when a user clicks "Claim Passport"
      onMintParamsReady={handleMintParamsReady} // Optional callback function: triggered when the mint parameters are signed and ready to mint
      onPageChange={handlePageChange}           // Optional callback function: triggers when a page changes
      onSign={handleSign}                       // Callback function: triggered when a user attemps to Sign Wallet or Allow Consent
      privacyScopes={privacyScopes}             // Optional list of privacy scopes to request for consent
      signature={signature}                     // store the result of the callback `onSign`
      signatureConsent={signatureConsent}       // store the result of the callback `onSign` when consent is requested
      transactionHash={data?.hash}              // The mint blockchain transaction hash
  >
      Loading...
  &#x3C;/QuadClient>
}
</code></pre>

## `<QuadClient />` Props

<table data-full-width="true"><thead><tr><th width="220">Prop</th><th width="462.33652928735216">Description</th><th>Type</th></tr></thead><tbody><tr><td><code>accessToken</code> (required)</td><td>JWT access token. <br><br>See "<a href="/pages/wVdbzsJHbSMfRiH9mxbv">API Authentication</a>" page</td><td><code>string</code></td></tr><tr><td><p><code>account</code></p><p>(required)</p></td><td>The user's wallet address.</td><td><code>string</code></td></tr><tr><td><code>attributes</code> (required)</td><td>An array of Quadrata attributes required by the protocol. <br><br>See "<a href="/pages/PYIJ5xwjFCH5fAxlDbEB">Discover User Attributes</a>" page.</td><td><code>QuadAttribute[]</code></td></tr><tr><td>bypassMint (optional)</td><td>Indicates whether to show the mint screen to the onboarding user. Set to True if user is not required to mint passport onchain. Defaults to False.</td><td><code>boolean</code></td></tr><tr><td><p><code>chainId</code></p><p>(required)</p></td><td>The decimal chain ID number of the currently connected network. In case of unsupported chain IDs the user will be navigated to the "Configuration Error" screen. <br><br><em>Tip: Supported chain IDs can be found in the <code>QuadSupportedChainId</code> enum which can be imported from the <code>@quadrata/core-react</code> NPM package.</em></td><td><code>number</code></td></tr><tr><td><code>children</code> (optional)</td><td>Overrides the default loader component inside of the form markup. This component will be shown in all loading states during the flow. if not defined, a "Loading..." text will be shown instead.</td><td><code>React.ReactNode</code></td></tr><tr><td><code>className</code> (optional)</td><td>The class name to be appended to the component's root DOM element.</td><td><code>string</code></td></tr><tr><td><p><code>config</code></p><p>(required)</p></td><td>The configuration object.<br><br><em>See the "</em><a href="#configuration-object"><em>Configuration Section</em></a><em>" below.</em></td><td><code>QuadClientConfig</code></td></tr><tr><td><code>darkMode</code> (optional)</td><td><p>Toggle between dark and light mode.</p><p></p><p>Default: <em>false</em></p></td><td><code>boolean</code></td></tr><tr><td><p><code>error</code></p><p>(optional)</p></td><td>Generic error text, when defined, an error message will appear at the bottom of the UI.</td><td><code>string | undefined</code></td></tr><tr><td><code>mintComplete</code> (required)</td><td>Upon a successful mint, pass a <code>true</code> value to this prop to display the final page.</td><td><code>boolean</code></td></tr><tr><td><code>mintError</code> (optional)</td><td>String that can be passed to display a mint error message. If provided the client will be navigated to the <code>MINT_STATUS</code> page and display the error message.</td><td><code>string | undefined</code></td></tr><tr><td><code>offeringId</code> (optional)</td><td>String or Number that can be passed to track Accreditation status for a company offering. If provided, the client will be navigated to an Accreditation Re-Attestation screen (when applicable) for re-attestation of the passport's Accreditation status.</td><td><code>string | number | undefined</code></td></tr><tr><td><code>onApplicationEnd</code> (optional)</td><td>A callback function: triggered when the application reaches an end state - error or completion.<br><br>Event object includes status and error properties for additional information.</td><td><p><code>QuadrataOnApplicationEndCallback</code><br></p><p>Statuses:<br>- <code>READY</code><br>- <code>IN_REVIEW</code><br>- <code>MINTED</code></p></td></tr><tr><td><code>onConsentGranted</code> (optional)</td><td><p>A callback function: triggered when the applicant consents to privacy data sharing.</p><p></p><p>tip: Import the PrivacyConsentScopeParamKey from the @quadrata/client-react library</p></td><td><code>QuadClientOnConsentGrantedCallback</code><br><br><code>(scopes: PrivacyConsentScopeParamKey[]) => void;</code></td></tr><tr><td><code>onHide</code> (optional)</td><td>A callback function: triggered when the modal is closed.</td><td></td></tr><tr><td><code>onMintClick</code> (optional)</td><td><p></p><p>A callback function. triggered when a user clicks <strong>Claim</strong> <strong>Passport</strong>. the event object passed to this function will contain all the data required to mint a passport. <br><code>event.params</code> <code>event.signature</code> and <code>event.signatureIssuer</code> should be passed to the <code>QuadPassport.setAttributesBulk()</code> function in the correct order, and include the <code>event.params.fee</code> as the value passed to the overrides of the <code>setAttributes</code> function. see the example below.</p></td><td><code>QuadClientMintClickEventHandler</code></td></tr><tr><td><code>onMintParamsReady</code><br>(optional)</td><td>A callback function: triggered when the mint parameters are signed and ready. <br><br><em>tip: useful in case the UI needs to prepare the transaction before initiating it, see example page.</em></td><td><code>QuadClientMintParamsReadyCallback</code></td></tr><tr><td><code>onPageChange</code> (optional)</td><td><p>A callback function: triggered when a page is changed. Passes a Page type string<em>.</em></p><p></p><p><em>tip: Import the <code>Page</code> type from the <code>@quadrata/client-react</code> library</em></p></td><td><code>(page: Page) => void</code></td></tr><tr><td><p><code>onSign</code></p><p>(required)</p></td><td>A callback function. triggered when a user clicks <strong>Sign Wallet</strong> or <strong>Allow</strong>. It passes a message for the user to sign in the <em>Onboarding</em> and/or <em>User Consent</em> flow.</td><td><code>(message: string, isConsent: boolean) => void</code></td></tr><tr><td><code>privacyScopes</code><br><code>(optional)</code></td><td>An array of Quadrata Privacy Parameter Names that can be requested from the users' privacy data.<br><br>See "<a href="/pages/EM1TJO5NanevkaNPvRmo">List of Privacy Data</a>" page.</td><td><code>PrivacyConsentScopeParam[] | undefined</code></td></tr><tr><td><code>signature</code> (required)</td><td>The user's signature of the "<em>Welcome to Quadrata! By signing, you agree to the Terms of Service.</em>" message passed by the <code>onSign</code> prop. </td><td><code>string | undefined</code></td></tr><tr><td><code>signatureConsent</code><br><code>(optional)</code></td><td>The user's signature when granting access to privacy data.</td><td><code>string | undefined</code></td></tr><tr><td><code>transactionHash</code> (required)</td><td>The mint transaction hash. If the value is not undefined,  it will trigger navigation to the "Mint in progress" page and will generate the Block explorer transaction link URL.</td><td><code>string | undefined</code></td></tr></tbody></table>

## Configuration Object

Pass a configuration object to the `config` prop:

```typescript
import { QuadClient, QuadClientConfig, QuadClientEnvironment } from '@quadrata/client-react';

// Outside of your react component
const quadConfig: QuadClientConfig = {
    protocolName: 'ACME, Inc.',
    environment: QuadClientEnvironment.PRODUCTION, // or QuadClientEnvironment.SANDBOX for testing environment
};

// Inside your react component
<QuadClient config={quadConfig} />
```

{% hint style="warning" %}
Always define your configuration object outside of your React components to prevent unexpected behavior
{% endhint %}

<table data-full-width="true"><thead><tr><th>Property</th><th width="525.3333333333333">Description</th><th>Type</th></tr></thead><tbody><tr><td><p><code>_debug</code></p><p>(optional)</p></td><td>When true, debug information will be printed in the console. <strong>Never use in production.</strong></td><td><code>boolean</code></td></tr><tr><td><code>_unsafeForcePage</code> (optional)</td><td>Forcing a specific page to be displayed. Useful when styling and testing different pages. <mark style="color:orange;">Set the </mark><em><mark style="color:orange;"><strong>_debug</strong></mark></em><mark style="color:orange;"> prop to <code>true</code> when using.</mark> <strong>Never use in production.</strong> </td><td><code>Page</code></td></tr><tr><td><code>contactEmail</code> (optional)</td><td>Contact email address<br><br><em>Default: support@quadrata.com</em></td><td><code>string</code></td></tr><tr><td><code>countriesUnavailable</code><br>(optional)</td><td>An array of ISO country codes where the onboarding process is made unavailable. </td><td><code>string[]</code><br><a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">ISO</a> country codes<br>example: <code>['US', 'CA']</code></td></tr><tr><td></td><td></td><td></td></tr><tr><td><p><code>discordUrl</code></p><p>(optional)</p></td><td><p>Discord link URL<br><br><em>Default:</em></p><p><em>Quadrata Discord Server</em></p></td><td><code>string</code></td></tr><tr><td><code>environment</code><br>(optional)</td><td><p>Possible values:</p><ul><li>sandbox</li><li>production<br></li></ul><p>Default: <em><code>sandbox</code></em><br></p><p><mark style="color:orange;">Never set to <code>sandbox</code> in production.</mark></p><p><br><em>tip: The sandbox environment will not perform real verifications.</em></p></td><td><code>QuadClientEnvironment</code></td></tr><tr><td><code>protocolName</code> (required)</td><td>Your protocol name<br><br><em>Example: "Acme, Inc."</em></td><td><code>string</code></td></tr><tr><td><code>showSocialButtons</code> (optional)</td><td><p>Show or hide the social media share buttons on the "mint complete" page.</p><p></p><p><em>Default: <code>true</code></em></p></td><td><code>boolean</code></td></tr></tbody></table>

{% hint style="success" %}
NOTE: Contact Quadrata via [email](mailto:contact@quadrata.com) to request API keys.
{% endhint %}

## Get User's Permissions&#x20;