Receiving 404 on Vercel Deploy

[F-Moody]

Question 💬

I have this basic setup with a CustomProvider which is a python backend server with which i authenticate my app :

Import CredentialsProvider from 'next-auth/providers/credentials'
import NextAuth from 'next-auth'
import { postLogin } from '../../../api/utils'
export const authOptions = {
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        const { username, password } = credentials

        const payload = { username, password: btoa(password) } 
 }
        try {
          const res = await postLogin(payload)
          const user = {
            username: res.username,
            email: res.email,
            access_token: res.access_token,
          }
          return user
        } catch (e) {
          console.error(e)
          return null
        }
      },
    }),
  ],

  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.user = user
      }
      return token
    },

  
    async session({ session, token }) {
      session.user = token.user
      return session
    },
  },

  session: {
    strategy: 'jwt',
  },
  pages: {
    signIn: '/login',
  },
  secret: process.env.NEXTAUTH_SECRET,
}

export default NextAuth(authOptions)

This is my Next middleware :

export { default } from 'next-auth/middleware'

export const config = { matcher: ['/mycourses/:path*'] }

And this is my login page :

'use client'
import { useState } from 'react'
import { signIn } from 'next-auth/react'

const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const onLogin = async () => {
    await signIn('credentials', {
      username: email,
      password,
      redirect: true,
      callbackUrl: '/mycourses',
    })
  }
  return (
    <div className="bg-zinc-900 h-full flex justify-center items-center">
      <div className="bg-zinc-800 h-fit p-8 flex flex-col gap-10 w-1/3 border border-zinc-700 rounded-2xl p-6 mobile:w-full">
        <h1 className="font-clash text-3xl text-zinc-50">Login</h1>
        <div className="flex flex-col gap-2">
          <p className="font-satoshi text-zinc-50 font-semibold">Email</p>
          <input
            onChange={(e) => setEmail(e.target.value)}
            className="py-2 px-2 bg-zinc-700 rounded-lg focus:bg-zinc-700 focus:border-rgba(48, 242, 219, 1) text-zinc-50 font-satoshi flex gap-1"
            type="email"
          />
        </div>
        <div className="flex flex-col gap-2">
          <p className="font-satoshi text-zinc-50 font-semibold">Password</p>
          <input
            onChange={(e) => setPassword(e.target.value)}
            className="py-2 px-2 bg-zinc-700 rounded-lg focus:bg-zinc-700 focus:border-rgba(48, 242, 219, 1) text-zinc-50 font-satoshi flex gap-1"
            type="password"
          />
        </div>
        <button
          onClick={onLogin}
          className="bg-[#30F2DB] transition-all hover:bg-[#30F2DB] w-full rounded-full py-3 px-4 text-zinc-900 font-semibold text-center"
        >
          Login
        </button>
      </div>
    </div>
  )
}

export default Login

Nothing too fancy, if the user logs in it will be redirected to localhost:3000/mycourses and if i try to access that route directly without login first i will be redirected to localhost:3000/login.

Everything is working in local but when i deploy on vercel and i try to access mydomain.vercel.app/mycourses i am redirected here :

https://mydomain.vercel.app/api/auth/signin?callbackUrl=%2Fmycourses
And Vercel gives me a 404 page.

Same stuff when i go to the login page and i try to login i'm redirected to

/api/auth/error
On the network tab i see that it's trying to access to the providers like so

https://mydomain.vercel.app/api/auth/providers
But it gives a 404.

I've tried both adding the NEXTAUTH_URL variable in vercel or removing it but with no luck.

I've no idea on how to solve this.

How to reproduce ☕️

To reproduce it i just deploy my app on vercel

Contributing 🙌🏽

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

[F-Moody]

For anyone finding this issue without a fix. After spending hours i've found a solution.

I had an "api" folder in the root of the project.It was not breaking in local but it was in Vercel. So after renaming it it worked!

[FutureFutureTo]

For anyone finding this issue without a fix. After spending hours i've found a solution.

I had an "api" folder in the root of the project.It was not breaking in local but it was in Vercel. So after renaming it it worked!

wow, thanks - that was a rabbit hole that i almost got swept down :/

[yiGmMk]

For anyone finding this issue without a fix. After spending hours i've found a solution.

I had an "api" folder in the root of the project.It was not breaking in local but it was in Vercel. So after renaming it it worked!

rename make next-auth work, but I need add some go serverless funciton (which are required by vercel to put in /api dir) ,have any ideas to make both work