Search code examples
javascriptreactjstypescriptnext.jsnext-auth

NextAuth 404 not found route on sign in to google provider

/auth/[...nextauth]/route.ts path

i am trying to set auth for my website, specifically using google provider, however whenever i sign in in the admin page, it redirect me to some non existing route, the code is below, I am not sure how to debug such problem considering that I can't find any source/log of errors for nextauth and it is not appearing on server side.

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 to the provider (aka google), i get an error 404 shown on screenshot
why and how to debug?


[![enter image description here][1]][1]


  [1]: https://i.sstatic.net/O9YArBI1.png
Solution

  • 404s 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.