|
| 1 | +import { Tabs } from "nextra/components"; |
| 2 | + |
| 3 | +# ClickUp auth provider |
| 4 | + |
| 5 | +<Note> |
| 6 | + At this time, Arcade does not offer a default ClickUp Auth Provider. To use |
| 7 | + ClickUp auth, you must create a custom Auth Provider with your own ClickUp OAuth |
| 8 | + 2.0 credentials as described below. |
| 9 | +</Note> |
| 10 | + |
| 11 | +The ClickUp auth provider enables tools and agents to call the ClickUp API on behalf of a user. Behind the scenes, the Arcade Engine and the ClickUp auth provider seamlessly manage ClickUp OAuth 2.0 authorization for your users. |
| 12 | + |
| 13 | +### What's documented here |
| 14 | + |
| 15 | +This page describes how to use and configure ClickUp auth with Arcade. |
| 16 | + |
| 17 | +This auth provider is used by: |
| 18 | + |
| 19 | +- Your [app code](#using-clickup-auth-in-app-code) that needs to call ClickUp APIs |
| 20 | +- Or, your [custom tools](#using-clickup-auth-in-custom-tools) that need to call ClickUp APIs |
| 21 | + |
| 22 | +## Configuring ClickUp auth |
| 23 | + |
| 24 | +In a production environment, you will most likely want to use your own ClickUp app credentials. This way, your users will see your application's name requesting permission. |
| 25 | + |
| 26 | +You can use your own ClickUp credentials in both the Arcade Cloud and in a [self-hosted Arcade Engine](/home/local-deployment/install/local) instance. |
| 27 | + |
| 28 | +Before showing how to configure your ClickUp app credentials, let's go through the steps to create a ClickUp app. |
| 29 | + |
| 30 | +### Create a ClickUp app |
| 31 | + |
| 32 | +- Navigate to your ClickUp workspace and go to **Settings → Apps** |
| 33 | +- Click **Create new app** in the OAuth Apps section |
| 34 | +- Fill in your app name and description |
| 35 | +- Set the OAuth Redirect URL to: `https://cloud.arcade.dev/api/v1/oauth/callback` |
| 36 | +- Copy the Client ID and Client Secret, which you'll need below |
| 37 | + |
| 38 | +Next, add the ClickUp app to your Arcade Engine configuration. You can do this in the Arcade Dashboard, or by editing the `engine.yaml` file directly (for a self-hosted instance). |
| 39 | + |
| 40 | +## Configuring your own ClickUp Auth Provider in Arcade |
| 41 | + |
| 42 | +There are two ways to configure your ClickUp app credentials in Arcade: |
| 43 | + |
| 44 | +1. From the Arcade Dashboard GUI |
| 45 | +2. By editing the `engine.yaml` file directly (for a self-hosted Arcade Engine) |
| 46 | + |
| 47 | +We show both options step-by-step below. |
| 48 | + |
| 49 | +<Tabs items={["Dashboard GUI", "Engine Configuration YAML"]}> |
| 50 | +<Tabs.Tab> |
| 51 | + |
| 52 | +### Configure ClickUp Auth Using the Arcade Dashboard GUI |
| 53 | + |
| 54 | +<Steps> |
| 55 | + |
| 56 | +#### Access the Arcade Dashboard |
| 57 | + |
| 58 | +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. |
| 59 | + |
| 60 | +#### Navigate to the OAuth Providers page |
| 61 | + |
| 62 | +- Under the **OAuth** section of the Arcade Dashboard left-side menu, click **Providers**. |
| 63 | +- Click **Add OAuth Provider** in the top right corner. |
| 64 | +- Select the **Included Providers** tab at the top. |
| 65 | +- In the **Provider** dropdown, select **ClickUp**. |
| 66 | + |
| 67 | +#### Enter the provider details |
| 68 | + |
| 69 | +- Choose a unique **ID** for your provider (e.g. "my-clickup-provider"). |
| 70 | +- Optionally enter a **Description**. |
| 71 | +- Enter the **Client ID** and **Client Secret** from your ClickUp app. |
| 72 | + |
| 73 | +#### Create the provider |
| 74 | + |
| 75 | +Hit the **Create** button and the provider will be ready to be used in the Arcade Engine. |
| 76 | + |
| 77 | +</Steps> |
| 78 | + |
| 79 | +When you use tools that require ClickUp auth using your Arcade account credentials, the Arcade Engine will automatically use this ClickUp OAuth provider. If you have multiple ClickUp providers, see [using multiple auth providers of the same type](/home/auth-providers#using-multiple-providers-of-the-same-type) for more information. |
| 80 | + |
| 81 | +</Tabs.Tab> |
| 82 | +<Tabs.Tab> |
| 83 | + |
| 84 | +### Configuring ClickUp auth in self-hosted Arcade Engine configuration |
| 85 | + |
| 86 | +<Steps> |
| 87 | + |
| 88 | +### Set environment variables |
| 89 | + |
| 90 | +Set the following environment variables: |
| 91 | + |
| 92 | +```bash |
| 93 | +export CLICKUP_CLIENT_ID="<your client ID>" |
| 94 | +export CLICKUP_CLIENT_SECRET="<your client secret>" |
| 95 | +``` |
| 96 | + |
| 97 | +Or, you can set these values in a `.env` file: |
| 98 | + |
| 99 | +```bash |
| 100 | +CLICKUP_CLIENT_ID="<your client ID>" |
| 101 | +CLICKUP_CLIENT_SECRET="<your client secret>" |
| 102 | +``` |
| 103 | + |
| 104 | +<Tip> |
| 105 | + See [Engine configuration](/home/local-deployment/configure/engine) for more information on how |
| 106 | + to set environment variables and configure the Arcade Engine. |
| 107 | +</Tip> |
| 108 | + |
| 109 | +### Edit the Engine configuration |
| 110 | + |
| 111 | +Edit the `engine.yaml` file and add a `clickup` item to the `auth.providers` section: |
| 112 | + |
| 113 | +```yaml file=<rootDir>/examples/code/integrations/clickup/config_provider.engine.yaml {3-9} |
| 114 | + |
| 115 | +``` |
| 116 | + |
| 117 | +</Steps> |
| 118 | + |
| 119 | +</Tabs.Tab> |
| 120 | +</Tabs> |
| 121 | + |
| 122 | +## Using ClickUp auth in app code |
| 123 | + |
| 124 | +Use the ClickUp auth provider in your own agents and AI apps to get a user-scoped token for the ClickUp API. See [authorizing agents with Arcade](/home/auth/how-arcade-helps) to understand how this works. |
| 125 | + |
| 126 | +Use `client.auth.start()` to get a user token for the ClickUp API: |
| 127 | + |
| 128 | +<Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage"> |
| 129 | +<Tabs.Tab> |
| 130 | + |
| 131 | +```python file=<rootDir>/examples/code/integrations/clickup/clickup_custom_auth.py {8-12} |
| 132 | + |
| 133 | +``` |
| 134 | + |
| 135 | +</Tabs.Tab> |
| 136 | +<Tabs.Tab> |
| 137 | + |
| 138 | +```javascript file=<rootDir>/examples/code/integrations/clickup/clickup_custom_auth.js {8-10} |
| 139 | + |
| 140 | +``` |
| 141 | + |
| 142 | +</Tabs.Tab> |
| 143 | +</Tabs> |
| 144 | + |
| 145 | +## Using ClickUp auth in custom tools |
| 146 | + |
| 147 | +You can author your own [custom tools](/home/build-tools/create-a-toolkit) that interact with the ClickUp API. |
| 148 | + |
| 149 | +Use the `ClickUp()` auth class to specify that a tool requires authorization with ClickUp. The `context.authorization.token` field will be automatically populated with the user's ClickUp token: |
| 150 | + |
| 151 | +```python file=<rootDir>/examples/code/integrations/clickup/clickup_custom_tool.py {5-6,9-13,20} |
| 152 | + |
| 153 | +``` |
0 commit comments