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.