feat(providers): Add Clerk OAuth Provider

.github/ISSUE_TEMPLATE/2_bug_provider.yml

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

apps/dev/express/src/config/auth.config.ts

@@ -2,6 +2,7 @@ import Apple from "@auth/express/providers/apple"
 import Auth0 from "@auth/express/providers/auth0"
 import AzureB2C from "@auth/express/providers/azure-ad-b2c"
 import BoxyHQSAML from "@auth/express/providers/boxyhq-saml"
+import Clerk from "@auth/express/providers/clerk"
 import Cognito from "@auth/express/providers/cognito"
 import Coinbase from "@auth/express/providers/coinbase"
 import Discord from "@auth/express/providers/discord"
@@ -41,6 +42,7 @@ export const authConfig = {
       clientSecret: "dummy",
       issuer: process.env.AUTH_BOXYHQ_SAML_ISSUER,
     }),
+    Clerk,
     Cognito,
     Coinbase,
     Discord,

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

@@ -1,7 +1,7 @@
 # Rename file to .env.local (or .env) and populate values
 # to be able to run the dev app
 
-# You can use `openssl rand -hex 32` or 
+# You can use `openssl rand -hex 32` or
 # https://generate-secret.vercel.app/32 to generate a secret.
 # Note: Changing a secret may invalidate existing sessions
 # and/or verification tokens.
@@ -24,6 +24,11 @@ AUTH_BEYOND_IDENTITY_CLIENT_ID=
 AUTH_BEYOND_IDENTITY_CLIENT_SECRET=
 AUTH_BEYOND_IDENTITY_ISSUER=
 
+# When creating an OAuth2 Clerk application, set redirect url to "<DOMAIN>/auth/callback/clerk",
+AUTH_CLERK_ID=
+AUTH_CLERK_SECRET=
+AUTH_CLERK_URL=https://<URL>.clerk.accounts.dev
+
 AUTH_DESCOPE_ID=
 AUTH_DESCOPE_SECRET=
 

apps/dev/nextjs/app/client.tsx

