diff --git a/docs/guides/configure/auth-strategies/social-connections/all-providers.mdx b/docs/guides/configure/auth-strategies/social-connections/all-providers.mdx index 75caeb3104..a75b102d2e 100644 --- a/docs/guides/configure/auth-strategies/social-connections/all-providers.mdx +++ b/docs/guides/configure/auth-strategies/social-connections/all-providers.mdx @@ -138,6 +138,12 @@ Clerk provides a wide range of social providers to ease your user's sign-up and --- + - [Vercel](/docs/guides/configure/auth-strategies/social-connections/vercel) + - Add Vercel as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/vercel.svg) + + --- + - [X/Twitter v2](/docs/guides/configure/auth-strategies/social-connections/x-twitter) - Add X (Twitter v2) as an authentication provider for your Clerk app. - ![](/docs/images/logos/auth_providers/x-twitter.svg) diff --git a/docs/guides/configure/auth-strategies/social-connections/vercel.mdx b/docs/guides/configure/auth-strategies/social-connections/vercel.mdx new file mode 100644 index 0000000000..15c72db77c --- /dev/null +++ b/docs/guides/configure/auth-strategies/social-connections/vercel.mdx @@ -0,0 +1,68 @@ +--- +title: Add Vercel as a social connection +description: Learn how to allow users to sign up and sign in to your Clerk app with their Vercel account using OAuth. + +--- + + + +Enabling OAuth with [Vercel](https://vercel.com/docs/sign-in-with-vercel) allows your users to sign up and sign in to your Clerk app with their Vercel account. + +## Configure for your development instance + +For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs—no other configuration is needed. + +1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/~/user-authentication/sso-connections) page. +1. Select **Add connection** and select **For all users**. +1. In the **Choose provider** dropdown, select **Vercel**. +1. Select **Add connection**. + +## Configure for your production instance + +For _production instances_, you must provide custom credentials. + +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/~/user-authentication/sso-connections) and one for your [Vercel team settings](https://vercel.com/account). + + + ### Enable Vercel as a social connection in Clerk + + 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/~/user-authentication/sso-connections) page. + 1. Select **Add connection** and choose **For all users**. + 1. In the **Choose provider** dropdown, select **Vercel**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Authorization Callback URL** somewhere secure. Keep the modal and page open. + + ### Create a Vercel app + + 1. In your [Vercel dashboard](https://vercel.com), navigate to your team's **Settings** tab. + 1. Scroll down and select **Apps**, then select **Create**. + 1. Enter a **Name** and **Slug** for your app. Optionally, upload a logo. + 1. Select **Save**. + 1. Save the **Client ID** somewhere secure. + 1. Scroll to **Authorization Callback URLs** and add the Authorization Callback URL you saved from the Clerk Dashboard. + 1. Navigate to the **Authentication** tab and under **Client Authentication Methods**, select the appropriate method for your app. For server-side applications, `client_secret_basic` or `client_secret_post` are recommended. + 1. Navigate to the **Permissions** tab and enable the required scopes: `openid`, `email`, `profile`, and `offline_access`. + 1. Select **Generate** to create a client secret. Save the **Client Secret** somewhere secure. + 1. Select **Save**. + + ### Set the Client ID and Client Secret in the Clerk Dashboard + + + + ### Test your connection + + + diff --git a/public/images/logos/auth_providers/vercel.svg b/public/images/logos/auth_providers/vercel.svg new file mode 100644 index 0000000000..72948d01a7 --- /dev/null +++ b/public/images/logos/auth_providers/vercel.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/build-docs.ts b/scripts/build-docs.ts index 4c91232738..3390c17a96 100644 --- a/scripts/build-docs.ts +++ b/scripts/build-docs.ts @@ -204,6 +204,7 @@ async function main() { 'guides/configure/auth-strategies/social-connections/twitter.mdx': ['doc-not-in-manifest'], 'guides/configure/auth-strategies/social-connections/x-twitter.mdx': ['doc-not-in-manifest'], 'guides/configure/auth-strategies/social-connections/xero.mdx': ['doc-not-in-manifest'], + 'guides/configure/auth-strategies/social-connections/vercel.mdx': ['doc-not-in-manifest'], 'guides/development/upgrading/upgrading-from-v2-to-v3.mdx': ['doc-not-in-manifest'], 'guides/organizations/create-orgs-for-users.mdx': ['doc-not-in-manifest'], 'getting-started/quickstart/setup-clerk.mdx': ['doc-not-in-manifest'],