I am trying to set up authentication for my website using NextAuth with the Google provider. However, when I attempt to sign in via the admin page, it redirects me to a non-existing route and I get a 404 error.
I am unsure how to debug this issue, especially since no errors are logged server-side, and I cannot find any relevant logs for NextAuth.
Here is the code I’m using:
auth/[...nextauth]/route.ts
:import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
// Define your NextAuth options
const authOptions = {
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_API_SECRET!,
authorization: {
params: {
prompt: "consent",
access_type: "offline",
response_type: "code",
},
},
}),
],
// ...add more providers here
};
// Create the NextAuth handler
const handler = NextAuth(authOptions);
// Export the handler for both GET and POST requests
export const GET = handler;
export const POST = handler;
layout.ts
:import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { NextSessionProvider } from "./[admin]/page";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden`}
>
<NextSessionProvider>
{children}
</NextSessionProvider>
</body>
</html>
);
}
Whenever I try to sign in using the Google provider, I get redirected to a non-existent route and see a 404 error. I can't find any server-side logs or error messages related to NextAuth.
How can I debug this issue and resolve the 404 error?
404
s can be tricky but from my limited experience it's almost always an implementation error that's been unforeseen by the developer
Make sure the [...nextauth]
API route is defined correctly under pages/api/auth/
in your project. Misplacing this route results in a 404 error
because NextAuth relies on this endpoint to handle authentication flows.
You're explicitly initializing the clientId
and clientSecret
via the env variables suffix !
which bypasses potential TypeScript compiler errors. Double-check that your Google provider setup in the NextAuth configuration includes valid clientId
and clientSecret
, and ensure the redirect_uri aligns with your project preferences in the Google Developer Console.
Hope this helps.