admin管理员组

文章数量:1327986

/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]: .png

/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/O9YArBI1.png
  • javascript
  • reactjs
  • typescript
  • next.js
  • next-auth
Share Improve this question edited Feb 13 at 20:23 Dalija Prasnikar♦ 28.6k46 gold badges94 silver badges175 bronze badges asked Dec 3, 2024 at 4:52 GhaziGhazi 8069 silver badges30 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 1

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.

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:

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.

本文标签： javascriptNextAuth 404 not found route on sign in to google providerStack Overflow

版权声明：本文标题：javascript - NextAuth 404 not found route on sign in to google provider - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742250149a2440601.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。