# Use Nango as a Credential Store (/typescript-sdk/credentials/nango)





Nango is an excellent choice for both development and production environments, particularly when working with OAuth2.1/PKCE flows and complex integrations.

To get started, first set up Nango either through cloud or local deployment, then create your credential, and finally consume the credential through the TypeScript SDK.

## Nango setup option 1: Nango Cloud

### Step 1: Create a Nango account

Sign up [here](https://app.nango.dev/signin).

### Step 2: Save your Nango secret key

After creating your Nango account, navigate to Environment Settings in your dashboard and copy the secret key.

### Step 3: Configure your root `.env` file

```
NANGO_SECRET_KEY=your_nango_secret_key
```

Restart your dev server to load the new environment variable:

```bash
pnpm dev
```

### Step 4: Create a new credential in the Visual Builder using Nango

<Video src="/videos/create-nango-credential.mp4" />

## Nango setup option 2: Nango local

### Step 1: Clone the optional services repository

```bash
git clone https://github.com/inkeep/agents-optional-local-dev
cd agents-optional-local-dev
```

### Step 2: Start Nango Services

Inside the `agents-optional-local-dev` repository, run the following command:

```bash
docker-compose --profile nango up -d
```

### Step 3: Save your Nango secret key

1. Open Nango at `http://localhost:3050`
2. Navigate to Environment Settings and copy the secret key

### Step 4: Configure your root `.env` file

In your **root project directory** (not inside the `agents-optional-local-dev` repository), update your `.env` file:

```bash
NANGO_SECRET_KEY=your_nango_secret_key
NANGO_HOST=http://localhost:3050
PUBLIC_NANGO_CONNECT_BASE_URL=http://localhost:3051
```

Restart your dev server to load the new environment variables:

```bash
pnpm dev
```

### Step 5: Create a new credential in the Visual Builder using Nango

Create a new credential in the [Visual Builder](/visual-builder/tools/credentials) using Nango Store as the credential store.

<Video src="/videos/create-nango-credential.mp4" />

## Referencing credentials in SDK

Once you have created a credential in the Visual Builder, you can reference it in the TypeScript SDK for both Bearer Authentication and OAuth2.1/PKCE.

Here is an example of how to reference a credential in the TypeScript SDK for both Bearer Authentication and OAuth2.1/PKCE.

<Tabs>
  <Tab title="Bearer Authentication">
    ```typescript
    import { agent, subAgent, mcpTool, credential } from "@inkeep/agents-sdk";
    import { CredentialStoreType } from "@inkeep/agents-core";

    // Step 1: Reference the credential created in the Visual Builder
    const stripeCredential = credential({
      id: 'stripe-credential',
      name: 'Stripe Credential',
      type: CredentialStoreType.memory,
      credentialStoreId: 'memory-default',
      retrievalParams: {
        "connectionId": "<id-given-to-bearer-api-key>", // where <id-given-to-bearer-api-key> is the id given to the bearer api key created through the Visual Builder
        "providerConfigKey": "<id-given-to-bearer-api-key>",
        "provider": "private-api-bearer",
        "authMode": "API_KEY"
      },
    });

    // Step 2: Use credential in MCP tool
    const stripeTool = mcpTool({
      id: 'stripe-tool',
      name: 'Stripe Tool',
      description: 'Access Stripe payment services',
      serverUrl: 'https://mcp.stripe.com/mcp',
      credential: stripeCredential,
    });
    ```
  </Tab>

  <Tab title="OAuth2.1/PKCE">
    ```typescript
    import { agent, subAgent, mcpTool, credential } from "@inkeep/agents-sdk";
    import { CredentialStoreType } from "@inkeep/agents-core";

    // Step 1: Reference the credential created in the Visual Builder
    const stripeCredential = credential({
      id: 'stripe-credential',
      name: 'Stripe Credential',
      type: CredentialStoreType.memory, // Memory store
      credentialStoreId: 'memory-default',
      retrievalParams: {
        "connectionId": "<nango-connection-id>", // Nango connection ID that was generated. You can confirm this in your nango dashboard (cloud or self-hosted)
        "providerConfigKey": "<mcp-server-name>_<mcp-server-generated-id>", // For example, linear_AABBCC1234
        "provider": "mcp-generic",
        "authMode": "OAUTH2"
      },
    });

    // Step 2: Use credential in MCP tool
    const stripeTool = mcpTool({
      id: 'stripe-tool',
      name: 'Stripe Tool',
      description: 'Access Stripe payment services',
      serverUrl: 'https://mcp.stripe.com/mcp',
      credential: stripeCredential,
    });
    ```
  </Tab>
</Tabs>

### Credential Configuration

| Parameter           | Type                | Required | Description                                              |
| ------------------- | ------------------- | -------- | -------------------------------------------------------- |
| `id`                | string              | Yes      | Unique identifier for the credential                     |
| `type`              | CredentialStoreType | Yes      | Type of credential store (memory, nango, or keychain)    |
| `credentialStoreId` | string              | Yes      | Identifier for the specific credential store instance    |
| `retrievalParams`   | object              | Yes      | Parameters for retrieving the credential from the store. |