# 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`](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/api-libraries/api-service-libraries/create-access-token) 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](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/api-libraries/api-service-options) for more information about API options.
{% endhint %}

## The Quadrata Component

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

See [With Wagmi Connect](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/with-wagmi-connect) 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](https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples) for more information about KYC, KYB and All In One integration.
{% endhint %}