# Build your custom data source connection screen

To create a custom UI for data source connections, bypass the default Connection Widget for greater control. This method is ideal if you wish to pre-select data sources or seamlessly integrate connections into existing workflows. The process: display your data sources list, user clicks a source, you generate a direct connection URL, redirect them to authenticate their account (e.g., Fitbit or Strava), and they return to your app. 

## Implementation

### Step 1: Get the Connection Session Token

To generate a session for your end user, call the connection widget endpoint at [`widget/v6/connection`](/connect-data-sources.md). The response URL will include a `connectionSessionToken` parameter.

```json
{
    "type": "enduser.widget.connection",
    "data": {
        "url": "https://connect.thryve.de/?connectionSessionToken=1060285265X4247109939067552841&platform=web&lang=en"
    }
}
```

Use the `connectionSessionToken` (in our example `1060285265X4247109939067552841` ) from the URL to generate direct connection URLs to a Thryve web data source, bypassing the connection widget.

### Step 2: Construct Direct Connection URLs

To create URLs for connection and disconnection using the `connectionSessionToken`, follow these guidelines:

**For connecting a data source:**

```
https://service2.und-gesund.de/dataSourceDirectConnection.html?token={{connectionSessionToken}}&dataSource={{dataSourceId}}&redirect_uri={{redirectURL}}
```

**For disconnecting a data source:**

```
https://service2.und-gesund.de/dataSourceDirectRevoke.html?token={{connectionSessionToken}}&dataSource={{dataSourceId}}&direct=true&redirect_uri={{redirectURL}}
```

Set the extracted `connectionSessionToken` in the token parameter. Also, specify the data source you want to connect/disconnect using the id of the data source. (refer [this table](https://docs.thryve.health/thryve-data-sources/overview) for all data source IDs).

#### Set a redirection back to your application

Specify the optional `redirect_uri` parameter to direct users to a desired location in your application after they complete the connection or disconnection of a data source. This parameter helps ensure a smooth transition after users leave your application for authorization.

{% hint style="warning" %}
For security reasons, Thryve stores and validates redirect URLs on the backend. Please notify customer operations about the redirect URLs you plan to use so they can be whitelisted.
{% endhint %}

### Step 3: Open the connection/disconnection URL

To open the constructed URL, follow these guidelines:

* **With `redirect_uri` parameter:** Open the URL in the same window. The user will be directed to the data source authorization process and then returned to your application in the same window.
* **Without `redirect_uri` parameter:** Open the URL in a new tab. The user will see the default Thryve result page and can manually close the tab.

{% hint style="info" %}
For disconnections you do not need to actually make the user open the URL. Simply create a GET request using the constructed URL and the disconnection will be initiated in the background.
{% endhint %}

### Step 4: Handle the Result

After completing the OAuth flow, the Thryve server will automatically redirect to `dataSourceDirectConnectionResult.html`.

The URL parameter `connected` indicates the outcome:

* For connection requests:
  * `connected=true`: Success
  * `connected=false`: Failure or cancellation
* For revoke requests:
  * `connected=false`: Successful disconnection
  * `connected=true`: Failed disconnection<br>

Direct connection result example URL:

```
https://service2.und-gesund.de/dataSourceDirectConnectionResult.html?token=1895281956X7991751761968409822&dataSource=1&connected=true
```

If a redirect URL is included, the connection result will also be forwarded to your specified URL.


---

# 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.thryve.health/connect-data-sources/build-your-custom-data-source-connection-screen.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.