---
schema_version: "1"
id: e5c3dc567146d4a59efc73a4f682c800bc55534dde6e8bc06e31df8ce4cf8fc9
title: Create a Basic Authentication Connector
collection: tableau
version: next
locale: en-us
portal_url: https://docs.salesforce.com/tableau/next/en-us/api/webdataconnector/docs/wdc_create_basic_auth_connector.md
canonical_url: https://help.tableau.com/v0.0/api/webdataconnector/en-us/docs/wdc_create_basic_auth_connector.html
source_site: help.tableau.com
content_type: documentation
content_hash: 3e9b3a4d606bf81a690f876bf07c6475514fb9deb5b0f0c6bd12bcb52bf10b9e
description: Documentation for the Tableau Web Data Connector
---
**Deprecated** - This repository will be removed with the Tableau 26.3 release.

The Web Data Connector 3.0 framework is deprecated and will not receive further updates. Migrate to the [REST API Connector on Tableau Exchange](https://exchange.tableau.com/products/1111)—built by Tableau, supports JSON and CSV over HTTP GET, Basic/Bearer/OAuth authentication, and runs on Tableau 2023.3 and later. Note: this connector is extract-only and requires a JDBC driver installation.

# Create a Basic Authentication Connector

  

🕐 _5 min read_

The basic authentication boilerplate is a connector that ingests Excel data and uses the built-in TACO Excel file parser from a basic authentication endpoint.

## Use cases

- Basic authentication
- Custom authentication
- Excel
- Built-in Excel parser

## Instructions

To create your basic authentication connector, we recommend that you first create a sample basic authentication connector and edit the generated files. It’s easier to get all the files and directory structure your connector needs by just using an existing example.

To create your basic authentication connector, do the following steps.

### Step 1: Create a boilerplate basic authentication connector

1. Enter the following command to create the connector:
    
    ```
    taco create my-basic-auth-connector --boilerplate basic-auth 
    ```
    
    This creates a directory with the earthquake data boilerplate code, which is included with the toolkit.
2. Change directories to the `my-basic-auth-connector` directory.
    
    ```
    cd my-basic-auth-connector
    ```
3. Build the connector by entering the following command:
    
    ```
    taco build
    ```
    
    This command clears any previous or existing build caches, then installs the dependencies, then builds the frontend code and the backend code (handlers), then copies the connector.json file (the configuration file).

### Step 2: Configure your connector’s properties

In your new basic authentication connector directory, find and open the `connector.json` file.

```
{
  "name": "my-basic-auth-connector",
  "version": "1.0.0",
  "tableau-version": {
    "min": "2022.3"
  },
  "vendor": {
    "name": "vendor-name",
    "support-link": "https://vendor-name.com",
    "email": "support@vendor-name.com"
  },
  "permission": {
    "api": {
      "https://*.usgs.gov/": [
        "GET",
        "POST",
        "HEAD"
      ]
    }
  },
  "auth": {
    "type": "custom"
  },
  "window": {
    "height": 800,
    "width": 600
  }
}
```

Make the following changes:

1. Change the general properties.
    
    | Name | Value |
    | --- | --- |
    | name | Your connector’s directory name |
    | displayName | Your connector’s name. This is the name that appears in the Tableau connectors area. |
    | version | Your connector’s version |
    | min | The earliest Tableau version your connector supports |
2. Change the company properties.
    
    | Name | Value |
    | --- | --- |
    | vendor.name | Your company name |
    | vendor.support-link | Your company’s URL |
    | vendor.email | Your company’s email |
3. Change the permissions.
    
    | Name | Value |
    | --- | --- |
    | permission.api | The URI for the API that the connector is allowed to access, along with the methods (POST, GET, PUT, PATCH, DELETE) that the connector is allowed to use. |
4. Verify the authentication value.
    
    | Name | Value |
    | --- | --- |
    | auth.type | Set to `custom` |
    
    `custom` covers basic authentication (username and password) and custom authentication (API keys or tokens). For more information about authentication, see the Authentication section in the [Considerations for Building Your Connector](/v0.0/api/webdataconnector/en-us/docs/wdc_dev_considerations.html) topic.
5. Change the HTML pane size.
    
    | Name | Value |
    | --- | --- |
    | window.height | The height of the connector HTML pane |
    | window.width | The width of the connector HTML pane |

### Step 3: Edit the user interface

When you open a web data connector in Tableau, the connector displays an HTML page that links to your JavaScript code and to your connector’s handlers. Optionally, this page can also display a user interface for your users to select the data that they want to download.

To create a user interface (UI) for your connector, open the `/app/index.html` file and make any edits for your connector.

```
<!DOCTYPE html>
<html>

<head>
  <title>Basic Auth Sample Connector</title>
  <meta http-equiv="Cache-Control" content="no-store" />
  <link rel="icon" href="data:,">
  <link href="index.css" rel="stylesheet" />
  <script src="index.ts" type="module" defer></script>
</head>

<body>
  <p id="error" style="display: block; margin-top: 2em; height: 5px; text-align: center; color: red;"></p>

  <div class="box m-auto ">
    <div class="card">
      <div class="card-header">
        Basic Auth Sample Connector
      </div>

      <div class="card-body">
        <label for="userName" class="form-label">User Name</label>
        <input type="text" id="username" class="form-control mb-3" placeholder="User Name">

        <label for="Password" class="form-label">Password</label>
        <input type="password" id="password" class="form-control mb-4" placeholder="Password">

        <div class=" text-center">
          <button type="button" class="btn btn-success" id="submitButton" disabled>
            Please wait while settings load...
          </button>
        </div>
      </div>

    </div>
  </div>

</body>

</html>
```

Some notes about what the code is doing:

- The `meta` tag prevents your browser from caching the page.
- The `index.css` file is used to simplify styling and formatting.
- The `index.ts` file is the code for your connector.
- The `input type="text"` is the form field for the username.
- The `input type="password"` is the form field for the password.

### Step 4: Edit the connector object

Now that you’ve created a user interface, it’s time to edit the JavaScript code for the connector’s button. The code is in the `/app/index.js` file.

- The connector object is used to submit data from the connector UI to connector handlers.
    
    ```
    const connector = new Connector(() => {
      connectorInitialized = true
      enableButtonWhenReady()
    })
    ```
- The following code shows how a connector sets variables (for example, secrets, handlerInputs) for the connector object before submitting.
    
    ```
     function submit() {
       const username = document.querySelector<HTMLInputElement>('#username')?.value
       const password = document.querySelector<HTMLInputElement>('#password')?.value
       if (!username || !password) {
         return
       }
    
       connector.secrets = { username, password }
       connector.handlerInputs = [
         {
           fetcher: 'DataFetcher',
           parser: 'taco:excel-file-parser',
           data: {},
           name: 'unique-workbook-name',
         },
       ]
    
       connector.submit()
     }
    ```
    
    For more information about the Connector object, see [Class Connector](https://help.vnext.tabint.net/current/api/webdataconnector/en-us/reference/classes/app.Connector.html) in the SDK documentation.

### Step 5: Update the fetcher file

If your data is complex and needs preprocessing, use the TACO Toolkit library to prepare your data. The following is the default code in the `handlers/DataFetcher.js` file that gets the data:

```
import { Fetcher, FetchUtils, FetchOptions, getBasicAuthHeader } from '@tableau/taco-toolkit/handlers'

export default class DataFetcher extends Fetcher {
  async *fetch({ secrets }: FetchOptions) {
    const { username, password } = secrets
    const headers = getBasicAuthHeader(username, password)

    // PLACEHOLDER: the url is NOT real endpoint.
    // Replace the url with actual endpoint that supports basic auth for corresponding file type.
    // Note: the permission setting in connector.json also needs to be updated accordingly.
    const url = 'https://www.example.com/api/user'

    yield await FetchUtils.loadExcelData(url, { headers })
  }
}
```

For information about `FetchUtils.loadExcelData`, see [loadExcelData](https://)

### Step 6: Build your connector

Enter these commands to build, pack, and run your new connector:

```
taco build
```

```
taco pack
```

```
taco run Desktop
```