feat(providers): Click up provider (#8489)

* feat: click up provider created

* docs: ClickUp documentation

* Format

---------

Co-authored-by: Antonio Basile <antoniobasile2@eng.it>
Co-authored-by: Thang Vu <hi@thvu.dev>

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -36,6 +36,7 @@ body:
         - "Beyond Identity"
         - "Box"
         - "Bungie"
+        - "ClickUp"
         - "Cognito"
         - "Coinbase"
         - "Descope"

apps/dev/nextjs/.env.local.example

@@ -59,6 +59,10 @@ WIKIMEDIA_SECRET=
 YANDEX_ID=
 YANDEX_SECRET=
 
+# ClickUp OAuth. https://clickup.com/api/
+CLICK_UP_ID=
+CLICK_UP_SECRET=
+
 # Example configuration for a Gmail account (will need SMTP enabled)
 EMAIL_SERVER=smtps://user@gmail.com:password@smtp.gmail.com:465
 EMAIL_FROM=user@gmail.com

apps/dev/nextjs/pages/api/auth/[...nextauth].ts

@@ -39,7 +39,7 @@ import Yandex from "@auth/core/providers/yandex"
 import Vk from "@auth/core/providers/vk"
 import Wikimedia from "@auth/core/providers/wikimedia"
 import WorkOS from "@auth/core/providers/workos"
-
+import ClickUp from '@auth/core/providers/click-up'
 // // Prisma
 // import { PrismaClient } from "@prisma/client"
 // import { PrismaAdapter } from "@auth/prisma-adapter"
@@ -131,6 +131,7 @@ export const authConfig: AuthConfig = {
     Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
     Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
     WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
+    ClickUp({ clientId: process.env.CLICK_UP_ID, clientSecret: process.env.CLICK_UP_SECRET })
   ],
   // debug: process.env.NODE_ENV !== "production",
 }

docs/static/img/providers/click-up.svg

@@ -0,0 +1,27 @@
+<svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="30" y="20" width="125" height="125" rx="62.5" fill="white"/>
+<rect x="30" y="20" width="125" height="125" rx="62.5" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8789 105.714L69.3974 95.3593C76.5762 104.732 84.1998 109.051 92.6948 109.051C101.143 109.051 108.557 104.781 115.414 95.4832L129.119 105.59C119.232 118.996 106.932 126.079 92.6948 126.079C78.5049 126.079 66.0907 119.046 55.8789 105.714Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.6491 60.7078L68.5883 81.4406L57.4727 68.5407L92.6969 38.1885L127.647 68.5644L116.477 81.417L92.6491 60.7078Z" fill="url(#paint1_linear)"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="185" height="185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="10"/>
+<feGaussianBlur stdDeviation="15"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.117647 0 0 0 0 0.211765 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="55.8789" y1="116.251" x2="129.119" y2="116.251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8930FD"/>
+<stop offset="1" stop-color="#49CCF9"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="57.4727" y1="67.6025" x2="127.647" y2="67.6025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF02F0"/>
+<stop offset="1" stop-color="#FFC800"/>
+</linearGradient>
+</defs>
+</svg>

packages/core/src/providers/click-up.ts

@@ -0,0 +1,103 @@
+/**
+ * <div style={{backgroundColor: "#24292f", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <span>Built-in <b>ClickUp</b> integration.</span>
+ * <a href="https://clickup.com">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/click-up.svg" height="48" width="48"/>
+ * </a>
+ * </div>
+ *
+ * @module providers/ClickUp
+ */
+
+import type { OAuthConfig, OAuthUserConfig } from "./index.js"
+
+/** @see [Get the authenticated user](https://clickup.com/api/clickupreference/operation/GetAuthorizedUser/)*/
+export interface ClickUpProfile {
+  user: {
+    id: number
+    username: string
+    color: string
+    profilePicture: string
+  }
+}
+
+/**
+ * Add ClickUp login to your page and make requests to [ClickUp APIs](https://clickup.com/api/).
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/clickup
+ * ```
+ *
+ * #### Configuration
+ * ```ts
+ * import { Auth } from "@auth/core"
+ * import ClickUp from "@auth/core/providers/click-up"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [ClickUp({ clientId: CLICKUP_CLIENT_ID, clientSecret: CLICKUP_CLIENT_SECRET })],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [ClickUp - Authorizing OAuth Apps](https://clickup.com/api/developer-portal/authentication#oauth-flow)
+ * - [Source code](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/click-up.ts)
+ *
+ * ### Notes
+ *
+ * By default, Auth.js assumes that the ClickUp provider is
+ * based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
+ *
+ * :::tip
+ *
+ * The ClickUp provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/click-up.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/providers/custom-provider#override-default-options).
+ *
+ * :::
+ *
+ * :::info **Disclaimer**
+ *
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ *
+ * :::
+ */
+export default function ClickUp(
+  config: OAuthUserConfig<ClickUpProfile>
+): OAuthConfig<ClickUpProfile> {
+  return {
+    id: "clickup",
+    name: "ClickUp",
+    type: "oauth",
+    authorization: "https://app.clickup.com/api",
+    token: "https://api.clickup.com/api/v2/oauth/token",
+    userinfo: "https://api.clickup.com/api/v2/user",
+    clientId: config.clientId,
+    clientSecret: config.clientSecret,
+    checks: ["state"],
+    profile: (profile: ClickUpProfile) => {
+      return {
+        id: profile.user.id.toString(),
+        name: profile.user.username,
+        profilePicture: profile.user.profilePicture,
+        color: profile.user.color,
+      }
+    },
+    style: {
+      logo: "/click-up.svg",
+      logoDark: "/click-up.svg",
+      bg: "#fff",
+      bgDark: "#24292f",
+      text: "#000",
+      textDark: "#fff",
+    },
+    options: config,
+  }
+}