Help Needed: ReferenceError: Cannot Access 'authConfig' Before Initialization in NextAuth Setup

[shkarDiary]

Hello everyone,

I've been working on setting up authentication in my Next.js application using NextAuth, and I've encountered a persistent issue that I hope to get some expert advice on.

Issue
I'm receiving the following error when trying to initialize my NextAuth configuration:

 Error [ReferenceError]: Cannot access 'authConfig' before initialization
    at <unknown> (webpack-internal:///(middleware)/./auth.config.ts:3)
    at Module.authConfig (webpack-internal:///(middleware)/./auth.config.ts:3:57)
    at eval (webpack-internal:///(middleware)/./src/auth.ts:14:50)
    at (middleware)/./src/auth.ts (file://C:\Users\sslem\Desktop\petsoft-project\.next\server\src\middleware.js:980:1)
    at __webpack_require__ (file://C:\Users\sslem\Desktop\petsoft-project\.next\server\edge-runtime-webpack.js:37:33)
    at fn (file://C:\Users\sslem\Desktop\petsoft-project\.next\server\edge-runtime-webpack.js:285:21)
    at eval (webpack-internal:///(middleware)/./src/lib/server-utils.ts:10:63)
    at (middleware)/./src/lib/server-utils.ts (file://C:\Users\sslem\Desktop\petsoft-project\.next\server\src\middleware.js:1013:1)
    at __webpack_require__ (file://C:\Users\sslem\Desktop\petsoft-project\.next\server\edge-runtime-webpack.js:37:33)
    at fn (file://C:\Users\sslem\Desktop\petsoft-project\.next\server\edge-runtime-webpack.js:285:21)
    at eval (webpack-internal:///(middleware)/./auth.config.ts:8:75)

Here's the relevant code snippet and additional context:

auth.config.ts

import { NextAuthConfig } from "next-auth";
import Credentials from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import { getUserByEmail } from "@/lib/server-utils";
import { authSchema } from "@/lib/validations";

export const authConfig = {
  pages: {
    signIn: "/login",
  },
  providers: [
    Credentials({
      async authorize(credentials) {
        const validatedFormData = authSchema.safeParse(credentials);

        if (!validatedFormData.success) {
          return null;
        }

        const { email, password } = validatedFormData.data;
        const user = await getUserByEmail(email);

        if (!user) {
          console.log("user not found");
          return null;
        }

        const isValidPassword = await bcrypt.compare(password, user.hashedPassword);

        if (!isValidPassword) {
          console.log("password is not valid");
          return null;
        }

        return user;
      },
    }),
  ],
  callbacks: {
    authorized: ({ auth, request }) => {
      const isTryingToAccessApp = request.nextUrl.pathname.includes("/app");

      if (isTryingToAccessApp && auth?.user) {
        return true;
      } else if (isTryingToAccessApp && !auth?.user) {
        return false;
      } else if (!isTryingToAccessApp && auth?.user) {
        return Response.redirect(new URL("/app/dashboard", request.nextUrl));
      } else if (!isTryingToAccessApp && !auth?.user) {
        return true;
      }
      return false;
    },
    jwt: ({ token, user }) => {
      if (user) {
        token.userId = user.id;
      }
      return token;
    },
    session: ({ session, token }) => {
      if (session.user) {
        session.user.id = token.userId;
      }
      return session;
    },
  },
} satisfies NextAuthConfig;

auth.ts

import NextAuth from "next-auth";
import { authConfig } from "../auth.config";

const nextAuthHandler = NextAuth({
  ...authConfig,
});

export const {
  auth,
  signIn,
  signOut,
  handlers: { GET, POST },
} = nextAuthHandler;

I'm seeking guidance on the following:

Potential Causes: What could be causing this ReferenceError?
Best Practices: Are there any best practices for organizing and initializing NextAuth configurations to avoid such issues?
Troubleshooting Tips: Any additional debugging steps I should consider?

[SajawalHassan]

Also getting the same error, am on next-auth version 5.0.0-beta.19.

I have two files, one for the config and the other for the actual auth:
auth.config.ts

import Credentials from "next-auth/providers/credentials";
import type { NextAuthConfig } from "next-auth";
import { loginSchema } from "@/schemas/auth-schema";
import { getUserByEmail } from "@/queries/auth-queries";
import { scryptSync } from "crypto";

export const authConfig = {
  providers: [
    Credentials({
      async authorize({ credentials }) {
        const validatedData = loginSchema.safeParse(credentials);
        if (!validatedData.success) return null;

        const { email, password } = validatedData.data;

        const user = await getUserByEmail(email);
        if (!user || !user.password) return null;

        const salt = user.password.slice(64);
        const originalPassHash = user.password.slice(0, 64);
        const currentPassHash = scryptSync(password, salt, 32).toString("hex");
        const passIsValid = originalPassHash === currentPassHash;
        if (!passIsValid) return null;

        return user;
      },
    }),
  ],
} satisfies NextAuthConfig;

auth.ts

import NextAuth from "next-auth";
import { authConfig } from "./auth.config";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { db } from "@/lib/db";

export const { auth, handlers, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(db),
  session: { strategy: "jwt" },
  ...authConfig,
});

My api route:
/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth";
export const { GET, POST } = handlers;

[fristyr]

Having the same issue

[SajawalHassan]

So I found a fix, apparently, for whatever reason, making the query to get the user inside the authorize function works. In my case as well as in @shkarDiary case, we are getting the user like this:

const user = await getUserByEmail(email);

Just making the query directly:

const user = await db.user.findUnique({
  where: {
    email: email as string,
  },
});

fixes it.

[shubh95rai]

thank you so much bro! i wasted 4 hours on this error