# Onboarding Example

## SDK Configuration

Set up your configuration so you can use it across API calls and Client Components

```typescript
import { QuadrataSdkConfiguration, QuadrataEnvironment } from '@quadrata/sdk/types';

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

## Authentication

Use the API Service [`createAccessToken`](/integration/how-to-integrate/quadrata-sdk/advanced/api-libraries/api-service-libraries/create-access-token.md) to authenticate and get an `accessToken` to pass in to your Client Components.

```typescript
import { createAccessToken } from '@quadrata/sdk/api';

const { data: { accessToken } } = await createAccessToken(
    {
        apiKey: process.env.QUADRATA_API_KEY,
        options: {
            cache: 'no-cache'
        }
    },
    quadrataSdkConfig
);
```

{% hint style="info" %}
See [API Service Options](/integration/how-to-integrate/quadrata-sdk/advanced/api-libraries/api-service-options.md) for more information about API options.
{% endhint %}

## The Quadrata Component

{% hint style="info" %}
This example uses the [`withWagmiConnect`](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/with-wagmi-connect.md) props initializer to handle all wallet connection, message signing, and transaction signing for you.

See [With Wagmi Connect](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/with-wagmi-connect.md) for more information on initializing Wagmi.
{% endhint %}

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

export default function OnboardingComponent({ accessToken }) {
    const quadrataProps = withWagmiConnect({
        accessToken: accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        sharedProps: {
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            },
        },
        kycProps: {
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package#less-than-quadclient-greater-than-props
            attributes: [
                QuadrataTypes.QuadrataAttribute.DID,
                QuadrataTypes.QuadrataAttribute.COUNTRY,
                QuadrataTypes.QuadrataAttribute.AML
            ],
            privacyScopes: [
                QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
                QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
                QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
            ],
        },
        kybProps: {
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package
        }
    });
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Component.Helper) => {
                if (helper.isApplicationComplete) {
                    return <p>Application is Complete</p>;
                }
                if (helper.isPassportInReview) {
                    return <p>Your application is in review.</p>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}
```

{% hint style="info" %}
See [Client Examples](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples.md) for more information about KYC, KYB and All In One integration.
{% endhint %}


---

# 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/onboarding-example.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.