In this tutorial, we’ll use the Paragon SDK to build an integrations catalog into your app.
getParagonUserToken
with your own app’s Paragon User Token generation, which should be performed on your server only.useParagonAuth.ts
. Copy the following contents to this file:
PARAGON_PROJECT_ID
with your Project ID in Paragon. You can find your Project ID in the Overview tab of any Integration within the dashboard.paragon
global is loaded as a stateful value, so when the SDK loads, the component will update accordingly:
.getIntegrationMetadata
to get all active integrations in your project, along with their names and icon URLs.
For every integration, we display their icons and names. We also set up an event handler to call .connect
with the integration.type
when the element is clicked. This will display the Connect Portal over your app, prompting the user to connect an account to the specified integration.
Result:
.getUser
, which returns the current state of the authenticated user from the SDK, including their connected integrations and enabled workflows.
.subscribe
, which allows us to listen for global SDK events. We will listen for the events "onIntegrationInstall"
and "onIntegrationUninstall"
to detect when a user has connected or disconnected an account.
useParagonGlobal
(for mounting the Paragon SDK) and useParagonAuth
(for authenticating a user)..getIntegrationMetadata
to get all available integrations in the project with name and icon information..getUser
to get the user’s account status..subscribe
to listen for user account status changes to sync updates to your catalog UI.