Skip to main content

Unified Integrations



You often need to integrate third party apps in your app. For example, allowing users to link their Notion, Google Drive accounts to fetch their documents, or connect to Airtable to push a new entry in a database from your app.

This module integrates Nango.dev - a free and open-source library that supports 250 integrations already built-in.

Activation​

Sign up to Nango.dev​

Go to Nango.dev and create an account.

Create your first integration in Nango​

Register your app to on the integration's developer portal​

Your callback URL is: https://api.nango.dev/oauth/callback

Add the integration's oAuth client id/keys to Nango​

Add the Nango API keys to .env of your app​

SERVER_NANGO_SECRET_KEY=
NEXT_PUBLIC_NANGO_KEY=

Usage​

You can link a user ID or an organisation ID to the application. You don't need to worry about oAuth or keeping/refreshing the token, Nango does that for you.

import { Api } from '@/core/trpc'
import { useNango } from '@/core/hooks/nango'

const { nango } = useNango()

const authenticate = async () => {
  nango
    .auth('notion', user?.id) // replace with the relevant integration
    .then(async result => {
      enqueueSnackbar('Integration linked successfully.', {
        variant: 'success',
      })
    })
    .catch(error => {
      enqueueSnackbar('Error linking integration ' + error, {
        variant: 'error',
      })
    })
}

Fetch or push data from the integration​

Then to fetch or push data to the integrated app, call the Nango proxy with the target endpoint, the integration and the connectionId (which is the user or organisation's associated id).

import { Api } from '@/core/trpc'

const { mutateAsync: nangoProxy } = Api.nango.proxy.useMutation()

const fetchData = async () => {
  const config = {
    method: 'GET',
    endpoint: 'https://api.notion.com/v1/search',
    providerConfigKey: 'notion',
    connectionId: user?.id,
  } // replace with relevant config

  try {
    const { data } = await nangoProxy(config)
    enqueueSnackbar('Integration added successfully', { variant: 'success' })
    refetch()
  } catch (error) {
    enqueueSnackbar('Failed to add integration', { variant: 'error' })
  }
}