Unhandled Promise Rejection Errors on Vercel (MongoDB)

[dubbajubba]

Hi there,

I'm hoping someone can shed some light on my issue. I have been trying to figure this out and I am going crazy!

Problem
I'm running my nextjs app on Vercel. Next-auth is working great for the most part, but I have consistently been getting Unhandled Promise Rejection errors in the Vercel function logs when hitting the next-auth api.

Below is a screenshot of the errors I am getting.

I am using a MongoDB that I have set up with Azure's Cosmo DB. Below is my code that might be relevant.
/lib/mongodb.ts (I used the code from the next-auth documentation, but made some tweaks to work with typescript)

// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
import { MongoClient, MongoClientOptions } from 'mongodb';

const uri = process.env.MONGODB_URI;

//Added this interface to remove typscript error
interface myMongoOptions extends MongoClientOptions {
  useUnifiedTopology: boolean;
  useNewUrlParser: boolean;
}

const options: myMongoOptions = {
  useUnifiedTopology: true,
  useNewUrlParser: true,
};

let client;
let clientPromise!: Promise<MongoClient>;

if (!process.env.MONGODB_URI) {
  throw new Error('Please add your Mongo URI to .env.local');
}

if (process.env.NODE_ENV === 'development') {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  if(uri)
  {
    if (!global._mongoClientPromise) {
        client = new MongoClient(uri, options);
        global._mongoClientPromise = client.connect();
    }
  }
  clientPromise = global._mongoClientPromise;
} else {
  if (uri) {
    // In production mode, it's best to not use a global variable.
    client = new MongoClient(uri, options);
    clientPromise = client.connect();
  }
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise;

/pages/api/auth/[...nextauth.ts]

import NextAuth, { NextAuthOptions } from 'next-auth';
import FacebookProvider from 'next-auth/providers/facebook';
import GoogleProvider from 'next-auth/providers/google';
import EmailProvider from 'next-auth/providers/email';
import { MongoDBAdapter } from '@next-auth/mongodb-adapter';
import clientPromise from '../../../lib/mongodb';

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export const authOptions: NextAuthOptions = {

  adapter: MongoDBAdapter(clientPromise),

  // https://next-auth.js.org/configuration/providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ],

  theme: {
    colorScheme: 'auto', // "auto" | "dark" | "light"
    brandColor: '', // Hex color code
    logo: '', // Absolute URL to image
  },

  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
  // https://next-auth.js.org/configuration/databases
  //
  // Notes:
  // * You must install an appropriate node_module for your database
  // * The Email provider requires a database (OAuth providers do not)
  // database: process.env.DATABASE_URL,

  // The secret should be set to a reasonably long random string.
  // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
  // a separate secret is defined explicitly for encrypting the JWT.
  secret: process.env.SECRET,

  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: `strategy` should be set to 'jwt' if no database is used.
    strategy: 'jwt',

    // 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
  },

  // JSON Web tokens are only used for sessions if the `jwt: true` session
  // option is set - or by default if no database is specified.
  // https://next-auth.js.org/configuration/options#jwt
  jwt: {
    // A secret to use for key generation (you should set this explicitly)
    //
    //COMMENTED THIS SECRET BASED ON SUGGESTION HERE: https://github.com/nextauthjs/next-auth/issues/3560
    //secret: process.env.SECRET,
    // Set to true to use encryption (default: false)
    // encryption: true,
    // You can define your own encode/decode functions for signing and encryption
    // if you want to override the default behaviour.
    // encode: async ({ secret, token, maxAge }) => {},
    // decode: async ({ secret, token, maxAge }) => {},
  },

  // You can define custom pages to override the built-in ones. These will be regular Next.js pages
  // so ensure that they are placed outside of the '/api' folder, e.g. signIn: '/auth/mycustom-signin'
  // The routes shown here are the default URLs that will be used when a custom
  // pages is not specified for that route.
  // https://next-auth.js.org/configuration/pages
  pages: {
    signIn: '/signin', // Displays signin buttons
    // signOut: '/auth/signout', // Displays form with sign out button
    error: '/auth/error', // Error code passed in query string as ?error=
    verifyRequest: '/verify-request', // Used for check email page
    newUser: '/account/welcome', // If set, new users will be directed here on first sign in
  },

  // Callbacks are asynchronous functions you can use to control what happens
  // when an action is performed.
  // https://next-auth.js.org/configuration/callbacks
  callbacks: {
    // async signIn({ user, account, profile, email, credentials }) { return true },
    // redirect({ url, baseUrl }) {
    //   if (url.startsWith(baseUrl)) return url;
    //   // Allows relative callback URLs
    //   else if (url.startsWith('/')) return new URL(url, baseUrl).toString();
    //   return baseUrl;
    // },
    redirect: async ({url, baseUrl}) => {
      return url.startsWith(baseUrl)
        ? Promise.resolve(url)
        : Promise.resolve(baseUrl)
    },
    session: async ({ session, token }) => {
      if (session?.user) {
        session.user._id = token.uid;
        session.user.isSuperAdmin = token.isSuperAdmin;
        session.user.subscriptionType = token.subscriptionType;
      }
      return session;
    },
    jwt: async ({ user, token }) => {
      if (user) {
        token.uid = user.id;
        token.isSuperAdmin = user.isSuperAdmin;
        token.subscriptionType = user.subscriptionType;
      }
      return token;
    },
  },

  // Events are useful for logging
  // https://next-auth.js.org/configuration/events
  events: {

  },

  // Enable debug messages in the console if you are having problems
  debug: true,
};

