Issue with environment variables that are correctly set

Hi. Login with Google works locally, but doesn't work in production. I receive an error: "Access blocked: Authorization Error. The OAuth client was not found. Error 401: invalid_client"

Url: https://accounts.google.com/signin/oauth/error/v2?authError=Cg5pbnZhbGlkX2NsaWVudBIfVGhlIE9BdXRoIGNsaWVudCB3YXMgbm90IGZvdW5kLiCRAw%3D%3D&client_id=undefined&flowName=GeneralOAuthFlow

client_id=undefined - for some reason

I set up env variables in the Settings > Environment Variables: AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET

I checked a few times whether all the values are correct. I also redeployed the last branch (google-auth) a few times when I tried to solve the problem. Didn't help.

Google console:

Authorized JavaScript origins: https://personal-task-manager-nine.vercel.app http://localhost:3000
Authorized redirect URIs: https://personal-task-manager-nine.vercel.app/api/auth/callback/google http://localhost:3000/api/auth/callback/google

I use Auth.js and that's how the env variables look in the code: Google({ clientId: process.env.AUTH_GOOGLE_ID, clientSecret: process.env.AUTH_GOOGLE_SECRET, })

Please, help me to solve this problem. Thank you.

Hi ! Welcome to the Vercel Community 😊

Here are a few steps you can try to troubleshoot the issue:

1. Verify Your Environment Variables

Let’s make sure your environment variables are set up correctly in Vercel:

Head to your Vercel dashboard and select your project.
Go to Settings > Environment Variables.
Double-check that AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET are entered correctly. Watch out for any extra spaces before or after the values!

2. Redeploy with Updated Variables

After verifying the environment variables:

Open the Deployments tab in your Vercel dashboard.
Find your latest deployment.
Click the three dots (...) next to it and select Redeploy.

This ensures the updated environment variables are applied.

3. Log Environment Variable Access

To confirm your app is accessing these variables, you can temporarily log them in your code. (Be cautious not to expose sensitive data in production logs!) Here's an example:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

console.log("AUTH_GOOGLE_ID:", process.env.AUTH_GOOGLE_ID);
console.log(
  "AUTH_GOOGLE_SECRET length:",
  process.env.AUTH_GOOGLE_SECRET ? process.env.AUTH_GOOGLE_SECRET.length : 0
);

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.AUTH_GOOGLE_ID,
      clientSecret: process.env.AUTH_GOOGLE_SECRET,
    }),
  ],
  // other configurations
});

Deploy this change, then check your Vercel logs to see if the variables are being read correctly.

4. Double-Check Your Google Console Configuration

Make sure everything is set up properly in the Google Cloud Console:

Go to APIs & Services > Credentials in your Google Cloud project.
Click on your OAuth 2.0 Client ID.
Verify the Authorized JavaScript origins and Authorized redirect URIs match your app.

Double-check for typos or extra spaces here too!

5. Ensure `NEXTAUTH_URL` Is Set

You’ll need to set the NEXTAUTH_URL environment variable in your Vercel project. This should be your app’s production URL, like so:

NEXTAUTH_URL=https://personal-task-manager-nine.vercel.app

6. Confirm Next.js Configuration

Make sure your next.config.js file is set up to use these environment variables:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
    AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
  },
};

module.exports = nextConfig;

7. Clear Any Caching Issues

Sometimes, Vercel caches old environment variables. To clear it:

Go to your project settings in Vercel.
Under Build & Development Settings, click Clear Build Cache.
Redeploy your app again.

Let us know how it goes, and feel free to ask if you run into any issues!

Thank you so much （＾ω＾）

I double checked all the values in the Settings > Environmental variables and in the Google Console.

Then I added this to my next.config.js:

reactStrictMode: true,
  env: {
    AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
    AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
  },

I added NEXTAUTH_URL with different values to different environments. http://localhost:3000 for my local variable and https://personal-task-manager-nine.vercel.app/ for my production variable - Settings > Environmental variables.

After that I pushed the changes and saw that everything started to work

Thank you again.

I'm glad it worked out for you, !

Hi. Login with Google works locally, but doesn't work in production. I receive an error: "Access blocked: Authorization Error. The OAuth client was not found. Error 401: invalid_client"

