Deployed (Vercel) NextJS application with NextAuth.js goes to 404 pages on any of the auth api routes (/api/auth)

[shyn48]

Description 🐜

Hi. Basically I have a NextJS app that uses NextAuth.js for authentication. On localhost environment, everything works great, but on the deployed application (Vercel) all of the auth api routes are not found and redirect to 404.
I have set NEXTAUTH_URL to my vercel domain name (http://name.vercel.app).
It's good to note that the api routes I have defined on NextJS itself for other backend purposes work just find on production and only /api/auth routes have this issue.

Is this a bug in your own project?

Yes

How to reproduce ☕️

This is my [...nextauth].js file.

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { redirect } from 'next/dist/next-server/server/api-utils';
import { extractUser } from '../../../lib/api-helpers';

export default NextAuth({
  site: process.env.API_URL,
  pages: {
    signIn: '/auth/signin',
  },
  providers: [
    Providers.Credentials({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'Credentials',
      async authorize(credentials, req) {
        const res = await fetch(`${process.env.API_URL}/api/auth/signin-api`, {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { 'Content-Type': 'application/json' },
        });
        const user = await res.json();
        // If no error and we have user data, return it
        if (res.ok && user) {
          return Promise.resolve(user);
        }
        return Promise.resolve(null);
      },
    }),
  ],
  database: process.env.MONGODB_URI,
  session: {
    // Use JSON Web Tokens for session instead of database sessions.
    // This option can be used with or without a database for users/accounts.
    // Note: `jwt` is automatically set to `true` if no database is specified.
    jwt: true,

    // Seconds - How long until an idle session expires and is no longer valid.
    maxAge: 30 * 24 * 60 * 60, // 30 days

    // Seconds - Throttle how frequently to write to database to extend a session.
    // Use it to limit write operations. Set to 0 to always update the database.
    // Note: This option is ignored if using JSON Web Tokens
    updateAge: 24 * 60 * 60, // 24 hours
  },
  callbacks: {
    async signIn(user, account, profile) {
      return Promise.resolve(true);
    },
    async redirect(url, baseUrl) {
      return baseUrl;
    },
    async jwt(token, user, account, profile, isNewUser) {
      const extractedUser = extractUser(user);
      token = {
        ...token,
        ...extractedUser,
      };
      return Promise.resolve(token);
    },
    async session(session, user) {
      session.user = extractUser(user);
      return Promise.resolve(session);
    },
  },
});

These are my environment varibles:

   STORAGE_URL: process.env.STORAGE_URL,
    API_URL: process.env.API_URL,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    MONGODB_URI: process.env.MONGODB_URI,
    DB_NAME: process.env.DB_NAME,
    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
    EMAIL_FROM: process.env.EMAIL_FROM,
    SESSION_SECRET: process.env.SESSION_SECRET,

Screenshots / Logs 📽

No response

Environment 🖥

Binaries:
Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 93.0.4577.63
Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
Internet Explorer: 11.0.19041.906
npmPackages:
next: 11.0.1 => 11.0.1

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

You don't need to set this env variable in case of Vercel. I also suggest looking at old issued/discussions, thus has been asked multiple times.

[shyn48]

This, and some digging in discussions did the trick for me!
I removed NEXTAUTH_URL from vercel environment varibles and defined a VERCEL_URL variable in my next.config.js and pushed to Vercel.
Thank you for your help!

[balazsorban44]

Glad it worked out! 💚

[shyn48]

Can you point me towards a post regarding this issue? I can't find it on the issues page.
Also, I just removed the NEXTAUTH_URL from my vercel environemnts and the issue still persists.

[balazsorban44]

check out the issues and discussions. you certainly have a misconfiguration somewhere. you can see a successful Vercel deployment here https://next-auth-example.vercel.app/

[balazsorban44]

will need a reproduction to be able to help further.