Pre-requisites:

​
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):
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>')
    .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.
Questions, problems, feedback? Please reach out in the Slack community.