export default NextAuth(authOptions);

getServerSideProps from /pages/signin.tsx (i can provide more if necessary)

// This is the recommended way for Next.js 9.3 or newer
export const getServerSideProps: GetServerSideProps = async context => {
  const { callbackUrl } = context.query;
  const providers = await getProviders();
  const csrfToken = await getCsrfToken(context);

  const returnUrl = callbackUrl || null;

  return {
    props: { providers, csrfToken, returnUrl },
  };
};

I had to update the next.d.ts file and add a declaration for global with the _mongoClientPromise to fix typescript errors

import type { NextComponentType, NextPageContext } from 'next';
import type { Session } from 'next-auth';
import type { Router } from 'next/router';

declare module 'next/app' {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean;
    __N_SSP?: boolean;
    pageProps: P & {
      /** Initial session passed in from `getServerSideProps` or `getInitialProps` */
      session?: Session;
    };
  };
}

declare module '*.module.css';

declare global {
  var _mongoClientPromise: Promise<MongoClient>;
}

/types/next-auth.d.ts

import { Session, DefaultUser } from 'next-auth';
import { JWT } from 'next-auth/jwt';

/** Example on how to extend the built-in session types */
declare module 'next-auth' {
  interface Session {
    /** This is an example. You can find me in types/next-auth.d.ts */
    //foo: string;
    user: DefaultUser & {
      _id: string;
      isSuperAdmin: boolean;
      subscriptionType: number;
    };
  }

  interface User extends DefaultUser {
    isSuperAdmin: boolean;
    subscriptionType: number;
  }
}

/** Example on how to extend the built-in types for JWT */
declare module 'next-auth/jwt' {
  interface JWT {
    /** This is an example. You can find me in types/next-auth.d.ts */
    //bar: number;
    uid: string;
    isSuperAdmin: boolean;
    subscriptionType: number;
  }
}

P.S. please let me know if I need to provide anything else!

[choutkamartin]

Are you sure you can connect to the database itself? I.e. all IP adresses can access the database?

[dubbajubba]

I'm not sure I know what you mean when you say "all IP addresses can access the database?", but I believe so. Next-auth is working, I have users in my database, and can log in/create accounts from any device.

Sometimes these errors go unnoticed in the user experience, they're just thrown in the background. Other times the errors will return a 500 error in the app, but a page refresh will make it go away.

[niudai]

I'm encountering exatcly the same issue

[dubbajubba]

UPDATE:
1) Based on what I read in this Azure Cosmo DB documentation, https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb/nodejs-console-app, Mongo driver 3.0 encodes the '=' character in the password as %3D. My project is currently using Mongo driver v4.2.2, but I am assuming the documentation still applies.

This seems to have fixed my issue. I will monitor my app and mark this question as answered after a day or so to ensure the issue is truly fixed.

[choutkamartin]

Wouldn't this throw errors all the time (as application would never connect to the database)?

[dubbajubba]

Yeah, you're right. I think I was just being hopeful. I am still getting the errors 😩

I do have to say though, there was a several hour period yesterday where I was not getting any errors. The only things I did yesterday were:

1) I changed useUnifiedTopology to false in my /lib/mongodb.ts file. I was still having the errors so I've since reverted the code back.

2) Changed the password in my connection string as mentioned above.

[dubbajubba]

There are two thoughts I have on what may be causing the issues.

1) Maybe I'm causing a memory leak somewhere in my code because an error is thrown and not handled. Maybe in my getServerSideProps since I am awaiting getProviders() and getCsrfToken()? I'm not sure about this one because I was getting the errors even when using the built in next-auth sign in pages.

2) The next-auth API has a hard time establishing a connection with my Cosmo DB which causes the timeout and throws the error. Granted, I don't know what is causing the communication breakdown.

[simonecervini]

I'm having the same problem, but I'm using a Mongo Atlas shared tier cluster (M0), which is free and not suitable for production environments. Are you using a similar cluster for low-traffic applications?

[dubbajubba]

