javascriptreactjsnext.jsnext-auth

404 Not Found on Sign-in with Google Provider in NextAuth

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>
  );
}

Issue:

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?

Solution

  • 404s can be tricky but from my limited experience it's almost always an implementation error that's been unforeseen by the developer

    Hope this helps.