Providers Credential getting error in Vercel when signin in

[whoisnyl]

Your question
How to use Credentials custom login page in Vercel?

What are you trying to do
I made the custom signin page and its workin fine in my local but after deploying to Vercel, it doesn't work anymore and it always return with empty ?error parameter

Reproduction

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import axios from "axios";

const options = {
  site: process.env.NEXTAUTH_URL,
  providers: [
    Providers.Credentials({
      name: "ApprovALL",
      credentials: {
        username: { label: "Email address", type: "text" },
        password: { label: "Password", type: "password" },
      },
      authorize: async (credentials) => {
        try {
          const config = {
            headers: {
              "Content-Type": "application/json; charset=utf-8",
              corsOrigin: "*",
              "Access-Control-Allow-Origin": "*",
            },
          };
          const user = await axios.post(
            `${process.env.NEXTAUTH_URL}/api/auth/callback/signin`,
            credentials,
            config
          );

          if (user) {
            const userData = user?.data;
            return userData;
          } else {
            return null;
          }
        } catch (err) {
          throw new Error(err?.response?.data?.message);
        }
      },
    }),
  ],
  callbacks: {
    async jwt(token, user, account, profile, isNewUser) {
      // Add access_token to the token right after signin
      if (account?.accessToken) {
        token.accessToken = account.accessToken;
      }
      return token;
    },
    async session(session, token) {
      // Add property to session, like an access_token from a provider.
      session.accessToken = token.accessToken;
      return session;
    },
    async redirect(url, baseUrl) {
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
    async signIn(user) {
      if (!user.id) {
        Promise.reject();
      }
      return Promise.resolve(true);
    },
  },
  database: process.env.MONGODB_URI,
  secret: process.env.JWT_SECRET,
  session: {
    jwt: true,
    // Seconds - How long until an idle session expires and is no longer valid.
    maxAge: 7 * 24 * 60 * 60, // 7 days
  },
  jwt: {
    encryption: true,
    secret: process.env.JWT_SECRET,
    signingKey: process.env.JWT_SIGNING_KEY,
    encryptionKey: process.env.JWT_ENCRYPTION_KEY,
  },
  pages: {
    signIn: "/auth/signin",
    error: "/auth/signin",
  },
  theme: "light",
};

export default (req, res) => NextAuth(req, res, options);

Additional: attached below the screenshot of the error from Network everytime i visit the site

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[whoisnyl]

is there something wrong with my question or any reason why its been closed? @balazsorban44

[StefanSelfTaught]

Try to look at Vercel function logs too see the error. Did you set your NEXT-AUTH env variable?

[whoisnyl]

hey @StefanSelfTaught , thanks for that info. sharing you the logs from Vercel as I cant tell if it concerns next-auth.

[POST] /api/auth/callback/signin
19:56:01:10
2021-04-15T11:56:01.405Z	2c98604b-285f-4d31-891b-8da4477b6cdd	ERROR	Error: Cannot find module '/var/task/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node'
Require stack:
- /var/task/node_modules/bcrypt/bcrypt.js
- /var/task/.next/server/pages/api/auth/callback/signin.js
- /var/task/node_modules/next/dist/next-server/server/next-server.js
- /var/task/___next_launcher.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/var/task/node_modules/bcrypt/bcrypt.js:6:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/bcrypt/bcrypt.js',
    '/var/task/.next/server/pages/api/auth/callback/signin.js',
    '/var/task/node_modules/next/dist/next-server/server/next-server.js',
    '/var/task/___next_launcher.js',
    '/var/runtime/UserFunction.js',
    '/var/runtime/index.js'
  ]
}
RequestId: 2c98604b-285f-4d31-891b-8da4477b6cdd Error: Runtime exited with error: exit status 1
Runtime.ExitError

as for NEXT-AUTH env, do you mean the NEXTAUTH_URL? i set that to https://approvall-beta.vercel.app/

[balazsorban44]

It looks like the error is coming from

/api/auth/callback/signin, which looks to be your own implementation to authorize a user. check your code there.

Looks like bcrypt is not installed.

[whoisnyl]

Found out that bcrypt native modules are not working on Vercel and they recommend to use alternative like bcryptjs.

Sharing here the source if someone encounter the same issue.

Thanks!