How to create a Vercel OAuth integration for account authentication?

Discussions
1

Hi everyone,

I’m trying to build an integration that allows users to authenticate with their Vercel accounts. The goal is to enable them to deploy applications to their own Vercel accounts through my service.

I understand that I need to create a Vercel OAuth integration to achieve this and I have created an integration. The process to do so was quite frustrating, especially adding a very specifically sized image - otherwise no client id or secret.

I then got the client_id and secret and trying to auth in development is returning a “there was a configuration error” invalid client_id. But the id is copied from the integration?

I’d appreciate any guidance, examples, or best practices you can share. Links to relevant documentation or tutorials would also be very helpful.

It is also very hard to find a resource on this, as so much content has been done for creating Nextjs apps with auth, etc. Which this is not.

Thanks in advance for your help!

2

Are you talking about creating an integration, or is this about something else?

3

Well, I am not sure.

I made an integration but then during the authentication flow I get “invalid clientId” but the clientId is correct from the integration I created. Can’t see any other logs.

So maybe I should get the clientid and secret another way?

I’m just a bit lost as can’t find a resource on my specific use-case but it seems like a pretty standard one. Can you share a resource to help with my use-case?

I would like to use Vercel OAuth integration so users can auth their account and then deploy projects their connected vercel through my service.

Just to share some code, I am doing this.

            console.log("Client ID:", clientId);

            if (!clientId) {
                throw new TRPCError({
                    code: 'INTERNAL_SERVER_ERROR',
                    message: 'Missing Vercel client ID'
                });
            }

            const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/vercel/callback`;
            console.log("Redirect URI:", redirectUri);

            const scope = "deployments:write projects:write";

            // Generate a random state for security
            const state = Math.random().toString(36).substring(2);

            const authUrl = `https://vercel.com/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
            console.log("Auth URL:", authUrl);

            return {
                url: authUrl,
                state
            };
4

It sounds like you’re trying to create a native integration. In that case, you would first need to sign up to be a native integration provider. Did you already do that?

5

No not yet.

Will check it out thank you.

6

I’m having the same problem. So, going to “projects/~/integrations/console”, clicking on “Create”, and getting an ID and SECRET isn’t the way to do it?

I also need the user to authorize my web app to create projects, deploy, and add environment variables on their behalf.

By the way, yes, the process is absurdly annoying. (The fact that the image must be an exact size is just ridiculous.)

1 Like
7

Have you seen the integration creation docs?

This page covers the steps needed and have additional info about the native integration requirements:

8

Thank you will be checking this out.

9

This doc is honestly super confusing and your answer also isn’t very helpful. When discussing the difference between native and ?(what even is the other type integration called?) this doc is quite confusing and doesn’t at all spell out the difference clearly. As these two users already stated, a common use case is simply to be able to call vercel api to automate the cloud deployment of an app. The doc on the other hand talk about things that are not relevant but misses this point entirely.

The error is also confusing. If you follow the exact steps in this doc to create an integration all the way until it says you have created an integration and shows in your dashboard, then try to actually oauth, it simply says

There was a configuration error
Invalid client_id
Please contact the app owner.

When the client_id is exactly the value in the integration dashboard. i have successfully created integrations with many service providers previously (github, atlassian, supabase, glean, notion, linear etc), and vercel is so far is the most confusing :frowning:

10

There are native integrations and connectable accounts with Vercel. The difference is mostly in the way accounts are connected or created.

Connectable accounts let users connect their Vercel projects with an existing account on a third-party platform.

Native integrations create a two-way connection between a Vercel account and third-party provider so an additional account isn’t needed and billing can be managed through a single account.

Notes

  • You must sign up to be a native integration provider at vercel.com/marketplace-providers if you’re interested in creating that type of integration
  • When creating an access token, make sure you’ve set up the POST request correctly with all required values in the form of application/x-www-form-urlencoded
  • Start by reading the top level Integrations overview, then read through the child pages for documentation about specific steps

I hope that makes sense!