@@ -33,6 +33,7 @@ export default function Client() {
             </>
           ) : (
             <>
+              <button onClick={() => signIn("clerk")}>Sign in Clerk</button>
               <button onClick={() => signIn("github")}>Sign in GitHub</button>
               <button onClick={() => signIn("credentials", {})}>
                 Sign in Credentials

apps/dev/nextjs/auth.config.ts

@@ -1,4 +1,5 @@
 import type { NextAuthConfig } from "next-auth"
+import Clerk from "next-auth/providers/clerk"
 import Credentials from "next-auth/providers/credentials"
 import GitHub from "next-auth/providers/github"
 import Google from "next-auth/providers/google"
@@ -26,6 +27,11 @@ declare module "next-auth" {
 export default {
   debug: true,
   providers: [
+    Clerk({
+      clientId: process.env.AUTH_CLERK_ID,
+      clientSecret: process.env.AUTH_CLERK_SECRET,
+      baseUrl: process.env.AUTH_CLERK_URL,
+    }),
     Credentials({
       credentials: { password: { label: "Password", type: "password" } },
       authorize(c) {
@@ -39,7 +45,7 @@ export default {
     }),
     GitHub,
     Google,
-    Keycloak,
+    // Keycloak,
     Facebook,
     Twitter,
     LinkedIn,

apps/examples/express/src/config/auth.config.ts

@@ -2,6 +2,7 @@ import Apple from "@auth/express/providers/apple"
 import Auth0 from "@auth/express/providers/auth0"
 import AzureB2C from "@auth/express/providers/azure-ad-b2c"
 import BoxyHQSAML from "@auth/express/providers/boxyhq-saml"
+import Clerk from "@auth/express/providers/clerk"
 import Cognito from "@auth/express/providers/cognito"
 import Coinbase from "@auth/express/providers/coinbase"
 import Discord from "@auth/express/providers/discord"
@@ -40,6 +41,7 @@ export const authConfig = {
       clientSecret: "dummy",
       issuer: process.env.AUTH_BOXYHQ_SAML_ISSUER,
     }),
+    Clerk,
     Cognito,
     Coinbase,
     Discord,

apps/examples/nextjs-pages/auth.ts

@@ -9,6 +9,7 @@ import NextAuth from "next-auth"
 // import Box from "next-auth/providers/box"
 // import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
 // import Bungie from "next-auth/providers/bungie"
+// import Clerk from "next-auth/providers/clerk"
 // import Cognito from "next-auth/providers/cognito"
 // import Coinbase from "next-auth/providers/coinbase"
 // import Discord from "next-auth/providers/discord"
@@ -78,6 +79,7 @@ export const config = {
     // Box,
     // BoxyHQSAML,
     // Bungie,
+    // Clerk
     // Cognito,
     // Coinbase,
     // Discord,

apps/examples/nextjs/auth.ts

@@ -6,6 +6,7 @@ import Auth0 from "next-auth/providers/auth0"
 import AzureB2C from "next-auth/providers/azure-ad-b2c"
 import BankIDNorway from "next-auth/providers/bankid-no"
 import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
+import Clerk from "next-auth/providers/clerk"
 import Cognito from "next-auth/providers/cognito"
 import Coinbase from "next-auth/providers/coinbase"
 import Discord from "next-auth/providers/discord"
@@ -62,6 +63,7 @@ const config = {
       clientSecret: "dummy",
       issuer: process.env.AUTH_BOXYHQ_SAML_ISSUER,
     }),
+    Clerk,
     Cognito,
     Coinbase,
     Discord,

apps/examples/sveltekit/src/auth.ts

@@ -3,6 +3,7 @@ import Apple from "@auth/sveltekit/providers/apple"
 import Auth0 from "@auth/sveltekit/providers/auth0"
 import AzureB2C from "@auth/sveltekit/providers/azure-ad-b2c"
 import BoxyHQSAML from "@auth/sveltekit/providers/boxyhq-saml"
+import Clerk from "@auth/sveltekit/providers/clerk"
 import Cognito from "@auth/sveltekit/providers/cognito"
 import Coinbase from "@auth/sveltekit/providers/coinbase"
 import Discord from "@auth/sveltekit/providers/discord"
@@ -42,6 +43,7 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
       clientSecret: "dummy",
       issuer: env.AUTH_BOXYHQ_SAML_ISSUER,
     }),
+    Clerk,
     Cognito,
     Coinbase,
     Discord,

apps/proxy/api/[auth].ts

@@ -3,6 +3,7 @@ import Apple from "@auth/core/providers/apple"
 import Auth0 from "@auth/core/providers/auth0"
 import AzureB2C from "@auth/core/providers/azure-ad-b2c"
 import BoxyHQSAML from "@auth/core/providers/boxyhq-saml"
+import Clerk from "@auth/core/providers/clerk"
 import Cognito from "@auth/core/providers/cognito"
 import Coinbase from "@auth/core/providers/coinbase"
 import Discord from "@auth/core/providers/discord"
@@ -40,6 +41,7 @@ const authConfig: AuthConfig = {
       clientSecret: "dummy",
       issuer: process.env.AUTH_BOXYHQ_SAML_ISSUER,
     }),
+    Clerk,
     Cognito,
     Coinbase,
     Discord,

docs/pages/data/manifest.json

@@ -62,6 +62,7 @@
     "box": "Box",
     "boxyhq-saml": "BoxyHQ SAML",
     "bungie": "Bungie",
+    "clerk": "Clerk",
     "clickup": "ClickUp",
     "cognito": "Cognito",
     "coinbase": "Coinbase",

docs/pages/getting-started/providers/clerk.mdx

@@ -0,0 +1,77 @@
+import { Code } from "@/components/Code"
+
+<img align="right" src="/img/providers/clerk.svg" width="64" height="64" />
+
+# Clerk Provider
+
+## Resources
+
+- [Clerk documentation](https://clerk.com/docs/advanced-usage/clerk-idp)
+
+## Setup
+
+### Callback URL
+
+<Code>
+  <Code.Next>
+
+```bash
+https://example.com/api/auth/callback/clerk
+```
+
+  </Code.Next>
+  <Code.Svelte>
+
+```bash
+https://example.com/auth/callback/clerk
+```
+
+  </Code.Svelte>
+</Code>
+
+### Environment Variables
+
+```
+AUTH_CLERK_ID
+AUTH_CLERK_SECRET
+AUTH_CLERK_URL
+```
+
+### Configuration
+
+<Code>
+  <Code.Next>
+
+```ts filename="/auth.ts"
+import NextAuth from "next-auth"
+import Clerk from "next-auth/providers/clerk"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [Clerk],
+})
+```
+
+  </Code.Next>
+  <Code.Svelte>
+
+```ts filename="/src/auth.ts"
+import { SvelteKitAuth } from "@auth/sveltekit"
+import Clerk from "@auth/sveltekit/providers/clerk"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+  providers: [Clerk],
+})
+```
+
+  </Code.Svelte>
+  <Code.Express>
+
+```ts filename="/src/app.ts"
+import { ExpressAuth } from "@auth/express"
+import Clerk from "@auth/express/providers/clerk"
+
+app.use("/auth/*", ExpressAuth({ providers: [Clerk] }))
+```
+
+  </Code.Express>
+</Code>

packages/core/src/providers/clerk.ts

@@ -0,0 +1,121 @@
+/**
+ * <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+ * <span style={{fontSize: "1.35rem" }}>
+ *  Built-in sign in with <b>Clerk</b> integration.
+ * </span>
+ * <a href="https://clerk.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/clerk.svg" width="24"/>
+ * </a>
+ * </div>
+ *
+ * @module providers/clerk
+ */
+import type { OAuthConfig, OAuthUserConfig } from "./index.js"
+
+/** @see [Get the authenticated user](https://clerk.com/docs/reference/frontend-api/tag/OAuth2-Identify-Provider#operation/getOAuthUserInfo). */
+export interface ClerkProfile {
+  object: "string"
+  instance_id: "string"
+  email: "string"
+  email_verified: boolean
+  family_name: "string"
+  given_name: "string"
+  name: "string"
+  username: "string"
+  picture: "string"
+  user_id: "string"
+  public_metadata?: any
+  private_metadata?: any
+  unsafe_metadata?: any
+}
+
+/**
+ * Add Clerk login to your page.
+ *
+ * ### Setup
+ *
+ * #### Callback URL
+ * ```
+ * https://example.com/api/auth/callback/clerk
+ * ```
+ *
+ * #### Configuration
+ * ```ts
+ * import { Auth } from "@auth/core"
+ * import Clerk from "@auth/core/providers/clerk"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     Clerk({
+ *       clientId: CLERK_CLIENT_ID,
+ *       clientSecret: CLERK_CLIENT_SECRET,
+ *       baseUrl: CLERK_BASE_URL
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [Clerk - Use Clerk as an OAuth 2 Provider](https://clerk.com/docs/advanced-usage/clerk-idp)
+ *
+ * ### Notes
+ *
+ * By default, Auth.js assumes that the Clerk provider is
+ * based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
+ *
+ * :::tip
+ *
+ * The Clerk provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/clerk.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ *
+ * :::
+ *
+ * :::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 Clerk(
+  config: OAuthUserConfig<ClerkProfile> & {
+    baseUrl: string
+  }
+): OAuthConfig<ClerkProfile> {
+  const baseUrl = config.baseUrl
+
+  return {
+    id: "clerk",
+    name: "Clerk",
+    type: "oauth",
+    wellKnown: `${baseUrl}/.well-known/openid-configuration`,
+    authorization: {
+      url: `${baseUrl}/oauth/authorize`,
+      params: { scope: "email profile" },
+    },
+    token: `${baseUrl}/oauth/token`,
+    userinfo: {
+      url: `${baseUrl}/oauth/userinfo`,
+      async request({ tokens, provider }) {
+        const profile = await fetch(provider.userinfo?.url as URL, {
+          headers: {
+            Authorization: `Bearer ${tokens.access_token}`,
+            "User-Agent": "authjs",
+          },
+        }).then(async (res) => await res.json())
+
+        return profile
+      },
+    },
+    profile(profile) {
+      return profile
+    },
+    style: { bg: "#6C47FF", text: "#fff" },
+    options: config,
+  }
+}