Trigger authorization flows in your frontend with this SDK. It is available on NPM as @nangohq/frontend.
Instantiate the frontend SDK Parameters
Get your public key in the environment settings of the Nango UI. This is key is not sensitive.
Omitting the host points to Nango Cloud. For local development, use http://localhost:3003. Use your instance URL if self-hosting.
For self-hosted instances only to specify a customs path for the WebSocket connection.
Specify a specific width for the OAuth authorization modal.
Specify a specific height for the OAuth authorization modal.
Print additional console logs to debug authorization issues.
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.
Parameters
The unique token to identify your user. It is required but can be set asynchronously.
The base URL to load the UI, default: https://connect.nango.dev
The base URL to reach Nango API, default: https://api.nango.dev
A callback to listen to events sent by Nango Connect
Response
The class to manipulate Nango Connect
Connect using the headless client You store end-user credentials with the nango.auth method. It creates a connection in Nango.
For OAuth, this will open a modal to let the user log in to their external account.
Parameters
The integration ID that you can find in the integration settings on the Nango UI.
The connection ID that you can find in the Connections tab on the Nango UI.
HMAC key to secure the authorization flow
If true, nango.auth() would fail if the login window is closed before the authorization flow is completed.
For OAuth, specify the query parameters of the authorization URL.
For Slack OAuth, specify user-specific scopes.
For API key authorization, pass in the user’s API key.
For Basic authorization, pass in the user’s username.
For Basic authorization, pass in the user’s password.
For OAuth 2, override the integration’s client ID with a connection-level client ID. This is useful when your users bring their own OAuth 2 app (e.g. Netsuite).
For OAuth 2, override the integration’s client secret with a connection-level client secret. This is useful when your users bring their own OAuth 2 app (e.g. Netsuite).
Success response
The integration ID that you can find in the integration settings on the Nango UI.
The connection ID that you can find in the Connections tab on the Nango UI.
Error response
The type of error (e.g. ‘authorization_cancelled’).
The detailed error message (e.g. ‘Authorization fail: The user has closed the authorization modal before the process was complete.’).
By default we are auto generating the connectionId which is the unique identifier of this connection but ou can also specify it like this:
