Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I am going to add to what @Sarkis said.

    This error came as a consequence of my misunderstanding on how Next.js work on routes handlers and API routes, apparently, the documentations of NextAuth said here, that's api folder is not deemed as neccessary folder to create for route.ts, but it has been kept as required, here is the screenshot: enter image description here

    From my understanding, I thought the devs keeping it required was a personal choice, until I started reading about Next Route Handlers. Previously before app router came, there was Next API Route for page routers.

    Thus, I fixed this issue of getting 404 page by adding api folder above (as a parent of) [...nextauth] folder.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search