next-auth: Cannot find [...nextauth].{js,ts} in `/pages/api/auth`
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
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 2
- Comments: 15 (2 by maintainers)
From the issue description, sounds like
…needs to be.... Cannot say more without a reproduction.same issue with credentials provider and typescript nextjs 13.4
@balazsorban44 you saved my day !
mv \[…nextauth\] \[...nextauth\]solves the problem, for those who copy/pasted the folder structure from the webGuys, I apologize for the issue with the three dots. When I initially created the article, I copied the relative path to the
route.tsfile 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.
worked mine was Auth instead of auth
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. 👍
@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.
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.