> ## Documentation Index
> Fetch the complete documentation index at: https://docs.versori.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start React

> How to get an integration hub up and running in a React application in minutes.

This quickstart guuide uses our React SDK to embed a native integration hub into your application.

<Note>
  The React SDK is the quickest way to get started with Versori Embedded, however it also offers the least amount of
  control over the UI.
</Note>

<Warning>
  #### **Disclaimer**

  There are limitations in this approach at the time of writing, but we are working on improving this functionality
  in future releases:

  * There is no pagination support for the integration hub as of now
  * Dynamic Variables are not supported
</Warning>

Before you start, it's expected that you already have a React application. If not, we recommend using
[Vite](https://vitejs.dev/) to quickly scaffold a new project.

Next, install our SDK packages using your package manager of choice:

<CodeGroup>
  ```bash npm theme={null}
  npm install @versori/embed-react
  ```

  ```bash yarn theme={null}
  yarn add @versori/embed-react
  ```
</CodeGroup>

<Warning>
  Ensure that at least version `2.x.x`+ of the `@versori/embed-react` package is installed, as this is the version
  that supports the platform API.
</Warning>

Now you can render our `VersoriEmbeddedProvider` component in your application, and pass in some configuration:

```tsx theme={null}
import { VersoriEmbeddedProvider, VersoriEmbeddedRenderer } from '@versori/embed-react';
import { CredentialCreate } from '@versori/sdk/embedded';

export type ComponentProps = {
    // Your Organisation ID
    orgId: string;

    // A JWT token representing your user, with the "sub" claim set to the desired End User's `externalId`. This JWT
    // is issued by a Signing Key from your own API and should authenticate your user in the same way any other
    // endpoints are authenticated)
    token: string;
};

export function Component({ orgId, token }: ComponentProps) {
    return (
        <VersoriEmbeddedProvider
            options={{
                orgId,
                endUserAuth: {
                    type: 'jwt',
                    token,
                },
            }}
        >
            <VersoriEmbeddedRenderer />
        </VersoriEmbeddedProvider>
    );
}
```

The `token` in the above example is a JWT with the subject claim set to the `externalId` of the End User. The
`VersoriEmbeddedProvider` then knows which environments the End User is activated on, and will display the relevant
integrations in the UI. You can see the [Security](/v2/embedded/security) section for more information on how to
generate this token.

This example is the most minimal setup required to get started. The `VersoriEmbeddedProvider` component configures an
`EmbedClient` instance and exposes it over a React context. The `VersoriEmbeddedRenderer` component is a pre-built
component which renders the integration hub UI in your application, handling displaying the correct UI elements based on
whether the End User has the integrations activated.

Given the above, the `VersoriEmbeddedRenderer` is optional, and you can build your own UI components consuming the
`EmbedClient` context directly if this suits your application better.

For more information on using the SDK, the source code is available in the [versori/versori-js-sdk][sdk-repo]
repository.

[sdk-repo]: https://github.com/versori/versori-js-sdk

This repository also contains an example React application with the SDK along with an example client website that uses
Cookies to store the JWT token so that it is persisted across page reloads and redirects to the Embedded Integration
Hub.