I’m encountering an issue with Next-auth Google authentication on my localhost development setup. I have separate instances for the admin side (localhost:3000) and client side (localhost:3001) of my e-commerce website.

The problem specifically occurs when I attempt Google authentication on the client side (localhost:3001). I’m receiving an error message stating “access blocked.”

Callback URLs:
Admin Side: http://localhost:3000/api/auth/callback/google
Client Side: http://localhost:3001/api/auth/callback/google
Next-auth Configuration:
Admin Side localhost:3000:

// Admin Side Configuration
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
  ],
  // Other configurations...
})

Client Side (localhost:3001)

// Client Side Configuration
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
  ],
  // Other configurations...
})

I’ve verified that the GOOGLE_ID and GOOGLE_SECRET environment variables are correctly set for both environments.
The Google Developer Console has the correct callback URLs configured for both localhost:3000 and localhost:3001.