Next.js Discord

Discord Forum

NextAuth 404 not found route on sign in to google provider

Unanswered
HOTCONQUEROR posted this in #help-forum
Open in Discord
HOTCONQUEROROP
/auth/[...nextauth]/route.ts path:


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?

20 Replies

@HOTCONQUEROR `/auth/[...nextauth]/route.ts` path: 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: 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?
@ts-ignore
It should be /api/auth/[...nextauth]/route.ts
@@ts-ignore It should be `/api/auth/[...nextauth]/route.ts`
HOTCONQUEROROP
as far as i know from docs api path is optional.
@ts-ignore
I don't think it is
@@ts-ignore I don't think it is
HOTCONQUEROROP
read the box down there
@ts-ignore
then you need to find a way to tell next auth where to redirect
@@ts-ignore then you need to find a way to tell next auth where to redirect
HOTCONQUEROROP
already written in docs, you have to set NEXTAUTH_URL env variable in .env file to your localhost or website on production.
this is supposed to redirect you wherever you want once you click Signin button.
@ts-ignore
the SessionProvider has a basePath prop
B33fb0n3
@HOTCONQUEROR why don't you just add /api and everything works like expected then?
@B33fb0n3 <@995168684450517002> why don't you just add /api and everything works like expected then?
HOTCONQUEROROP
why did the docs lie about the fact that api is optional, is a better question.
considering this is a minimal code example.
@HOTCONQUEROR why did the docs lie about the fact that `api` is optional, is a better question.
B33fb0n3
Show me official docs from nextjs (not from a third party) that says this
@B33fb0n3 Show me *official docs* from nextjs (not from a third party) that says this
HOTCONQUEROROP
bro, i am using nextauth library

nextauth library documentation website said this.
B33fb0n3
yea, next-auth is a third party library. Not offical nextjs. These docs are official docs for me: https://nextjs.org/docs
HOTCONQUEROROP
oh man.
well then, next is third party library/framework for react, the official docs for me is react docs
https://next-auth.js.org

the issue is related to NextAuth library officially, you read from NextAuth official documentations.
Asian black bear
While it's optional to have the /api prefix in the app router next-auth expects it to be there. And it clearly says this in your original screenshot.