I am currently working on implementing Google social login using next-auth in a Next.js application. However, I am encountering a problem where a TypeError occurs, stating “Cannot destructure property ‘nextauth’ of ‘req.query’ as it is undefined,” which results in a 500 Internal Server Error.
Here is the Javascript code I am using:
// api/auth/[...nextauth]/route.js
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
};
export async function GET(req) {
try {
return NextAuth(req, authOptions);
} catch (error) {
console.error('Error handling GET request:', error);
return new Response('Internal Server Error', { status: 500 });
}
}
export async function POST(req) {
try {
return NextAuth(req, authOptions);
} catch (error) {
console.error('Error handling POST request:', error);
return new Response('Internal Server Error', { status: 500 });
}
}
Problem:
I am receiving an error indicating that req.query is undefined when NextAuth is called. This error leads to a 500 Internal Server Error, and I am unable to proceed with authentication.
Questions:
How should I correctly handle requests with NextAuth in a Next.js application?
Are there specific configurations or patterns I should follow for integrating next-auth with Google authentication?
Any guidance or solutions would be greatly appreciated. Thank you!
I wanted the users to be redirected to the Google social login page.