I'm currently working on a project to create an Airbnb clone using NextJs. The tutorial I'm following is using an experimental version, while I've opted for the latest version of NextJs. One aspect that's been causing confusion for me is understanding how routing works in NextJs, especially when it comes to API calls. Despite my efforts to research and make changes to the routing path, I continue to encounter errors.
Everything functions as expected during the registration process. However, upon attempting to log in, I encountered the following error:
Error Detected default export in 'E:\Program\airbnb\app\api\auth[...nextauth]\route.ts'. Export a named export for each HTTP method instead.
This is the routing path I have set up:
https://i.stack.imgur.com/9zJ1z.png
located inside my app/api/auth/[...nextauth]/route.js
export const authOptions: AuthOptions = {
adapter: PrismaAdapter(prisma),
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string
}),
GoogleProvider({
clientId: process.env.GOOGLE_ClIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string
}),
CredentialsProvider({
name: 'credentials',
credentials: {
email: {label: 'email', type: 'text'},
password: {label: 'password', type: 'password'},
},
async authorize(credentials){
// Authorize logic here
}
})
],
pages: {
signIn: '/',
},
debug: process.env.NODE_ENV === 'development',
session: {
strategy: 'jwt'
},
secret: process.env.NEXTAUTH_SECRET
}
export default NextAuth
register/route.js
export async function POST(request: Request) {
// POST request logic here
}
Here is the code snippet from my LoginModal.ts file:
const onSubmit: SubmitHandler<FieldValues> = (data) => {
setIsLoading(true)
signIn('credentials',{
...data,
redirect: false,
})
.then((callback) => {
setIsLoading(false)
if(callback?.ok){
toast.success('Logged In')
router.refresh()
loginModal.onClose()
}
if(callback?.error){
toast.error(callback.error)
}
})
}