# 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="2.-api-authentication">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="broken-reference">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="../../request-privacy-data/list-of-privacy-data">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;


---

# 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.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.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.