Skip to main content

Nango Frontend SDK

The Nango frontend SDK is available on NPM with the package @nangohq/frontend.

Instantiating the frontend SDK​

Please refer to the quickstart for how to instantiate the frontend SDK with your Nango setup.

Triggering OAuth flows​

You trigger OAuth flows with nango.auth. This function returns a promise, which resolves if the OAuth flow was successful, and rejects if there was an error.

nango
    .auth('<CONFIG-KEY>', '<CONNECTION-ID>')
    .then((result) => {
        // result is an object with:
        // {
        //      providerConfigKey: '<CONFIG-KEY>',
        //      connectionId: '<CONNECTION-ID>
        // }
    })
    .catch((error) => {
        // Error is an object with:
        // {
        //    error: {
        //      type: 'authorization_cancelled', (or similar)
        //      message: 'Authorization fail: The user has closed the authorization modal before the process was complete.'  (or similar)
        //    }
        // }
    });

There is an optional third parameter for this function, but it is currently only used for the special case below.

Triggering OAuth flows with configurations​

Some API Providers require some 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

To set the subdomain pass in an additional configuration object to nango.auth():

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

// Or for Shopify
nango.auth('shopify', '<CONNECTION-ID>', { params: { subdomain: '<SHOPIFY-SUBDOMAIN>' } });