How to create a Vercel OAuth integration for account authentication?

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!

Vercel Staff

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

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
            };

Vercel Staff

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?

No not yet.

Will check it out thank you.

reply to #4

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.)

Vercel Staff

Have you seen the integration creation docs?

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

https://vercel.com/docs/integrations/create-integration

vercel.com

Create an Integration

Learn how to create and manage your own integration for internal or public use with Vercel.

Thank you will be checking this out.

reply to #7

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

Vercel Staff

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.

https://vercel.com/docs/integrations

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!

This topic is closed. It no longer accepts new replies.

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 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!

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 };