ClickUp

ClickUp OAuth AppCopy Anchor Link

Register the ApplicationCopy Anchor Link

The first step is to create and register an OAuth App on the ClickUp Workspace to obtain access to the user's resources.

1. Navigate to your Clickup Avatar and go to Settings > Integrations & ClickApps > ClickUp API > ClickUp API Settings.
2. Click Create an App.
3. Fill in the "App name".
4. Set the Redirect URL(s) to http://localhost:3000/auth/callback/click-up.
   • (Make sure to replace http://localhost:3000 with your production domain when deploying)
5. Click Create App.
6. Ensure you copy the Client ID and click Generate a new client secret.

InstallationCopy Anchor Link

Install the @aura-stack/auth package. Please follow the Installation Guide to complete the setup and core configuration for aura-stack/auth.

npm install @aura-stack/auth

Environment setupCopy Anchor Link

Now, you must configure the environment variables required by Aura Auth, including the ClickUp credentials and the encryption secrets.

# Aura Secrets
AURA_AUTH_SECRET="your-32-byte-secret"
AURA_AUTH_SALT="your-32-byte-salt"

# ClickUp Credentials
AURA_AUTH_CLICK_UP_CLIENT_ID="your_click_up_client_id"
AURA_AUTH_CLICK_UP_CLIENT_SECRET="your_click_up_client_secret"

Configure the Auth InstanceCopy Anchor Link

Configure the createAuth instance inside an auth.ts file located at the root of your project. Ensure you explicitly export the handlers, api, and jose objects.

import { createAuth } from "@aura-stack/auth"

export const auth = createAuth({
  oauth: ["click-up"],
})

// Extract the required utilities
export const { handlers, api, jose } = auth

Customizing the OAuth ProviderCopy Anchor Link

If you need to define custom scopes, change the response type, or map profile data differently, you can use the provider's factory function instead of a simple string identifier.

import { createAuth } from "@aura-stack/auth"
import { clickUp } from "@aura-stack/auth/oauth/click-up"

export const auth = createAuth({
  oauth: [
    clickUp({
      authorize: {
        params: {
          clientId: process.env.AURA_AUTH_CLICK_UP_CLIENT_ID!,
        },
      },
    }),
  ],
})

export const { handlers, api, jose } = auth

Sign In to ClickUp (Client & Server)Copy Anchor Link

There are multiple ways to trigger the sign-in flow depending on your ecosystem.

Sign-in Path (Direct Navigation)Copy Anchor Link

The common route to trigger the auth flow natively without needing a client library is simply navigating the browser to: http://localhost:3000/auth/signIn/click-up

Client-Side (React, Vue, etc.)Copy Anchor Link

You can utilize the createAuthClient utility to programmatically trigger sign-ins. You can also define a redirectTo destination.

import { createAuthClient } from "@aura-stack/auth/client"

export const authClient = createAuthClient({
  baseURL: "http://localhost:3000/auth",
})

const triggerSignIn = async () => {
  await authClient.signIn("click-up", {
    redirectTo: "/dashboard",
  })
}

Server-Side (Next.js Actions, Remix Loaders, etc.)Copy Anchor Link

For environments supporting server-side actions, use the programmatic api.signIn method securely.

import { api } from "./auth"

export const serverSignIn = async () => {
  const response = await api.signIn("click-up", {
    redirectTo: "http://localhost:3000/dashboard",
  })

  // Example returning redirect location
  return response.headers.get("Location")
}

Session RetrievalCopy Anchor Link

After a user successfully signs in, you can retrieve their session data securely.

Client-Side:

const session = await authClient.getSession()
console.log(session?.user) // The authenticated ClickUp user profile

Server-Side:

// Note: You must pass the native Web Request object or Headers!
const session = await api.getSession(request)
console.log(session?.user) // Safely retrieved backend session