Next.js with Next-Auth: 504 Timeout Error on Production Server

Question

I have developed a simple Next.js app with authentication using Next-Auth. Everything works perfectly fine when running the app locally with environment variables configured in .env.local. However, when I deploy the app to my production server and update the environment variables accordingly, I encounter a 504 timeout error when attempting to log in.

Here is my Development setup:

• .env.local

  API_URL=https://api.mydomain.com/api
  NEXT_PUBLIC_API_URL=https://api.my_domain.com/api
  API_TOKEN="my-api-token"
  NEXTAUTH_URL=http://localhost:3000
  NEXTAUTH_SECRET="next-auth-secret"
  

Here is my Production setup:

• .env.local

  API_URL=https://api.mydomain.com/api
  NEXT_PUBLIC_API_URL=https://api.my_domain.com/api
  API_TOKEN="my-api-token"
  NEXTAUTH_URL=https://my_domain.com
  NEXTAUTH_SECRET="next-auth-secret"
  

• src/app/api/auth/[...nextauth]/route.js - This file remains the same for production and Development

    import axios from "axios";
    import NextAuth from "next-auth";
    import CredentialsProvider from "next-auth/providers/credentials";
  
    const handler = NextAuth({
      secret: process.env.NEXTAUTH_SECRET,
      providers: [
        CredentialsProvider({
          name: "Credentials",
          credentials: {
            email: {
              label: "Email",
              type: "email",
              placeholder: "example@mail.com",
            },
            password: {
              label: "Password",
              type: "password",
            },
          },
          async authorize(credentials, req) {
            try {
              // Check if the credentials were provided
              if (!credentials.email || !credentials.password) {
                return null;
              }
              // Check if the user has an account
              const data = await axios(process.env.API_URL + `/auth/local`, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                data: {
                  identifier: credentials.email,
                  password: credentials.password,
                },
              });
              // Extract jwt and user data
              const jwt = data?.data?.jwt;
              const user = {
                ...data?.data?.user,
                jwt,
              };
              // If user doesnt have an account redirect him back to login
              if (jwt) {
                return user;
              }
              return null;
            } catch (error) {
              console.log(error?.message);
              return null;
            }
          },
        }),
      ],
      callbacks: {
        // JWT callback is called as first
        async jwt({ token, user, session }) {
          // Only on Sign In (The user object is not null only on first Sign In)
          // add id, confirmed, blocked and jwt from the user to the token object
          if (user) {
            return {
              ...token,
              id: user.id,
              confirmed: user.confirmed,
              blocked: user.blocked,
              jwt: user.jwt,
            };
          }
          return token;
        },
        // Store the access token into the session for Client side
        async session({ session, token, user }) {
          // Pass the id, confirmed, blocked and jwt from the token to the session object
          return {
            ...session,
            user: {
              ...session.user,
              id: token.id,
              confirmed: token.confirmed,
              blocked: token.blocked,
              jwt: token.jwt,
            },
          };
        },
      },
    });
  
    export { handler as GET, handler as POST };
  

When I access the login page and submit the form with valid credentials in the production environment, the app sends a POST request to https://my_domain.com/api/auth/callback/credentials, but I'm consistently receiving a 504 timeout error, and the authentication process doesn't complete.

I've checked the server's internet access, verified that the environment variables are correct, and ensured that the API is accessible over HTTPS. I'm not sure what else to investigate to resolve this issue.

I also experimented with my development setup, where I connected to my production server's API, and everything functioned perfectly. However, the challenge arises when attempting authentication within my Next.js application deployed on the production server with the modified NEXTAUTH_URL. In this specific server configuration, authentication does not seem to work as expected.

Any suggestions or insights into what might be causing this timeout error would be greatly appreciated. Thank you!

Answer 1

Just Remove this line from production environment::: NEXT_AUTH_URL =- i'm sure your problem will be solve

Answer 2

I've just had this same error (504) when trying to login in production using c NextAuth credentials.

I noticed that I didn't have any NEXT_AUTH_URL env in Vercel, in my production envs.

After adding it, the problem seem to have been gone. At least so far.

Where are you deploying your application? If it's in Vercel, I recommend you also add your env variables there. I had many production errors for missing it.