import { Tabs, Callout, Steps } from "nextra/components";

# Asana

The Asana auth provider enables tools and agents to call Asana APIs on behalf of a user.

<Callout>
  Want to quickly get started with Asana services in your agent or AI app? The
  pre-built [Arcade Asana MCP Server](/resources/integrations/productivity/asana) is what you
  want!
</Callout>

## What's documented here

This page describes how to use and configure Asana auth with Arcade.

This auth provider is used by:

- The [Arcade Asana MCP Server](/resources/integrations/productivity/asana), which provides pre-built tools for interacting with Asana
- Your [app code](#using-asana-auth-in-app-code) that needs to call Asana APIs
- Or, your [custom tools](#using-asana-auth-in-custom-tools) that need to call Asana APIs

## Use Arcade's Default Asana Auth Provider

Arcade offers a default Asana auth provider that you can use in the Arcade Cloud Platform. In this case, your users will see `Arcade` as the name of the application that's requesting permission.

If you choose to use Arcade's Asana auth, you don't need to configure anything. Follow the [Asana MCP Server examples](/resources/integrations/productivity/asana) to get started calling Asana tools.

## Use Your Own Asana App Credentials

<Callout type="info">
  When using your own app credentials, make sure you configure your project to
  use a [custom user
  verifier](/guides/user-facing-agents/secure-auth-production#build-a-custom-user-verifier).
  Without this, your end-users will not be able to use your app or agent in
  production.
</Callout>

In a production environment, you will most likely want to use your own Asana app credentials. This way, your users will see your application's name requesting permission.


Before showing how to configure your Asana app credentials, let's go through the steps to create an Asana app.

## Create an Asana App

Follow the documentation on [Building an App with Asana](https://developers.asana.com/docs/overview). You may create a [developer sandbox account](https://developers.asana.com/docs/developer-sandbox) to test your app before moving to production.

When creating your app, use the following settings:

- Set an appropriate App name, description and icon. This will be visible to your users authorizing access to your app.
- Take note of the **Client ID** and **Client Secret**.
- In the OAuth settings:
  - Under "Redirect URLs", click **Add Redirect URL** and add the redirect URL generated by Arcade (see below).
  - Under "Permission Scopes", select "Full Permissions"
- In the "App Listing Details" section, optionally add more information about your app.
- In the "Manage Distribution" section, under "Choose a distribution method", select "Any workspace".
- Optionally, submit your app for the Asana team review.

<Callout type="info">
  Asana [recently
  introduced](https://forum.asana.com/t/new-oauth-permission-scopes/1048556)
  granular permission scopes. This feature is still in preview and the scopes
  available at the moment do not include all endpoints/actions that the Asana
  MCP Servers needs. For those reasons, Arcade uses the "Full Permissions"
  scope.
</Callout>

## Configuring your own Asana Auth Provider in Arcade


<Tabs items={["Dashboard GUI"]}>
<Tabs.Tab>

### Configure Asana Auth Using the Arcade Dashboard GUI

<Steps>

#### Access the Arcade Dashboard

To access the Arcade Cloud dashboard, go to [api.arcade.dev/dashboard](https://api.arcade.dev/dashboard). If you are self-hosting, by default the dashboard will be available at http://localhost:9099/dashboard. Adjust the host and port number to match your environment.

#### Navigate to the OAuth Providers page

- Under the **Connections** section of the Arcade Dashboard left-side menu, click **Connected Apps**.
- Click **Add OAuth Provider** in the top right corner.
- Select the **Included Providers** tab at the top.
- In the **Provider** dropdown, select **Asana**.

#### Enter the provider details

- Choose a unique **ID** for your provider (e.g. "my-asana-provider").
- Optionally enter a **Description**.
- Enter the **Client ID** and **Client Secret** from your Asana app.
- Note the **Redirect URL** generated by Arcade. This must be added to your Asana app's Redirect URLs.

#### Create the provider

Hit the **Create** button and the provider will be ready to be used.

</Steps>

When you use tools that require Asana auth using your Arcade account credentials, Arcade will automatically use this Asana OAuth provider. If you have multiple Asana providers, see [using multiple auth providers of the same type](/references/auth-providers#using-multiple-providers-of-the-same-type) for more information.

</Tabs.Tab>
</Tabs>

## Using the Arcade Asana MCP Servers

The [Arcade Asana MCP Server](/resources/integrations/productivity/asana) provides tools to interact with various Asana objects, such as tasks, projects, teams, and users.

Refer to the [MCP Server documentation and examples](/resources/integrations/productivity/asana) to learn how to use the MCP Server to build agents and AI apps that interact with Asana services.

## Using Asana auth in app code

Use the Asana auth provider in your own agents and AI apps to get a user-scoped token for the Asana API. See [authorizing agents with Arcade](/get-started/about-arcade) to understand how this works.

Use `client.auth.start()` to get a user token for the Asana API:

<Callout type="info">
  As explained [above](#create-an-asana-app), the Asana granular permission
  scopes are in preview and not yet supported. The `"default"` scope should be
  used to authorize any action/endpoint you need to call in the Asana API.
</Callout>

<Tabs items={["Python", "JavaScript"]}>
<Tabs.Tab>


```python {21-22}
from arcadepy import Arcade

client = Arcade(base_url="https://api.arcade.dev")  # Automatically finds the `ARCADE_API_KEY` env variable

user_id = "{arcade_user_id}"

# Start the authorization process
auth_response = client.auth.start(
    user_id=user_id,
    provider="asana",
    scopes=["default"],
)

if auth_response.status != "completed":
    print("Please complete the authorization challenge in your browser:")
    print(auth_response.url)

# Wait for the authorization to complete
auth_response = client.auth.wait_for_completion(auth_response)

# Do something interesting with the token...
auth_token = auth_response.context.token
```

</Tabs.Tab>

<Tabs.Tab>


```javascript {20-21}
import { Arcade } from "@arcadeai/arcadejs";

const client = new Arcade({ baseURL: "https://api.arcade.dev" }); // Automatically finds the `ARCADE_API_KEY` env variable

const userId = "{arcade_user_id}";

// Start the authorization process
const authResponse = await client.auth.start(userId, "asana", {
  scopes: ["default"],
});

if (authResponse.status !== "completed") {
  console.log("Please complete the authorization challenge in your browser:");
  console.log(authResponse.url);
}

// Wait for the authorization to complete
const response = await client.auth.waitForCompletion(authResponse);

// Do something interesting with the token...
const auth_token = response.context.token;
```

</Tabs.Tab>
</Tabs>

You can use the auth token to call the [Get multiple tasks endpoint](https://developers.asana.com/reference/gettasks) and read information about tasks, for example. Any Asana API endpoint can be called with the auth token.

## Using Asana auth in custom tools

You can use the pre-built [Arcade Asana MCP Server](/resources/integrations/productivity/asana) to quickly build agents and AI apps that interact with Asana.

If the pre-built tools in the Asana MCP Server don't meet your needs, you can author your own [custom tools](/guides/create-tools/tool-basics/build-mcp-server) that interact with Asana API.

Use the `Asana()` auth class to specify that a tool requires authorization with Asana. The authentication token needed to call the Asana API is available in the tool context through the `context.get_auth_token_or_empty()` method.

<Callout type="info">
  As explained [above](#create-an-asana-app), the Asana granular permission
  scopes are in preview and not yet supported. The `"default"` scope should be
  used as the only scope in all tools.
</Callout>

```python {9,17}
from typing import Annotated

import httpx

from arcade_tdk import ToolContext, tool
from arcade_tdk.auth import Asana


@tool(requires_auth=Asana(scopes=["default"]))
async def delete_task(
    context: ToolContext,
    task_id: Annotated[str, "The ID of the task to delete."],
) -> Annotated[dict, "Details of the deletion response"]:
    """Deletes a task."""
    url = f"https://api.asana.com/api/1.0/tasks/{task_id}"
    headers = {
        "Authorization": f"Bearer {context.get_auth_token_or_empty()}",
        "Accept": "application/json",
    }

    async with httpx.AsyncClient() as client:
        response = await client.delete(url, headers=headers)
        response.raise_for_status()
        return response.json()
```


Your new tool can be called like demonstrated below:

<Tabs items={["Python", "JavaScript"]}>
<Tabs.Tab>
<Callout type="info">
  If you are self-hosting, change the `base_url` parameter in the `Arcade` constructor to match your Arcade Engine URL. By default, the Engine will be available at `http://localhost:9099`.
</Callout>

```python
from arcadepy import Arcade

client = Arcade(base_url="https://api.arcade.dev")  # Automatically finds the `ARCADE_API_KEY` env variable

USER_ID = "{arcade_user_id}"
TOOL_NAME = "Asana.DeleteTask"

auth_response = client.tools.authorize(tool_name=TOOL_NAME, user_id=USER_ID)

if auth_response.status != "completed":
    print(f"Click this link to authorize: {auth_response.url}")

# Wait for the authorization to complete
client.auth.wait_for_completion(auth_response)

tool_input = {
    "task_id": "1234567890",
}

response = client.tools.execute(
    tool_name=TOOL_NAME,
    input=tool_input,
    user_id=USER_ID,
)
print(response.output.value)
```

</Tabs.Tab>
<Tabs.Tab>
<Callout type="info">
  If you are self-hosting, change the `baseURL` parameter in the `Arcade` constructor to match your Arcade Engine URL. By default, the Engine will be available at `http://localhost:9099`.
</Callout>

```javascript
import { Arcade } from "@arcadeai/arcadejs";

const client = new Arcade({ baseURL: "https://api.arcade.dev" }); // Automatically finds the `ARCADE_API_KEY` env variable

const USER_ID = "{arcade_user_id}";
const TOOL_NAME = "Asana.DeleteTask";

// Start the authorization process
const authResponse = await client.tools.authorize({
  tool_name: TOOL_NAME,
  user_id: USER_ID,
});

if (authResponse.status !== "completed") {
  console.log(`Click this link to authorize: ${authResponse.url}`);
}

// Wait for the authorization to complete
await client.auth.waitForCompletion(authResponse);

const toolInput = {
  task_id: "1234567890",
};

const response = await client.tools.execute({
  tool_name: TOOL_NAME,
  input: toolInput,
  user_id: USER_ID,
});

console.log(response.output.value);
```

</Tabs.Tab>
</Tabs>