Skip to content

Latest commit

 

History

History
67 lines (50 loc) · 3.08 KB

File metadata and controls

67 lines (50 loc) · 3.08 KB
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.

<TutorialHero beforeYouStart={[ { title: "A Clerk app is required.", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", }, { title: "A Vercel account is required.", link: "https://vercel.com/signup", icon: "user-circle", }, ]} />

Enabling OAuth 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 page.
  2. Select Add connection and select For all users.
  3. In the Choose provider dropdown, select Vercel.
  4. 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 and one for your Vercel team settings.

### Enable Vercel as a social connection in Clerk
  1. In the Clerk Dashboard, navigate to the SSO connections page.
  2. Select Add connection and choose For all users.
  3. In the Choose provider dropdown, select Vercel.
  4. Ensure that both Enable for sign-up and sign-in and Use custom credentials are toggled on.
  5. Save the Authorization Callback URL somewhere secure. Keep the modal and page open.

Create a Vercel app

  1. In your Vercel dashboard, navigate to your team's Settings tab.
  2. Scroll down and select Apps, then select Create.
  3. Enter a Name and Slug for your app. Optionally, upload a logo.
  4. Select Save.
  5. Scroll to Authorization Callback URLs and add the Authorization Callback URL you saved from the Clerk Dashboard.
  6. Navigate to the Authentication tab and under Client Authentication Method, select the appropriate method for your app. For server-side applications, client_secret_basic or client_secret_post are recommended.
  7. Select Generate to create a client secret. Save the Client ID and Client Secret somewhere secure.
  8. Navigate to the Permissions tab and enable the required scopes: openid, email, profile, and offline_access.
  9. Select Save.

Set the Client ID and Client Secret in the Clerk Dashboard

Test your connection