|
| 1 | +--- |
| 2 | +title: Add Vercel as a social connection |
| 3 | +description: Learn how to allow users to sign up and sign in to your Clerk app with their Vercel account using OAuth. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +<TutorialHero |
| 8 | + beforeYouStart={[ |
| 9 | + { |
| 10 | + title: "A Clerk app is required.", |
| 11 | + link: "/docs/getting-started/quickstart/setup-clerk", |
| 12 | + icon: "clerk", |
| 13 | + }, |
| 14 | + { |
| 15 | + title: "A Vercel account is required.", |
| 16 | + link: "https://vercel.com/signup", |
| 17 | + icon: "user-circle", |
| 18 | + }, |
| 19 | + ]} |
| 20 | +/> |
| 21 | + |
| 22 | +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. |
| 23 | + |
| 24 | +## Configure for your development instance |
| 25 | + |
| 26 | +For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs—no other configuration is needed. |
| 27 | + |
| 28 | +1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/~/user-authentication/sso-connections) page. |
| 29 | +1. Select **Add connection** and select **For all users**. |
| 30 | +1. In the **Choose provider** dropdown, select **Vercel**. |
| 31 | +1. Select **Add connection**. |
| 32 | + |
| 33 | +## Configure for your production instance |
| 34 | + |
| 35 | +For _production instances_, you must provide custom credentials. |
| 36 | + |
| 37 | +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). |
| 38 | + |
| 39 | +<Steps> |
| 40 | + ### Enable Vercel as a social connection in Clerk |
| 41 | + |
| 42 | + 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/~/user-authentication/sso-connections) page. |
| 43 | + 1. Select **Add connection** and choose **For all users**. |
| 44 | + 1. In the **Choose provider** dropdown, select **Vercel**. |
| 45 | + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. |
| 46 | + 1. Save the **Authorization Callback URL** somewhere secure. Keep the modal and page open. |
| 47 | + |
| 48 | + ### Create a Vercel app |
| 49 | + |
| 50 | + 1. In your [Vercel dashboard](https://vercel.com), navigate to your team's **Settings** tab. |
| 51 | + 1. Scroll down and select **Apps**, then select **Create**. |
| 52 | + 1. Enter a **Name** and **Slug** for your app. Optionally, upload a logo. |
| 53 | + 1. Select **Save**. |
| 54 | + 1. Save the **Client ID** somewhere secure. |
| 55 | + 1. Scroll to **Authorization Callback URLs** and add the Authorization Callback URL you saved from the Clerk Dashboard. |
| 56 | + 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. |
| 57 | + 1. Navigate to the **Permissions** tab and enable the required scopes: `openid`, `email`, `profile`, and `offline_access`. |
| 58 | + 1. Select **Generate** to create a client secret. Save the **Client Secret** somewhere secure. |
| 59 | + 1. Select **Save**. |
| 60 | + |
| 61 | + ### Set the Client ID and Client Secret in the Clerk Dashboard |
| 62 | + |
| 63 | + <Include src="_partials/authentication/social-connections/set-client-id-secret" /> |
| 64 | + |
| 65 | + ### Test your connection |
| 66 | + |
| 67 | + <Include src="_partials/authentication/social-connections/test-your-connection" /> |
| 68 | +</Steps> |
0 commit comments