I am technically on Azure's free tier, but that is the default tier that all Cosmos DBs start with. https://docs.microsoft.com/en-us/azure/cosmos-db/free-tier

If I understand the documentation correctly, my application should scale automatically if I were to reach the free tier threshold.

[dubbajubba]

Hi there, I just wanted to comment on this thread again since I am still dealing with this issue. Hoping someone will come across this thread and have a solution.

I have continued trying different things to get rid of the MongoServerSelectionError. What I believe is happening is that the database is closing the connection to the frontend app due to idle time, however, I don't think the app is aware that the connection is closed, so the next time it tries to send a request to the database, the request fails and my app returns a 500 error.

I have tried including multiple different options in the connection string in attempts to fine tune the connection availability. https://www.mongodb.com/docs/manual/reference/connection-string/

My current set up is as follows:

• Hosted on Vercel running Node 16.x
• NextJS Version 12.2.4
• Next Auth Version: 4.10.3
• Next Auth Mongo Adapter Version: 1.0.4
• MongoDB Node Driver Version: 4.8.1
• CosmosDB Running on Azure, MongoDB Version 4.2

[dubbajubba]

Also, here is the current connection string options that I am providing: ssl=true&replicaSet=globaldb&retrywrites=false&maxIdleTimeMS=120000

These are the default options in the connection string provided by Azure. I have also tried many different option configurations, but am open for suggestions.

[Inambe]

I'm facing the same issue. Did anyone find success in fixing it?

[datduyng]

Hi @Inambe, did you manage to resolve the issue after disabling serverSelectionTimeoutMS?

I see the same issue with MongoDB when hosting my application on NextJS. I don't use next-auth so I think this is a universal problem with CosmoDB MOngoDB driver

[serge005]

I'm experiencing the same exact issue. NextJS app on Vercel connecting to MongoDB Atlas, so it's not an Azure problem. I'm not using getSession or getCsrfToken, so it's not that. Super frustrating. I'm also considering switching to Supabase, as it looks like this problem has existed for a very long time now with next-auth.

[daniellin215]

@Inambe what do you mean by disabled, do you mean using default values? Also experiencing the exact same issue as you. Getting MongoServerSelectionError

[daniellin215]

Maybe @iaincollins has some input/experience on this particular issue?

[demircancelebi]

removed connectTimeoutMS, started getting MongoServerSelectionError. For some reason deleting node_modules and package-lock.json and doing a clean install got rid of MongoServerSelectionError too for me

[apsquared]

I'm fighting this same error? Anyone figure this out? I'm deployed on Vercel, using mongo and next auth.

[adammetal]

Hi, i'm also facing this with atlas and mongodb in vercel deployment. It's not a constant error. It happens time to time. I'm using the app router and the next-auth@v5.

client.js:

// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
import { MongoClient } from "mongodb";

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"');
}

const uri = process.env.MONGODB_URI;
const options = {};

let client;
let clientPromise;

