​

Integrate the frontend SDK

In your frontend, initiate Nango (reference):

import Nango from '@nangohq/frontend';

const nango = new Nango({ connectSessionToken: '<CONNECT-SESSION-TOKEN>' });

Initiate the authorization flow (reference):

nango
    .auth('<INTEGRATION-ID>')
    .then((result) => {
        // Show success UI.
    })
    .catch((error) => {
        // Show failure UI.
    });

nango
    .auth('<INTEGRATION-ID>')
    .then((result) => {
        // Show success UI.
    })
    .catch((error) => {
        // Show failure UI.
    });

nango
    .auth('<INTEGRATION-ID>', {
        credentials: {
            apiKey: '<END-USER-API-KEY>'
        }
    })
    .then((result) => {
        // Show success UI.
    })
    .catch((error) => {
        // Show failure UI.
    });

nango
    .auth('<INTEGRATION-ID>', {
        credentials: {
            username: '<END-USER-API-KEY>',
            password: '<END-USER-PASSWORD>'
        }
    })
    .then((result) => {
        // Show success UI.
    })
    .catch((error) => {
        // Show failure UI.
    });

​

Handle APIs requiring connection-specific configuration for authorization

Some APIs require connection-specific configuration (e.g. Zendesk, Shopify).

For example, Zendesk has the following authorization URL, where the subdomain is specific to a user’s Zendesk account:

https://<USER-SUBDOMAIN>.zendesk.com/oauth/authorizations/new

When using the Connect UI, this information is collected from the end user with an automatically-generated form.

But when using a custom UI, you must provide this configuration when calling nango.auth() (reference):

nango.auth('zendesk', {
    params: { subdomain: '<ZENDESK-SUBDOMAIN>' }
});

In some cases you might want to override the scopes provided by an integration at the connection level. For this case you can pass in the scopes to nango.auth:

nango.auth('zendesk', {
    params: { oauth_scopes_override: 'custom-connection-scope' }
});

This connection configuration is stored in the connection. You can retrieve it with the SDK (reference) and API (reference), or see it in connection details in the Nango UI.

​

Next

Once the authorization succeeds, save the connection ID.