authorize-an-api-from-your-app-with-custom-ui.mdx

title	sidebarTitle	description
Authorize an API from you app (custom UI)	Authorize an API from you app (custom UI)	Step-by-step guide on getting user authorization with your own UI.

Pre-requisites: - complete the [_Configure an integration_ guide](/guides/getting-started/configure-an-integration) - generate a [Connect session token](/guides/getting-started/authorize-an-api-from-your-app#generate-a-session-token-backend)

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.
    });

For API keys, the nango.auth() method is used to store the end-user's API key (that you have previously collected from them).

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

For Basic Auth, the nango.auth() method is used to store the end-user's username & password (that you have previously collected from them).

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, follow the Save the connection ID section to finish implementation of the authorization flow.

**Questions, problems, feedback?** Please reach out in the [Slack community](https://nango.dev/slack).