Unable to Vercel Deploy to Prod with Vite React and Convex Auth
Hi Convex support team! I’ve been building a project with Convex and Vite with Convex Auth (Resend) that is working great locally, but I have been running into issues in trying to deploy to Prod with Vercel.
Can someone please help me understand:
1. What are the Vercel environment variables that are needed? Is it just the Convex Prod Deployment Key? Or do I also need to specify the Convex URL eg -donkey-88…?
2. What are the Convex Prod environment variables needed? I currently have the Resend API Key there. Is that correct? Anything else needed eg for my OpenAI calls in my app?
3. How should my auth.ts file be written, in the codebase? Should it be pointing at a Convex Env variable? Or a .env that is exposed with eg VITE_SITE_URL?
4. How should my ConvexReactClient be written, in the codebase? Should that be hardcoded to the Prod URL of my Prod Convex deployment?
Thank you!
Thank you!
7 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
Linking to all the relevant docs:
* https://docs.convex.dev/production/hosting/vercel
* https://labs.convex.dev/auth/production
re: Convex environment variables like resend or OpenAI API keys, you'll want to make sure these are set in your production deployment (
npx convex dashboard --prod should give you a link)
In general, there should be no Convex URLs hardcoded in your application code (you want things like new ConvexReactClient(import.meta.env.VITE_CONVEX_URL) as opposed to new ConvexReactClient("https://happy-animal-123.convex.cloud"))
Can you share the details of the issues you're running into (error messages, what configuration you have in Vercel, what configuration you have in the Convex dashboard)?Using Convex with Vercel | Convex Developer Hub
Host your frontend on Vercel and your backend on Convex.
Production - Convex Auth
Authentication library for your Convex backend
Hey Sarah, thanks for getting back to me!
Here is the error that I'm getting in my prod Vercel endpoint, after I try logging in. They're a lot of
Here are my:
1. Prod Convex Environment variables.
2. Deployed Vercel Project Environment variables
3. auth.ts file where I'm initializing the ConvexAuth with process.env.SITE_URL, which is my Vercel's Prod URL
4. auth.config.ts file where I'm using process.env.CONVEX_SITE_URL
5. main.tsx file where I'm using import.meta.env.VITE_CONVEX_URL
@sshader is this the right combo and places of URLs to be using? Or should I be stardardizing to a single SITE_URL across the board?
main.tsx file
Cool thanks for all the details -- this all sounds correct so far, but one thing I'm noticing is you're missing a
JWKS env var in your Convex production deployment (if you took the JWT_PRIVATE_KEY from a dev deployment, you can also copy the JWKS from there, or alternatively npx @convex-dev/auth --prod should prompt your through it)
Also to clarify all the different URLs at play:
VITE_CONVEX_URL -- this corresponds to https://happy-animal-123.convex.cloud, it's different for dev vs. prod, and npx convex dev / npx convex deploy generally handles setting this to the correct value (npx convex dev does it by reading the CONVEX_DEPLOYMENT env var, npx convex deploy does it by reading the CONVEX_DEPLOY_KEY)
CONVEX_SITE_URL -- this is https://happy-animal-123.convex.site (.site vs. .cloud) and it's set automatically in all Convex functions. For Convex Auth, you're using your Convex deployment as an auth provider, so this ensures that your prod application uses your prod deployment as its auth provider.
SITE_URL -- this is usually something like http://localhost:5173 for dev, and https://my-cool-app.vercel.app for prod, and it's used by Convex Auth to decide where to redirect to in an OAuth flow -- it should match the URL of the frontend you use with that Convex deployment. The naming is a little unfortunate since it's so similar to CONVEX_SITE_URL@sshader Thanks for all the details Sarah! I think it's working a bit better now, in that at least it tries to do an authentication. However, I'm now getting this error after I open the magic link from my email. What does it mean that my Auth Config needs to get updated? Is it that one of my variables is set incorrectly?
