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

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/apiNEXT_PUBLIC_API_URL=https://api.my_domain.com/apiAPI_TOKEN="my-api-token"NEXTAUTH_URL=http://localhost:3000NEXTAUTH_SECRET="next-auth-secret"

Here is my Production setup:

• .env.local

  API_URL=https://api.mydomain.com/apiNEXT_PUBLIC_API_URL=https://api.my_domain.com/apiAPI_TOKEN="my-api-token"NEXTAUTH_URL=https://my_domain.comNEXTAUTH_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!