Url: https://accounts.google.com/signin/oauth/error/v2?authError=Cg5pbnZhbGlkX2NsaWVudBIfVGhlIE9BdXRoIGNsaWVudCB3YXMgbm90IGZvdW5kLiCRAw%3D%3D&client_id=undefined&flowName=GeneralOAuthFlow

client_id=undefined - for some reason

I set up env variables in the Settings > Environment Variables: AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET

I checked a few times whether all the values are correct. I also redeployed the last branch (google-auth) a few times when I tried to solve the problem. Didn't help.

Google console:

Authorized JavaScript origins: https://personal-task-manager-nine.vercel.app http://localhost:3000
Authorized redirect URIs: https://personal-task-manager-nine.vercel.app/api/auth/callback/google http://localhost:3000/api/auth/callback/google

I use Auth.js and that's how the env variables look in the code: Google({ clientId: process.env.AUTH_GOOGLE_ID, clientSecret: process.env.AUTH_GOOGLE_SECRET, })

Please, help me to solve this problem. Thank you.

Hi ! Welcome to the Vercel Community 😊

Here are a few steps you can try to troubleshoot the issue:

1. Verify Your Environment Variables

Let’s make sure your environment variables are set up correctly in Vercel:

Head to your Vercel dashboard and select your project.
Go to Settings > Environment Variables.
Double-check that AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET are entered correctly. Watch out for any extra spaces before or after the values!

2. Redeploy with Updated Variables

After verifying the environment variables:

Open the Deployments tab in your Vercel dashboard.
Find your latest deployment.
Click the three dots (...) next to it and select Redeploy.

This ensures the updated environment variables are applied.

3. Log Environment Variable Access

To confirm your app is accessing these variables, you can temporarily log them in your code. (Be cautious not to expose sensitive data in production logs!) Here's an example:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

console.log("AUTH_GOOGLE_ID:", process.env.AUTH_GOOGLE_ID);
console.log(
  "AUTH_GOOGLE_SECRET length:",
  process.env.AUTH_GOOGLE_SECRET ? process.env.AUTH_GOOGLE_SECRET.length : 0
);

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.AUTH_GOOGLE_ID,
      clientSecret: process.env.AUTH_GOOGLE_SECRET,
    }),
  ],
  // other configurations
});

Deploy this change, then check your Vercel logs to see if the variables are being read correctly.

4. Double-Check Your Google Console Configuration

Make sure everything is set up properly in the Google Cloud Console:

Go to APIs & Services > Credentials in your Google Cloud project.
Click on your OAuth 2.0 Client ID.
Verify the Authorized JavaScript origins and Authorized redirect URIs match your app.

Double-check for typos or extra spaces here too!

5. Ensure `NEXTAUTH_URL` Is Set

You’ll need to set the NEXTAUTH_URL environment variable in your Vercel project. This should be your app’s production URL, like so:

NEXTAUTH_URL=https://personal-task-manager-nine.vercel.app

6. Confirm Next.js Configuration

Make sure your next.config.js file is set up to use these environment variables:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
    AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
  },
};

module.exports = nextConfig;

7. Clear Any Caching Issues

Sometimes, Vercel caches old environment variables. To clear it:

Go to your project settings in Vercel.
Under Build & Development Settings, click Clear Build Cache.
Redeploy your app again.

Let us know how it goes, and feel free to ask if you run into any issues!

Thank you so much （＾ω＾）

I double checked all the values in the Settings > Environmental variables and in the Google Console.

Then I added this to my next.config.js:

reactStrictMode: true,
  env: {
    AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
    AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
  },

After that I pushed the changes and saw that everything started to work

Thank you again.

I'm glad it worked out for you, !

Issue with environment variables that are correctly set

1. Verify Your Environment Variables

2. Redeploy with Updated Variables

3. Log Environment Variable Access

4. Double-Check Your Google Console Configuration

5. Ensure NEXTAUTH_URL Is Set

6. Confirm Next.js Configuration

7. Clear Any Caching Issues

Issue with environment variables that are correctly set

1. Verify Your Environment Variables

2. Redeploy with Updated Variables

3. Log Environment Variable Access

4. Double-Check Your Google Console Configuration

5. Ensure NEXTAUTH_URL Is Set

6. Confirm Next.js Configuration

7. Clear Any Caching Issues

5. Ensure `NEXTAUTH_URL` Is Set

5. Ensure `NEXTAUTH_URL` Is Set