Frontend SDK
Frontend
The frontend SDK lets users authorize integrations in your frontend. It is available on NPM as @nangohq/frontend
.
Initiating Nango
Nango Cloud
Localhost
Self-hosted
Get your Public Key
from the Project Settings page.
import Nango from '@nangohq/frontend';
let nango = new Nango({ publicKey: '<PUBLIC-KEY>' });
Collecting & storing end-user credentials
You store end-user credentials with the nango.auth
method.
OAuth
API Key
Basic Auth
For OAuth, the nango.auth()
method will trigger the OAuth flow in a popup, to let the user log in to their external account.
nango
.auth('<INTEGRATION-ID>', '<CONNECTION-ID>')
.then((result) => {
// result is an object with:
// {
// providerConfigKey: '<INTEGRATION-ID>',
// 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)
// }
// }
});
OAuth flows requiring extra configuration
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>' }
});