ClickUp Provider

If you need a detailed guide on how to setup a provider pleaser refer to the Getting Started and Making your first integration guides.

Resources

Authentication (opens in a new tab)

Setup

Callback URL

https://your-app.com/api/auth/integration/click-up

Environment variables

.env.local

AUTH_CLICKUP_ID=your-client-id
AUTH_CLICKUP_SECRET=your-client-secret

Add the provider to the `auth.ts` file.

auth.ts

import { NextIntegrate } from 'next-integrate';
 
export const { auth } = NextIntegrate({
  // The URL of the app, e.g. https://example.com, set in the .env file.
  // If you want to modify the redirect URL, to be prefixed with something else,
  // you can do it here like this:
  // base_url: process.env.BASE_URL! + "/some-prefix",
  // This will change the redirect URL to eg. https://example.com/some-prefix/api/auth/integration/google
  base_url: process.env.BASE_URL!,
  providers: [
    {
      provider: 'click-up',
      client_id: process.env.AUTH_CLICKUP_ID!,
      client_secret: process.env.AUTH_CLICKUP_SECRET!,
      integrations: [],
    },
  ],
});

Add an integration

auth.ts

import { NextIntegrate } from 'next-integrate';
 
export const { auth } = NextIntegrate({
  // The URL of the app, e.g. https://example.com, set in the .env file.
  // If you want to modify the redirect URL, to be prefixed with something else,
  // you can do it here like this:
  // base_url: process.env.BASE_URL! + "/some-prefix",
  // This will change the redirect URL to eg. https://example.com/some-prefix/api/auth/integration/google
  base_url: process.env.BASE_URL!,
  providers: [
    {
      provider: 'click-up',
      client_id: process.env.AUTH_CLICKUP_ID!,
      client_secret: process.env.AUTH_CLICKUP_SECRET!,
      integrations: [
        {
          name: 'some_custom_name',
          options: {},
          callback: async (data) => {
            // This is where you can save the data to a database, or do something else with it.
          },
        },
      ],
    },
  ],
});

Usage

To use the your new integration, you can use the <Integrate /> component found in the Getting Started Guide.

import Integrate from '@/components/integrate';
 
export default function Home() {
  return (
    <main>
      <Integrate provider="click-up" name="some_custom_name">
        Get ClickUp User Info
      </Integrate>
    </main>
  );
}

Options

ClickUp does not require any options, so you can leave the options object empty. If you wanna learn more about how ClickUp OAuth works, please refer to the ClickUp OAuth documentation (opens in a new tab).

Facebook LinkedIn