NextAuth implementation with a login form
Answered
JChicano posted this in #help-forum
JChicanoOP
I have this file in pages/api/auth/[...nextauth].ts, when i summit a form like in the image, im getting a 404
Answered by B33fb0n3
yes, you want to exclude your api endpoints from your middleware redirection as well. You can use this matcher to exclude it:
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
'/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
],
}18 Replies
@JChicano I have this file in pages/api/auth/[...nextauth].ts, when i summit a form like in the image, im getting a 404
It looks like you are using the app router and the pages router in parallel. Some things might now match and because of that you receive a 404 error for the API routes. Kindly share your file structure so we can look further into that
@JChicano is like that, tell me if i need some changes 😄
yea, as said: (see attached) you are using both: pages router and app router. Transform the api routes to
app router api routes ([see here](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)) and it should work fine@JChicano like that?, because its happening the same
nah, take a look at the link that I shared: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
You also need to transform your routes as the syntax is different from pages router to app router
You also need to transform your routes as the syntax is different from pages router to app router
@JChicano now that is a router file, this is correct?
yes, you can also also do it like this. I havent tried your code yet, but it looks also valid
@JChicano It may also not be finding it due to the middleware redirection?
yes, you want to exclude your api endpoints from your middleware redirection as well. You can use this matcher to exclude it:
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
'/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
],
}Answer
JChicanoOP
It working now, thank you very much
happy to help
@B33fb0n3 happy to help
JChicanoOP
Btw hahaha, if im doing a custom form by myself in a login page (bcs the form of nextAuth is so simple), i realize that i dont need the credentials form nextAuth, is more for using with google or others no?
I was trying to do it with nextauth to automatically have the cookies generated
@JChicano Btw hahaha, if im doing a custom form by myself in a login page (bcs the form of nextAuth is so simple), i realize that i dont need the credentials form nextAuth, is more for using with google or others no?
you can do that with the specific functions from nextauth itself to start these auth processes
@B33fb0n3 you can do that with the specific functions from nextauth itself to start these auth processes
JChicanoOP
i will see it to do this in the future, maybe you will see me doing a new post asking something about that hahaha, but for the moment is enought, ty mate =d