Encountering a Next-auth Google authentication issue on my localhost development setup. Admin side (localhost:3000) and client side (localhost:3001) of e-commerce website are separate instances.
Error message "access blocked" when trying Google authentication on client side. Here are the Callback URLs:
- Admin Side:
http://localhost:3000/api/auth/callback/google - Client Side:
http://localhost:3001/api/auth/callback/google
Next-auth Configuration for 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...
})
Configuration for 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...
})
Confirmed GOOGLE_ID and GOOGLE_SECRET environment variables are correctly set for both environments. Google Developer Console has correct callback URLs for localhost:3000 and localhost:3001. View image here