​

Authorize users from your app using headless frontend

​

Integrate the frontend SDK

Once you have tested that the authorization flow works for your own external account, you can trigger authorization flows for your customers from your app with the Nango SDK.

Get your Public Key from the Environment Settings tab.

In your frontend, initiate Nango (reference):

import Nango from '@nangohq/frontend';

let nango = new Nango({ publicKey: '<PUBLIC-KEY>' });

Initiate the authorization flow (reference):

• OAuth
• API Key
• Basic Auth

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

​

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

For these cases, 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), API (reference), and the Nango UI.

​

Troubleshoot authorization errors

If an authorization request fails, you can analyze the relevant log in the Logs tab of the Nango UI.

​

Use a custom callback URL

You can personalize Nango’s callback URL (e.g. use your domain). If you are using Nango Cloud, follow these steps:

1. Add a new endpoint in your app, e.g. https://EXAMPLE.com/oauth-callback. All requests to this endpoint should redirect to https://api.nango.dev/oauth/callback and pass along all original parameters. The easiest way to do this is with a 308 redirect.
2. Change the registered OAuth callback URL with all API providers. Otherwise, they will refuse new flows!
3. When ready, change your Nango callback URL in the Environment Settings tab.

If you are self-hosting Nango, follow the instructions here to change your callback URL.