# Client Configuration

## Quadrata Component Props

The `Quadrata` component accepts the following props:

* **`sdkConfig`**: <mark style="color:red;">(</mark> <mark style="color:red;"></mark>*<mark style="color:red;">Required</mark>* <mark style="color:red;"></mark><mark style="color:red;">)</mark> The [SDK Configuration](/integration/how-to-integrate/quadrata-sdk/advanced/sdk-configuration.md) object.
* **`accessToken`**: <mark style="color:red;">(</mark> <mark style="color:red;"></mark>*<mark style="color:red;">Required</mark>* <mark style="color:red;"></mark><mark style="color:red;">)</mark> The access token obtained from the [Quadrata API Login](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/2.-api-authentication.md) endpoint. This is a JWT token that grants access to most API calls.
* **`clientConfig`**: ( *Optional* ) The client configuration is an optional set of configuration parameters that are shared by both [`KYB`](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) and [`KYC`](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md) onboarding applications. While you can specify the configuration only once, you are also able to override the configuration for each onboarding application. The client configuration parameters are mapped from both, [`KYB`](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) and [`KYC`](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md) configuration libraries at `@quadrata/kyb-react` and `@quadrata/client-react` respectively.
* **`sharedProps`**: ( *Optional* ) The shared props object is an optional set of props that are shared by both [`KYB`](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) and [`KYC`](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md). While you can specify the shared props only once, you are also able to override the shared props for each onboarding application. The shared props are mapped from both [`KYB`](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) and [`KYC`](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md) shared libraries at `@quadrata/kyb-react` and `@quadrata/client-react` respectively. If any event handlers are passed into both `sharedProps` and `kybProps` or `kycProps`, both will be called, but shared props handlers will be called last.
* **`kycProps`**: ( *Optional* ) Specifying [KYC](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md) props will tell the `Quadrata` component to render the [KYC onboarding application](/integration/how-to-integrate/onboard-users/individual-passport-onboarding.md). The [KYC](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md) props are mapped from the [`KYC`](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md) library at `@quadrata/client-react`.
* **`kybProps`**: ( *Optional* ) Specifying [KYB](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) props will tell the `Quadrata` component to render the [KYB onboarding application](/integration/how-to-integrate/onboard-users/business-passport-onboarding.md). The [KYB](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) props are mapped from the [`KYB`](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md) library at `@quadrata/kyb-react`.
* **`helperComponent`**: <mark style="color:red;">(</mark> <mark style="color:red;"></mark>*<mark style="color:red;">Required</mark>* <mark style="color:red;"></mark><mark style="color:red;">)</mark> The [helper component](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-helper-component.md) is required as either a child component or as a prop. Its purpose is to provide a way to interact with the Quadrata SDK from within your application. The props passed to your helper will let you know the state of an application and allow you to launch the application from a button click or other. The helper component is mapped from the component `Helper` type at `@quadrata/sdk/types/components/helper`. There are different helper components for both `KYB` and `KYC` onboarding applications which contain different props.

### Enabling the All In One Component

The [All In One Component](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/all-in-one.md) is enabled when you specify a combination of properties in the Quadrata Component.

You can enable the All In One Component in one of the following ways:

* Specify `sharedProps` and either `kybProps` or `kycProps`
* Specify both `kybProps` and `kycProps`

## Example

```tsx
import * as QuadrataTypes from '@quadrata/sdk/types';
import { withWagmiConnect, Quadrata } from '@quadrata/sdk/client';

const quadrataSdkConfig: QuadrataTypes.QuadrataSdkConfiguration = {
    environment: QuadrataTypes.QuadrataEnvironment.SANDBOX
};

// busines onboarding props
const kybProps = {
    // ...
};

// individual onboarding props
const kycProps = {
    attributes: [
        QuadrataTypes.QuadrataAttribute.DID,
        QuadrataTypes.QuadrataAttribute.COUNTRY,
        QuadrataTypes.QuadrataAttribute.AML
    ],
};

export default function AllInOneComponent(props: { accessToken: string }) {
    const quadrataProps = withWagmiConnect({
        accessToken: props.accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        sharedProps: {
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            }
        },
        kybProps: kybProps,
        kycProps: kycProps,
    });
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Component.Helper) => {
                if (!helper.isWalletConnected) {
                    return <p>Wallet is not connected</p>;
                }
                if (helper.isApplicationComplete) {
                    return <p>Application is Complete</p>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}
```


---

# 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/quadrata-sdk/advanced/client-libraries/client-configuration.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.