Cannot find [...nextauth].{js,ts} in `/pages/api/auth`

[Gyurmatag]

Question 💬

I'm using the app dir, here is my route.js located: app/api/auth/[…nextauth]/route.js And here is the content of the route.js:

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { Stripe } from 'stripe'
import prisma from '../../../../prisma/client'
import { STRIPE_API_VERSION } from '@/config'

const adapter = PrismaAdapter(prisma)

export const authOptions = {
  adapter: adapter,
  secret: process.env.AUTH_SECRET,
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  pages: {
    signIn: '/sign-in',
  },
  events: {
    createUser: async ({ user }) => {
      const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
        apiVersion: STRIPE_API_VERSION,
      })

      await stripe.customers
        .create({
          email: user.email,
        })
        .then(async (customer) => {
          return prisma.user.update({
            where: { id: user.id },
            data: {
              stripeCustomerId: customer.id,
            },
          })
        })
    },
  },
  callbacks: {
    async session({ session, user }) {
      session.user.id = user.id

      session.user.stripeCustomerId = user.stripeCustomerId
      session.user.stripeSubTier = user.currentSubPlan

      return session
    },
  },
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

But when I navigate to signIn page I've got this error:

[next-auth][error][MISSING_NEXTAUTH_API_ROUTE_ERROR] 
https://next-auth.js.org/errors#missing_nextauth_api_route_error Cannot find [...nextauth].{js,ts} in `/pages/api/auth`. Make sure the filename is written correctly. MissingAPIRoute [MissingAPIRouteError]: Cannot find [...nextauth].{js,ts} in `/pages/api/auth`. Make sure the filename is written correctly.

What can be the problem here?

Thank you for your help!

How to reproduce ☕️

No reproduction in live environment.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[majdnaji]

same issue with credentials provider and typescript nextjs 13.4

[balazsorban44]

From the issue description, sounds like … needs to be .... Cannot say more without a reproduction.

[Gyurmatag]

Omg. That was the problem. Thank you @balazsorban44! Please consider this dot situation, because it is easy to miss!

[balazsorban44]

unfortunately it's not something we can do about in NextAuth.js, it's how Next.js catch-all routes work. We could maybe add a warning though. Will let the Next.js team know. 👍

[majdnaji]

worked for me , thanks @balazsorban44

[jilherme]

wow. I'll always copy paste it for now on...

[aravindame]

Faced the same issue. Just check the folder name. It should be named as /[...nextauth]/

[evanrosa]

I might have been looking at my code for too long but can someone break this down to me like I'm 5? Do we keep the route.ts file inside the [...nextauth] folder? Should the folder be [. . .nextauth]/route.ts or [. . .nextauth].ts or [...nextauth] etc?

I've tried a few of these options and still get the same error mentioned above.

[Enalmada]

I was learning how to migrate from /pages to /app from this great guide: https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/#comments @evanrosa I hope that guide can give you more clarity

Just don't copy the "…" character literally out of the line of the guide like I did finding myself here for a fix.

[wpcodevo]

Guys, I apologize for the issue with the three dots. When I initially created the article, I copied the relative path to the route.ts file from VS Code and pasted it directly into the article. Unfortunately, I was unaware that the appearance of the three dots changed unexpectedly during the process.

However, I have now manually typed the three dots in the article, conducted thorough testing, and everything seems to be working correctly. I am confident that no one will encounter the three dots issue again.

[ContrerasA]

@wpcodevo I just found myself here as well due to copy / pasting There is a section that still has the ellipses instead of three dots

[wpcodevo]

@ContrerasA Thank you for bringing this three dots issue to my attention. I've investigated the matter and noticed that WordPress automatically converts the three dots into ellipses, despite my previous effort to accurately represent them as real three dots by typing them. Nevertheless, I've added a warning note above the URL path, cautioning people to retype the three dots if they choose to copy and paste it.

[mesuhailpm]

worked mine was Auth instead of auth

[TruJared]

@mesuhailpm Thanks for sharing that. I made the same error and couldn't figure out what the heck I was doing wrong.

[phpepe]

@balazsorban44 you saved my day ! mv \[…nextauth\] \[...nextauth\] solves the problem, for those who copy/pasted the folder structure from the web

[raggettii]

i also got stuck here as getting the same error as the time i was getting the error the directory was api/auth/[...nextAuth] and i tried everything like making spaces between the dots but it didn't work and then finally i renamed the route as api/auth/[...nextauth]
i dont know the exact reason but worked for me.