Implementation (Custom UI)
Last updated
Was this helpful?
Last updated
Was this helpful?
First, create a button for each data source that a user might want to connect. (e.g. a "Connect to Fitbit" button). You may take inspiration from the Terra Widget when creating your own UI.
You may use the endpoint to fetch metadata for each source available through Terra when creating your UI. This enables you to dynamically retrieve the sources you’ve (using the enabled
boolean parameter in the response), along with their associated metadata, such as available data types, display names, and logos.
From your backend, call the to generate an authentication link
Use the parameter resource
to pass a source name (e.g. "oura"
, "withings"
..)
The endpoint will generate an authentication url in the response. Retrieve it by parsing "auth_url"
.
Pass the retrieved "auth_url"
to your client side, and open it either in:
an in-app browser, if using a mobile app,
or a new tab, if using a web app
Do not call the API from your frontend, as this will lead to a CORS error.
Do not use WebView or iFrame for the authentication flow. Using them poses security risks due to the invisible URL bar, meaning that the user cannot know the domain onto which they are entering their username & password. Providers may completely block authentication leading to an error during the flow. Instead, use a new tab or an in-app browser to open the URL returned by the /auth
endpoints.
See details in the
This will simplify reconciling the terra with your end user.
This will take the user straight to the login screen so they can connect it.
The permissions list can be
Do not expose your API credentials. Instead, always call the endpoints from your backend.