if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;
} else {
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

export default clientPromise;

auth.js

import NextAuth from "next-auth";
import { MongoDBAdapter } from "@auth/mongodb-adapter";
import GitHub from "next-auth/providers/github";
import clientPromise from "@/db/client";

export const {
  handlers: { GET, POST },
  auth,
} = NextAuth({
  providers: [
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  adapter: MongoDBAdapter(clientPromise),
  session: { strategy: "jwt" },
});

export const withAuth = (handler) =>
  auth((req, ...rest) => {
    if (!req.auth) {
      return new Response(null, { status: 403 });
    }

    return handler(req, ...rest);
  });

And the error message:

Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"MongoNetworkTimeoutError: connection timed out","reason":{"errorType":"MongoNetworkTimeoutError","errorMessage":"connection timed out","connectionGeneration":0,"stack":["MongoNetworkTimeoutError: connection timed out","    at connectionFailureError (/var/task/node_modules/.pnpm/mongodb@6.3.0/node_modules/mongodb/lib/cmap/connect.js:381:20)","    at TLSSocket.<anonymous> (/var/task/node_modules/.pnpm/mongodb@6.3.0/node_modules/mongodb/lib/cmap/connect.js:285:22)","    at Object.onceWrapper (node:events:631:28)","    at TLSSocket.emit (node:events:517:28)","    at Socket._onTimeout (node:net:598:8)","    at listOnTimeout (node:internal/timers:569:17)","    at process.processTimers (node:internal/timers:512:7)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: MongoNetworkTimeoutError: connection timed out","    at process.<anonymous> (file:///var/runtime/index.mjs:1276:17)","    at process.emit (node:events:529:35)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Error: Runtime exited with error: exit status 128 (Unhandled Promise Rejection)

And it happens time to time when the next-auth hits the /api/auth/session endpoint.

[nalenb]

I get this same error even on api routes that are not next-auth. Can't find a solution. I suspect my serverless instance isn't waking up in time. I'm using next-auth v4.24.6

[Mertakus]

Facing the same issue. I've tried multiple ways of deploying:

1. Deployed on Vercel (hobby plan)
2. Deployed on Vercel hobby plan with default supported "Mongodb Integration"(https://www.mongodb.com/developer/products/atlas/how-to-connect-mongodb-atlas-to-vercel-using-the-new-integration/)
3. Deployed on Digitalocean App platform (5$ p/m)
4. Deployed on custom Ubuntu 23.10 x64 droplet

Database is a Managed Database from Digitalocean. I've also tried a paid Mongodb atlas M2 (9$ p/m) mongodb. Same error.

Issue persists. Would love to hear a solution...

[adammetal]

In the meantime i figured out something. After a while i revisited my project and tought what if, we put the whole logic into a function. I tested and the error dissappeared for me:

import { MongoClient } from "mongodb";

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"');
}

const uri = process.env.MONGODB_URI;
const options = {};

let client;
let clientPromise;

function getClientPromise() {
  if (process.env.NODE_ENV === "development") {
    // In development mode, use a global variable so that the value
    // is preserved across module reloads caused by HMR (Hot Module Replacement).
    if (!global._mongoClientPromise) {
      client = new MongoClient(uri, options);
      global._mongoClientPromise = client.connect();
    }
    clientPromise = global._mongoClientPromise;
  } else {
    client = new MongoClient(uri, options);
    clientPromise = client.connect();
  }

  return clientPromise;
}

export default getClientPromise;

Any other suggestion? Maybe it will ends with to many open connection?

[williamcaamot]

Can you share your authConfig.ts as well? I tried this but I'm still getting errors...

[elenamatay]

+1. I'm using the exact same setup as @dubbajubba (see comment). The error is always the same:

Unhandled Rejection: MongoServerSelectionError: Server selection timed out after 30000 ms
    at Timeout._onTimeout (/var/task/node_modules/mongodb/lib/sdam/topology.js:278:38)
(...)

My current code is:

mongo.ts file:

import { MongoClient } from 'mongodb';

declare global {
  var _mongoClient: MongoClient | undefined;
}


interface MongoClientOptions {}

const uri: string | undefined = process.env.MONGODB_URI;
const options: MongoClientOptions = {};  // Type the options object

let client: MongoClient | null = null;  // Define client with null as a possible type

if (!uri) {
  console.group("⚠️ MONGODB_URI missing from .env");
  console.error(
    "It's not mandatory but a database is required for Magic Links."
  );
  console.error(
    "Please add MONGODB_URI to your .env file."
  );
  console.groupEnd();
  } else if (process.env.NODE_ENV === "development") {
    if (!globalThis._mongoClient) { 
      globalThis._mongoClient = new MongoClient(uri, options); 
    }
    client = globalThis._mongoClient; 
  } else {
    client = new MongoClient(uri, options);
  }

export default client;

next-auth.ts:

import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import EmailProvider from "next-auth/providers/email";
import { MongoDBAdapter } from "@auth/mongodb-adapter";
import config from "@/config";
import client from "./mongo";

const clientPromise = client.connect(); 

interface NextAuthOptionsExtended extends NextAuthOptions {
  adapter: any;
}

export const authOptions: NextAuthOptionsExtended = {
  // Set any random key in .env.local
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    GoogleProvider({
      // Follow the "Login with Google" tutorial to get your credentials
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      async profile(profile) {
        return {
          id: profile.sub,
          name: profile.given_name ? profile.given_name : profile.name,
          email: profile.email,
          image: profile.picture,
          createdAt: new Date(),
        };
      },
    }),
    // Follow the "Login with Email" tutorial to set up your email server
    // Requires a MongoDB database. Set MONOGODB_URI env variable.
    ...(client
      ? [
          EmailProvider({
            server: process.env.EMAIL_SERVER,
            from: config.mailgun.fromNoReply,
          }),
        ]
      : []),
  ],
  // New users will be saved in Database (MongoDB Atlas). Each user (model) has some fields like name, email, image, etc..
  // Requires a MongoDB database. Set MONOGODB_URI env variable.
  // Learn more about the model type: https://next-auth.js.org/v3/adapters/models
  ...(client && { adapter: MongoDBAdapter(clientPromise) }),

  callbacks: {
    session: async ({ session, token }) => {
      if (session?.user) {
        session.user.id = token.sub;
      }
      return session;
    },
  },
  session: {
    strategy: "jwt",
  },
  theme: {
    brandColor: config.colors.main,
    logo: `https://${config.domainName}/logoAndName.png`,
  },
};

export default NextAuth(authOptions);

Did someone manage to solve this issue? I'm quite desperate, have been trying to solve this for almost one month (also in other threads) without success, and it's blocking my app's launch :(

Many thanks!