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

# Miro

The Miro auth provider enables tools and agents to call [Miro APIs](https://developers.miro.com/reference/api-reference) on behalf of a user using OAuth 2.0 authentication.

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

### What's documented here

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

This auth provider is used by:

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

## Configuring Miro auth

<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 Miro app credentials. This way, your users will see your application's name requesting permission.

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

### Create a Miro app

To integrate with Miro's API, you'll need to create an app in the Miro Developer Platform:

<Steps>

#### Access the Miro Developer Platform

Navigate to the [Miro Developer Platform](https://developers.miro.com/) and sign in with your Miro account or create a new one.

#### Create a new app

1. Go to [Your Apps](https://miro.com/app/settings/user-profile/apps) in your Miro profile settings
2. Click on "Create new app"
3. Fill in the required details:
   - **App Name**: Choose a descriptive name for your application
   - **Description**: Provide a brief description of your app

#### Configure OAuth settings

1. After creating your app, navigate to the **OAuth & Permissions** section
2. Set the **Redirect URI** to the redirect URL generated by Arcade (see configuration section below)
3. Configure the required **Scopes** for your application:
   - `boards:read` - Read board information
   - `boards:write` - Create and modify boards
   - Add other scopes as needed for your use case

#### Obtain your credentials

1. In your app's settings, you'll find your **Client ID** and **Client Secret**
2. Copy both values for use in Arcade configuration

</Steps>

For detailed instructions, refer to Miro's [OAuth documentation](https://developers.miro.com/docs/getting-started-with-oauth).

Next, add the Miro app to Arcade.

## Configuring your own Miro Auth Provider in Arcade

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

### Configure Miro 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 **OAuth 2.0** tab at the top.

#### Enter the provider details

- Choose a unique **ID** for your provider (e.g. "arcade-miro").
- Optionally enter a **Description**.
- Enter the **Client ID** and **Client Secret** from your Miro app.
- Configure the OAuth 2.0 endpoints:
  - **Authorization URL**: `https://miro.com/oauth/authorize`
  - **Token URL**: `https://api.miro.com/v1/oauth/token`
- Note the **Redirect URL** generated by Arcade. This must be set as your Miro app's Redirect URI.

#### Create the provider

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

</Steps>

</Tabs.Tab>

<Tabs.Tab>

### Configure Miro Auth Using Configuration File

<Callout type="info">
  This method is only available when you are [self-hosting the
  engine](/guides/deployment-hosting/on-prem
</Callout>

<Steps>

#### Set environment variables

Set the following environment variables:

```bash
export MIRO_CLIENT_ID="<your client ID>"
export MIRO_CLIENT_SECRET="<your client secret>"
```

Or, you can set these values in a `.env` file:

```bash
MIRO_CLIENT_ID="<your client ID>"
MIRO_CLIENT_SECRET="<your client secret>"
```

#### Edit the Engine configuration

Edit the `engine.yaml` file and add a new item to the `auth.providers` section:

```yaml
auth:
  providers:
    - id: arcade-miro
      description: Miro OAuth 2.0 provider
      enabled: true
      type: oauth2
      client_id: ${env:MIRO_CLIENT_ID}
      client_secret: ${env:MIRO_CLIENT_SECRET}
      oauth2:
        scope_delimiter: " "
        authorize_request:
          endpoint: "https://miro.com/oauth/authorize"
          params:
            response_type: code
            client_id: "{{client_id}}"
            redirect_uri: "{{redirect_uri}}"
            scope: "{{scopes}}"
            state: "{{state}}"
        token_request:
          endpoint: "https://api.miro.com/v1/oauth/token"
          params:
            grant_type: authorization_code
            client_id: "{{client_id}}"
            client_secret: "{{client_secret}}"
            redirect_uri: "{{redirect_uri}}"
          response_content_type: application/json
```

</Steps>

</Tabs.Tab>
</Tabs>

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

## Using Miro auth in app code

Use the Miro auth provider in your own agents and AI apps to get a user token for the Miro 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 Miro API:

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

```python {8-12}
from arcadepy import Arcade

client = Arcade()  # 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="arcade-miro",
    scopes=["boards:read", "boards:write"]
)

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)

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

</Tabs.Tab>

<Tabs.Tab>

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

const client = new Arcade();

const userId = "{arcade_user_id}";

// Start the authorization process
const authResponse = await client.auth.start(
  userId,
  "arcade-miro",
  ["boards:read", "boards:write"]
);

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

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

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

</Tabs.Tab>

</Tabs>

## Using Miro auth in custom tools

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

If the pre-built tools in the Miro 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 the Miro API.

Use the `OAuth2()` auth class to specify that a tool requires authorization with Miro. The `context.authorization.token` field will be automatically populated with the user's Miro token:

```python {8-12,22}
from typing import Annotated

import httpx
from arcade_tdk import ToolContext, tool
from arcade_tdk.auth import OAuth2


@tool(
    requires_auth=OAuth2(
        provider_id="arcade-miro",
        scopes=["boards:read"]
    )
)
async def get_user_boards(
    context: ToolContext,
) -> Annotated[dict, "The user's boards."]:
    """
    Retrieve the list of boards for the authenticated user.
    """
    url = "https://api.miro.com/v2/boards"
    headers = {
        "Authorization": context.authorization.token,
    }

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

## Available Scopes

Miro supports various OAuth scopes that determine the level of access your application has:

- `boards:read` - Read board information
- `boards:write` - Create and modify boards
- `team:read` - Read team information
- `team:write` - Manage team settings
- `organizations:read` - Read organization information
- `organizations:teams:read` - Read organization teams

For a complete list of available scopes, refer to the [Miro Scopes documentation](https://developers.miro.com/docs/scopes).