> ## Documentation Index
> Fetch the complete documentation index at: https://nango-tiktok-accounts-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend

The frontend SDK lets users authorize integrations in your frontend. It is available on [NPM](https://www.npmjs.com/package/@nangohq/frontend) as `@nangohq/frontend`.

## Initiating Nango

<Tabs>
  <Tab title="Nango Cloud">
    Get your `Public Key` from the [Project Settings](https://app.nango.dev/project-settings) page.

    ```ts
    import Nango from '@nangohq/frontend';

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

  <Tab title="Localhost">
    ```ts
    import Nango from '@nangohq/frontend';

    let nango = new Nango({ host: 'http://localhost:3003', publicKey: '<PUBLIC-KEY>' });
    ```
  </Tab>

  <Tab title="Self-hosted">
    ```ts
    import Nango from '@nangohq/frontend';

    let nango = new Nango({ host: '<INSTANCE-URL>', publicKey: '<PUBLIC-KEY>' });
    ```

    If you have configured your self-hosted instance to use a [custom websockets path](/use/self-hosting-instructions#custom-websockets-path),
    you will also need to set the `websocketsPath` configuration option:

    ```ts
    import Nango from '@nangohq/frontend';

    let nango = new Nango({ host: '<INSTANCE-URL>', publicKey: '<PUBLIC-KEY>', websocketsPath: '/<YOUR-WEBSOCKETS-PATH>' });
    ```
  </Tab>
</Tabs>

## Collecting & storing end-user credentials

You store end-user credentials with the `nango.auth` method.

<Tabs>
  <Tab title="OAuth">
    For OAuth, the `nango.auth()` method will trigger the OAuth flow in a popup, to let the user log in to their external account.

    ```js
    nango
        .auth('<INTEGRATION-ID>', '<CONNECTION-ID>')
        .then((result) => {
            // result is an object with:
            // {
            //      providerConfigKey: '<INTEGRATION-ID>',
            //      connectionId: '<CONNECTION-ID>
            // }
        })
        .catch((error) => {
            // Error is an object with:
            // {
            //    error: {
            //      type: 'authorization_cancelled', (or similar)
            //      message: 'Authorization fail: The user has closed the authorization modal before the process was complete.'  (or similar)
            //    }
            // }
        });
    ```
  </Tab>

  <Tab title="API Key">
    For API keys, the `nango.auth()` method is used to store the end-user's API key (that you have previously collected from them).

    ```js
    nango
        .auth('<INTEGRATION-ID>', '<CONNECTION-ID>', {
            credentials: {
                apiKey: '<END-USER-API-KEY>'
            }
        })
        .then((result) => {
            // result is an object with:
            // {
            //      providerConfigKey: '<INTEGRATION-ID>',
            //      connectionId: '<CONNECTION-ID>
            // }
        })
        .catch((error) => {
            // Error is an object with:
            // {
            //    error: {
            //      type: 'authorization_cancelled', (or similar)
            //      message: 'Authorization fail: The user has closed the authorization modal before the process was complete.'  (or similar)
            //    }
            // }
        });
    ```
  </Tab>

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

    ```js
    nango
        .auth('<INTEGRATION-ID>', '<CONNECTION-ID>', {
            credentials: {
                username: '<END-USER-API-KEY>',
                password: '<END-USER-PASSWORD>'
            }
        })
        .then((result) => {
            // result is an object with:
            // {
            //      providerConfigKey: '<INTEGRATION-ID>',
            //      connectionId: '<CONNECTION-ID>
            // }
        })
        .catch((error) => {
            // Error is an object with:
            // {
            //    error: {
            //      type: 'authorization_cancelled', (or similar)
            //      message: 'Authorization fail: The user has closed the authorization modal before the process was complete.'  (or similar)
            //    }
            // }
        });
    ```
  </Tab>
</Tabs>

## OAuth flows requiring extra configuration

Some API Providers require some 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
```

To set the subdomain pass in an additional configuration object to
`nango.auth()`:

```js
nango.auth('zendesk', '<CONNECTION-ID>', {
    params: { subdomain: '<ZENDESK-SUBDOMAIN>' }
});
```

## Detect closed authorization page

To fail when the authorization window is closed before the authorization flow is completed
pass in the extra parameter `detectClosedAuthWindow` to `nango.auth()`

```js
nango.auth('zendesk', '<CONNECTION-ID>', {
     detectClosedAuthWindow: true,
     ...
});
```