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. The response URL will include a connectionSessionToken parameter.

{
    "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 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.

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.

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.

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.

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

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.