> 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/quadrata-sdk/advanced/onboarding-example.md).

# 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 %}