Trigger authorization flows in your frontend with this SDK. It is available on NPM as @nangohq/frontend.

​

Instantiate the frontend SDK

import Nango from '@nangohq/frontend';

const nango = new Nango({ connectSessionToken: '<CONNECTION-SESSION-TOKEN>' });

Parameters

​

Connect using Nango Connect UI

Nango provides a UI component that guides your app’s users through automatically and securely setting up an integration. This UI is hosted on Nango’s servers and requires minimal setup on your end to get started quickly. This is the recommended way to use Nango in your frontend.

const connectUI = nango.openConnectUI({ sessionToken: 'SESSION_TOKEN' });

Parameters

Response

​

Connect using the headless client

You store end-user credentials with the nango.auth method. It creates a connection in Nango.

const result = await nango.auth('<INTEGRATION-ID>').catch((error) => {
...
});

const result = await nango.auth('<INTEGRATION-ID>').catch((error) => {
...
});

const result = await nango.auth('<INTEGRATION-ID>', {
    credentials: { apiKey: '<END-USER-API-KEY>' }
}).catch((error) => {
    ...
});

const result = nango.auth('<INTEGRATION-ID>', {
    credentials: { username: '<END-USER-API-KEY>', password: '<END-USER-PASSWORD>' }
}).catch((error) => {
    ...
});

Parameters

Success response

Error response

​

Credentials Verification

For some integrations using API Key or Basic authentication methods, Nango automatically verifies the provided credentials by making a test request to the integration’s API. This verification ensures that the credentials are valid before creating the connection.

If the credentials are invalid, Nango will throw an error with the following structure:

{
    "error": {
        "code": "connection_test_failed",
        "message": "The given credentials were found to be invalid. Please check the credentials and try again."
    }
}

You can handle this error in your code to provide appropriate feedback to your end users:

import { AuthError } from '@nangohq/frontend';

try {
    const result = await nango.auth('<INTEGRATION-ID>', {
        credentials: { apiKey: '<END-USER-API-KEY>' }
    });
} catch (error) {
    if (error instanceof AuthError && error.type === 'connection_test_failed') {
        // Handle invalid credentials
        console.error('Invalid credentials provided');
    }
}