Next-Auth v5 beta not redirecting with credentials login with nextjs 14.2 ?

[vishal-kumawat-official]

Bug : Nextjs 14 + nextAuth

when i login with google or github login
it redirect me to the /settings page as required

but when i login with credentials then it redirect to /settings page but the url on the browser stills remains /auth/login (default login page)

when i reload the page url changes to /settings page when i needed.

TODO : - i want when i login with credentials it should redirect me to /settings page as was redirecting when github or google providers

i will be happy if you fix :)

"dependencies": {
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"bcryptjs": "^2.4.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.378.0",
"mongoose": "^8.4.1",
"next": "14.2.3",
"next-auth": "^5.0.0-beta.16",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}

Login Action :-

export const loginAction = async (previousState: any, formData: FormData) => {

  const { email, password } = Object.fromEntries(formData);

  // console.log(email, password);

  try {
    await signIn("credentials", { email, password });
  } catch (error) {
    if(error instanceof AuthError) {
      switch (error.type) {
        case "CredentialsSignin":
          return { error: "Invalid email or password" };
        default:
          return { error: "Something went wrong!" };
      }
    }
    //NEXT_REDIRECT ERROR HANDLING
    throw error;
  }
}

middleware.ts:-

import { NextResponse } from 'next/server';
import NextAuth from 'next-auth';
import authConfig from '@/auth.config';

const { auth } = NextAuth(authConfig);

export default auth(async (req) => {
  const { nextUrl, auth } = req;
  const authRoute = nextUrl.pathname.startsWith('/auth/login') || nextUrl.pathname.startsWith('/auth/register');
  const adminRoute = nextUrl.pathname.startsWith('/settings');
  const isLoggedIn = auth;

  if (authRoute && isLoggedIn) {
    return NextResponse.redirect(new URL('/settings', nextUrl));
  }

  if (adminRoute && !isLoggedIn) {
    return NextResponse.redirect(new URL('/auth/login', nextUrl));
  }

  // If none of the conditions are met, return a default response
  return NextResponse.next();
});

// Optionally, don't invoke Middleware on some paths
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
  unstable_allowDynamic: [
    '/node_modules/mongoose/dist/browser.umd.js',
    '/src/lib/database.ts',
    '/src/auth.config.ts'
  ],
};

auth.ts :-

import NextAuth, { type DefaultSession } from "next-auth";
import authConfig from "@/auth.config";
import { getUserByEmail } from "./lib/actions";

import { User } from "./lib/models";
import connectDB from "./lib/database";

declare module "next-auth" {
  interface Session {
    user: {
      isAdmin: boolean;
      id: string;
      username: string;
    } & DefaultSession["user"];
  }
}

export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  callbacks: {
    async signIn({ user, account, profile }) {
      if (account?.provider === "github") {
        connectDB();
        try {
          const userFound = await User.findOne({
            email: profile?.email?.toLocaleLowerCase(),
          });

          if (!userFound) {
            const newUser = new User({
              username: profile?.login,
              email: profile?.email?.toLocaleLowerCase(),
              img: profile?.avatar_url,
              providerName: account?.provider,
            });

            await newUser.save();
          }
        } catch (err) {
          console.log(err);
          return false;
        }
      }
      if (account?.provider === "google") {
        connectDB();
        try {
          const userFound = await User.findOne({
            email: profile?.email?.toLocaleLowerCase(),
          });

          if (!userFound) {
            const newUser = new User({
              username: profile?.name,
              email: profile?.email?.toLocaleLowerCase(),
              img: profile?.picture,
              providerName: account?.provider,
            });

            await newUser.save();
          }
        } catch (err) {
          console.log(err);
          return false;
        }
      }
      return true;
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub as string;
        session.user.username = token.username as string;
        session.user.isAdmin = token.isAdmin as boolean;
      }

      return session;
    },
    async jwt({ token }) {
      if (!token.sub) return token;

      const existingUser = await getUserByEmail(token.email as string);

      if (!existingUser) {
        return token;
      }

      token.sub = existingUser?._id.toString();
      token.isAdmin = existingUser?.isAdmin;
      token.username = existingUser?.username;

      return token;
    },
  },
  session: { strategy: "jwt" },
  ...authConfig,
});

auth.config.ts :-

import type { NextAuthConfig } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import connectDB from "./lib/database";
import { User } from "./lib/models";
import bcrypt from "bcryptjs";
import github from "next-auth/providers/github";
import google from "next-auth/providers/google";

const login = async (credentials: any) => {
  try {
    connectDB();
    const user = await User.findOne({ email: credentials.email });

    if (!user || !user.password) return null;

    const isPasswordCorrect = await bcrypt.compare(
      credentials.password,
      user.password
    );

    if (!isPasswordCorrect) return null;
    return user;
  } catch (err) {
    console.log(err);
    throw new Error("Failed to login!");
  }
};

export default {
  providers: [
    github({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    CredentialsProvider({
      async authorize(credentials) {
        try {
          const user = await login(credentials);
          return user;
        } catch (err) {
          return null;
        }
      },
    }),
  ],
} satisfies NextAuthConfig;

[vishal-kumawat-official]

i am open for all discussion.

[xkelxmc]

I have same problem with nextjs 14.2.4, and next-auth 5.0.0-beta19

callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard')
      if (isOnDashboard) {
        if (isLoggedIn) return true
        return false
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl))
      }
      return false
    },
  },

and my URL not changed, but page content from dashboard page

[vishal-kumawat-official]

Ya url not changing although content is changing -->
it worked me for next-auth 5.0.0-beta16 and nextjs 14.1
having issues in 14.2 (: