Hi @vch-sh! 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!
