/api/auth/* gives me a 404 error

[uziiuzair]

Question 💬

Hi, I'm relatively new to coding in React.

I am using Next JS 13, and implemented Next Auth in my project. However, my API endpoints all show me a 404 error.

Here's the path I am using for [...nextauth].ts

/src/app/api/auth/[...nextauth].ts

Here's the code I am using in the above file:

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    CredentialsProvider({
      // The name to display on the sign in form (e.g. "Sign in with...")
      name: "Credentials",
      // `credentials` is used to generate a form on the sign in page.
      // You can specify which fields should be submitted, by adding keys to the `credentials` object.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        // Add logic here to look up the user from the credentials supplied
        const user = { id: "1", name: "J Smith", email: "jsmith@example.com" };

        if (user) {
          // Any object returned will be saved in `user` property of the JWT
          return user;
        } else {
          // If you return null then an error will be displayed advising the user to check their details.
          return null;

          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
        }
      },
    }),
  ],
};

export default NextAuth(authOptions);

Here's my next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
    fontLoaders: [
      { loader: "next/font/google", options: { subsets: ["latin"] } },
    ],
  },
};

module.exports = nextConfig;

Initially I assumed that the error was related to everything under the api folder, however upon creating a route.ts file under /api and /api/test I was able to rule that out.

Is there something wrong I am doing with the api and nextauth?

How to reproduce ☕️

Use NextAuth with NextJS 13

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[azeek21]

Hi, so this is connected to nextJs changing some concepts with version 13. I successfully reproduced your issue.

Next13 in their beta docs mention: API Routes have been replaced by Route Handlers for the app directory only. API Routes continue to be supported in pages.

So to get nexta-auth to work, I created the following folder schema
Link to screenshot of folder schema .
Note the pages folder which is INSIDE the src folder but OUTSIDE the app folder.
And inside [...nextauth].ts file pasted exact code of yours from above. Everything worked perfectly. you can navigate to http://localhost:3000/api/auth/signin to confirm.

About next13 supporting pages structure for API routes -> Next docs .

[balazsorban44]

This is not how you define a Route Handler with App Router. You can follow #6777 and the corresponding open issue. #6792

[divyapatel01]

So I faced the same issue and I was also using this /src/app/api/auth/[...nextauth].ts file structure. I changes it to /src/app/api/auth/[...nextauth]/route.ts and it solved the issue for me.

Instead of creating [...nextauth].ts file, I created a folder [...nextauth] and in that folder I created a route.ts file.

[JoseSleiter]

@azeek21 Tks, your solution its work for me.

DOC: https://nextjs.org/docs/app/building-your-application/routing#the-app-router

[phnessu4]

https://next-auth.js.org/configuration/initialization#route-handlers-app

Route Handlers (app/)
Next.js 13.2 introduced Route Handlers, the preferred way to handle REST-like requests in App Router (app/).

You can initialize NextAuth.js with a Route Handler too, very similar to API Routes.

/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth"

const handler = NextAuth({
...
})

export { handler as GET, handler as POST }

Internally, NextAuth.js detects that it is being initialized in a Route Handler (by understanding that it is passed a Web Request instance), and will return a handler that returns a Response instance. A Route Handler file expects you to export some named handler functions that handle a request and return a response. NextAuth.js needs the GET and POST handlers to function properly, so we export those two.

[Mohamedbeat]

@divyapatel01
if i didnt read this line in you reply :
/src/app/api/auth/[...nextauth]/route.ts

i would never notice that i didint make api folder

[sxs6596]

I'm new to the Next.js and I've created app/api/auth/[...nextauth]/route.ts.

Still I'm facing the issue of 404 error.

[frankdagostino]

I'm new to to nextjs. Just playing around this tutorial https://nextjs.org/learn

Created app/api/auth/[...nextauth]/route.ts but still facing 404 on useSession() calling /api/auth/session :(

[Rinshin-Jalal]

@sxs6596 @frankdagostino

I have been facing this error for the last few days!!!
But now it was fixed by reading these

https://authjs.dev/guides/upgrade-to-v5#authenticating-server-side
https://nextjs.org/learn/dashboard-app/adding-authentication

basically, everything in the next-auth is changing to support app router - it is still beta

[campos20]

I'll put here to maybe help others. I was having this issue when deploying to aws s3 (meaning SPA frontend). I had to change next-auth with react-oidc-context, but I tried a lot of different approaches before realizing it.

[gablsl]

Hi, so this is connected to nextJs changing some concepts with version 13. I successfully reproduced your issue.

Next13 in their beta docs mention: API Routes have been replaced by Route Handlers for the app directory only. API Routes continue to be supported in pages.

So to get nexta-auth to work, I created the following folder schema Link to screenshot of folder schema . Note the pages folder which is INSIDE the src folder but OUTSIDE the app folder. And inside [...nextauth].ts file pasted exact code of yours from above. Everything worked perfectly. you can navigate to http://localhost:3000/api/auth/signin to confirm.

About next13 supporting pages structure for API routes -> Next docs .

This solution works for me, thanks!

[Bobolan123]

move your api folder outside of [locale] folder, normally your api doesn't need i18n
like that:
-app
|-[locale]
|--layout.tsx / js
|--page.tsx / js
|-api
|--auth
|---[...nextauth]
|----route.ts / js