#Invalid client in prod using vercel

18 messages · Page 1 of 1 (latest)

torn urchin
#

Im using convex auth and getting invalid client in production but it works fine locally. Note im using vercel

short lilyBOT
#

Hi @torn urchin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The "invalid client" error in production with Convex Auth (when using Vercel) is commonly caused by a mismatch or misconfiguration of environment variables between your development and production environments. Here are the key steps and checks based on the knowledge sources:

  1. Separate Environment Variables for Production:
    Make sure you have set up the correct environment variables for your production deployment in both the Convex dashboard and Vercel. For authentication providers (like GitHub, Auth0, Clerk, etc.), you need to use production-specific client IDs, secrets, and URLs. These should be different from your development values and must be set in the Convex dashboard for your production deployment, not just in Vercel or your local .env files. For example, for Auth0 or Clerk, you should set the relevant variables (like AUTH0_CLIENT_ID, CLERK_FRONTEND_API_URL, etc.) in the Convex dashboard under your production deployment, and also update your frontend environment variables in Vercel as needed Configuring dev and prod tenants (Auth0), Configuring dev and prod instances (Clerk).
#

  1. Run the Convex Auth Setup Script for Production:
    If you haven't already, run the Convex Auth setup script with the --prod flag to ensure all necessary environment variables are set for your production deployment:

    npx @convex-dev/auth --prod

    This will guide you through setting up the required environment variables for production in the Convex dashboard ConvexAuth Env Variable related Error in Production, Sign in & sign up work on cloud dev, error on production.

  2. Check for Correct Client IDs/Secrets:
    Double-check that your production environment is using the correct client ID and secret for your authentication provider. For example, if you are using GitHub OAuth, make sure the AUTH_GITHUB_ID and AUTH_GITHUB_SECRET in your Convex production environment match the credentials for your production GitHub OAuth app, not your development app Convext Auth + Vercel + Github: "The redirect_uri is not associated with this application".

  3. Verify Callback URLs:
    Ensure that the callback URLs registered with your authentication provider (e.g., GitHub, Auth0, Clerk) match your production Convex deployment URL (e.g., <https://<your-app>.convex.site>), not your development or localhost URLs.

  4. Check for Typos or Formatting Issues:
    Sometimes, issues arise from typos or incorrect formatting in environment variables, especially for sensitive values like private keys or client secrets. Compare your dev and prod values to ensure consistency ConvexAuth Env Variable related Error in Production.

#

If you follow these steps and ensure all environment variables are correctly set for production in both Convex and Vercel, the "invalid client" error should be resolved. If the issue persists, try printing out your environment variables in both environments to spot any discrepancies.

If you need to check the current values in Convex, you can use:

npx convex env get <ENV_VAR_NAME> --prod

to verify the production values.

Let me know if you need more specific guidance for your authentication provider!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@torn urchin Kapa.ai is still learning and improving, please let me know how I did by reacting below.

torn urchin
#

@short lily there is no AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET when i specify prod, there is in dev tho

short lilyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

If you do not see AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET set in your Convex production deployment, but they are present in your dev deployment, this is the likely cause of your "invalid client" error in production.

Each Convex deployment (dev and prod) has its own set of environment variables. You must manually set the Google OAuth credentials for your production deployment in the Convex dashboard or via the CLI. These variables are not automatically copied from dev to prod.

To fix this:

  1. Obtain your production Google OAuth credentials (Client ID and Secret) from the Google Cloud Console. These should be from a Google OAuth app configured for your production URLs.

  2. Set the environment variables in your Convex production deployment:

    You can do this in two ways:

    • Via the Convex dashboard:
      Go to your production deployment in the Convex dashboard, navigate to Settings → Environment Variables, and add AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET with your production values.

    • Via the CLI:

      npx convex env set AUTH_GOOGLE_ID <your-production-google-client-id> --prod
npx convex env set AUTH_GOOGLE_SECRET <your-production-google-client-secret> --prod

  3. Deploy your app again if needed.

This separation is intentional, as described in the docs:

Since environment variables are set per-deployment, you can use different values for the same key in dev and prod deployments.
Production: Environment Variables

#

And for OAuth specifically:

You will have to create a separate "app" on the third-party dashboard for each environment, and configure the callback URL and environment variables accordingly.
OAuth Production Setup

Summary:
You need to manually add AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET to your Convex production deployment. They are not copied from dev automatically. This is required for Google OAuth to work in production.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@torn urchin Kapa.ai is still learning and improving, please let me know how I did by reacting below.

torn urchin
#

@short lily how do i deploy?

short lilyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To deploy your Convex app to production, you should use the following command in your project directory:

npx convex deploy

This command will push your Convex functions and configuration to your production deployment. If you are using a CI/CD provider like Vercel or Netlify, you typically set the CONVEX_DEPLOY_KEY environment variable in your hosting provider, and the deploy command will use that key to target your production deployment. The deploy process will also run your frontend build if you specify it with the --cmd flag, for example:

npx convex deploy --cmd "npm run build"

For more details on deploying with different hosting providers, see the Convex production deployment documentation and CLI deploy command reference.

If you are deploying from your local machine, just running npx convex deploy will prompt you for confirmation and then deploy to your production deployment in the same project as your configured development deployment.
Project Configuration

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@torn urchin Kapa.ai is still learning and improving, please let me know how I did by reacting below.

torn urchin
#

@short lily now i get this error
Error 400: redirect_uri_mismatch

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console.
Request details: redirect_uri=https://warmhearted-opossum-569.convex.site/api/auth/callback/google flowName=GeneralOAuthFlow
Related developer documentation

Alara | Productivity

A voice-first productivity platform that acts as your trusted thinking partner, helping you navigate daily challenges through conversation rather than complexity.

short lilyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The error redirect_uri_mismatch means that the redirect URI being used by Convex Auth (<https://warmhearted-opossum-569.convex.site/api/auth/callback/google>) is not registered in your Google Cloud Console for your OAuth client.

To fix this:

  1. Go to your Google Cloud Console and open the OAuth 2.0 Client IDs settings for your project.

  2. Add the following URI to your list of Authorized redirect URIs:

    <https://warmhearted-opossum-569.convex.site/api/auth/callback/google>

    This must match exactly, including protocol (https), domain, and path.

  3. Save your changes in the Google Cloud Console.

This is required because Google will only allow OAuth flows to redirect to URIs that are explicitly registered. This is described in the Convex Auth documentation:

The full Authorized redirect URI will be your actions URL plus api/auth/callback/google. So if your actions URL is <https://fast-horse-123.convex.site> then your callback URL will be:

<https://fast-horse-123.convex.site/api/auth/callback/google>

Google OAuth Instructions

Make sure you are using the correct production URL for your Convex deployment, not your dev or localhost URL. If you change your deployment or use a custom domain, you must update the redirect URI in Google Cloud Console accordingly.

If you are using a custom domain, see the advanced guide for details on setting CUSTOM_AUTH_SITE_URL and updating your OAuth provider config.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: