Nothing happens after setting up credentials.

[Altroo]

Hello, i'm having this issue after login with credentials, my django backend is working, but on the front end nothing works it just shows : http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Flogin
keeps redirecting to the same url.

Those are my files :
auth.ts

import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
import { z } from "zod";
import { allowAnyInstance } from "@/utils/helpers";
import { postApi } from "@/store/services/_init/_initAPI";
import { InitStateInterface, InitStateToken } from "@/types/_init/_initTypes";
import { setCookie } from "@/utils/cookies";
import { AccountPostLoginResponseType, tokenUser } from "@/types/account/accountTypes";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      id: "",
      type: "credentials",
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "email", placeholder: "email" },
        password: { label: "Password", type: "password", placeholder: "password" },
      },
      async authorize(credentials) {
        const validatedCredentials = z.object({
          email: z.string().email(),
          password: z.string(),
        }).safeParse(credentials);

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

        const { email, password } = validatedCredentials.data;
        const url = `${process.env.NEXT_PUBLIC_ACCOUNT_LOGIN}`;

        try {
          const instance = allowAnyInstance();
          const response: AccountPostLoginResponseType = await postApi(url, instance, {
            email,
            password,
          });

          if (response.status === 200) {
            return {
              user: response.data.user,
              access: response.data.access,
              access_expiration: response.data.access_expiration,
              refresh: response.data.refresh,
              refresh_expiration: response.data.refresh_expiration,
            };
          }
        } catch (e) {
          console.log("Login error", e);
        }

        return null;
      },
    }),
  ],

  secret: process.env.NEXTAUTH_SECRET,

  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },

  jwt: {
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },

  pages: {
    signIn: "/login",
  },

  callbacks: {
    async signIn({ user, account }) {
      if (account?.provider === "credentials") {
        account.user = user.user as tokenUser;
        account.access = user.access as string;
        account.refresh = user.refresh as string;
        account.access_expiration = user.access_expiration as string;
        account.refresh_expiration = user.refresh_expiration as string;
        return true;
      }
      return false;
    },

    async jwt({ token, account }) {
      if (account) {
        token.access = account.access;
        token.access_expiration = account.access_expiration;
        token.refresh_expiration = account.refresh_expiration;
        token.refresh = account.refresh;
        token.user = account.user as tokenUser;

        // Set cookie with token information
        const newInitStateToken: InitStateInterface<InitStateToken> = {
          initStateToken: {
            user: account.user,
            access: account.access as string,
            refresh: account.refresh as string,
            access_expiration: account.access_expiration as string,
            refresh_expiration: account.refresh_expiration as string,
          },
        };

        setCookie('@initStateToken', newInitStateToken, {
          maxAge: 30 * 24 * 60 * 60, // 30 days
          sameSite: 'lax',
          path: '/',
          secure: process.env.NODE_ENV !== 'development',
        });
      }

      return token;
    },

    async session({ session, token }) {
      session.accessToken = token.access as string;
      session.refreshToken = token.refresh as string;
      session.accessTokenExpiration = token.access_expiration as string;
      session.refreshTokenExpiration = token.refresh_expiration as string;
      session.user = token.user as tokenUser;

      return session;
    },
  },

  debug: process.env.NODE_ENV !== "production",
});

middleware.ts

import { auth } from "@/auth";
import { getToken } from "@auth/core/jwt";
import { NextResponse } from "next/server";

export default auth(async (req) => {
  const token = await getToken({
    req,
    secret: process.env.NEXTAUTH_SECRET,
  });

  const { pathname } = req.nextUrl;

  if (!token) {
    // If unauthenticated and NOT on the login page, redirect to login
    if (pathname !== "/login") {
      return NextResponse.redirect(new URL("/login", req.url));
    }
  } else if (pathname === "/login") {
    // If already authenticated and on the login page, redirect to the home page
    return NextResponse.redirect(new URL("/", req.url));
  }

  return NextResponse.next();
});

// Optionally, don't invoke Middleware on some paths
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

[...nextauth]/route.ts

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

global layout.tsx

import type {Metadata} from "next";
import "@/styles/globals.sass";
import React from "react";
import {AppRouterCacheProvider} from '@mui/material-nextjs/v15-appRouter';
import SessionProvider from "@/providers/sessionProvider";
import StoreProvider from "@/providers/storeProvider";
import {AppProps} from "next/app";
import {InitContextProvider} from "@/contexts/InitContext";
import {auth} from "@/auth";


export const metadata: Metadata = {
  title: "AI worx App",
  description: "",
  icons: {
    icon: '/favicon.ico',
  },
};

interface EntryPointProps extends AppProps {
  children: React.ReactNode;
}

const RootLayout: React.FC<EntryPointProps> = async (props) => {
  const session = await auth();
  return (
    <html lang="en">
    <body>
    <SessionProvider session={session}>
      <StoreProvider>
        <InitContextProvider>
          <AppRouterCacheProvider>
            {props.children}
          </AppRouterCacheProvider>
        </InitContextProvider>
      </StoreProvider>
    </SessionProvider>
    </body>
    </html>
  );
}

export default RootLayout;

page.tsx

"use client";
import { NextPage } from "next";
import { signIn, signOut, useSession } from "next-auth/react";
import { useFormik } from "formik";
import { z } from "zod";
import { withZodSchema } from "formik-validator-zod";
import { Button, Container, TextField, Typography } from "@mui/material";
import { useAppDispatch } from "@/utils/hooks";
import { useSearchParams } from "next/navigation";
import { useEffect, useState, useCallback, useTransition } from "react";
import { allowAnyInstance, setFormikAutoErrors } from "@/utils/helpers";
import { AccountPostLoginResponseType } from "@/types/account/accountTypes";
import { bulkCookiesDeleter, postApi } from "@/store/services/_init/_initAPI";
import { accountPostRegisterAction } from "@/store/actions/account/accountActions";
import { ThemeProvider } from "@mui/system";
import { LoadingButton } from "@mui/lab";
import { getDefaultTheme } from "@/utils/themes";
import { refreshAppTokenStatesAction } from "@/store/actions/_init/_initActions";
import { SITE_ROOT } from "@/utils/routes";

const Login: NextPage = () => {
  const { data: session } = useSession();
  const dispatch = useAppDispatch();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();
  const error = searchParams.get("error") as string;

  const [sessionUpdated, setSessionUpdated] = useState(false);
  const [errorState, setErrorState] = useState<string | Array<string> | undefined>(undefined);

  const accessDeniedMessage = "Service non disponible.";

  const handleErrorsAndSession = useCallback(() => {
    if (error === "AccessDenied") {
      setErrorState(accessDeniedMessage);
    } else {
      setErrorState(error);
    }
    if (session && !sessionUpdated) {
      dispatch(refreshAppTokenStatesAction(session));
      setSessionUpdated(true);
    }
  }, [dispatch, error, session, sessionUpdated]);

  useEffect(() => {
    handleErrorsAndSession();
  }, [handleErrorsAndSession]);

  const loginFormSchema = z.object({
    email: z.string().email("Invalid email address").min(1, "Required"),
    password: z.string().min(8, "Password must be at least 8 characters").min(1, "Required"),
  });

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      globalError: "",
    },
    validate: withZodSchema(loginFormSchema),
    onSubmit: async (values, { setFieldError }) => {
      startTransition(async () => {
        const url = `${process.env.NEXT_PUBLIC_ACCOUNT_LOGIN}`;
        try {
          const instance = allowAnyInstance();
          const response: AccountPostLoginResponseType = await postApi(url, instance, {
            email: values.email,
            password: values.password,
          });
          if (response.status === 200) {
            dispatch(accountPostRegisterAction(response.data));
            await signIn("credentials", { email: values.email, password: values.password, redirect: false });
          }
        } catch (e) {
          setFormikAutoErrors({ e, setFieldError });
        }
      });
    },
  });

  const logOutHandler = async () => {
    await bulkCookiesDeleter("/cookies");
    await signOut({ redirect: true, redirectTo: SITE_ROOT });
  };

  return (
    <Container maxWidth="sm">
      {!session ? (
        <>
          <Typography variant="h4" component="h1" gutterBottom>
            Login
          </Typography>
          {errorState && <span>{errorState}</span>}
          <form onSubmit={formik.handleSubmit}>
            <TextField
              fullWidth
              id="email"
              name="email"
              label="Email"
              variant="outlined"
              margin="normal"
              value={formik.values.email}
              onChange={formik.handleChange}
              error={formik.touched.email && Boolean(formik.errors.email)}
              helperText={formik.touched.email && formik.errors.email}
            />
            <TextField
              fullWidth
              id="password"
              name="password"
              label="Password"
              type="password"
              variant="outlined"
              margin="normal"
              value={formik.values.password}
              onChange={formik.handleChange}
              error={formik.touched.password && Boolean(formik.errors.password)}
              helperText={formik.touched.password && formik.errors.password}
            />
            {formik.errors.globalError && <span>{formik.errors.globalError}</span>}
            <ThemeProvider theme={getDefaultTheme()}>
              <LoadingButton
                loading={isPending}
                disabled={!(formik.isValid && !isPending)}
                type="submit"
                color="primary"
                size="large"
                variant="outlined"
              >
                Login
              </LoadingButton>
            </ThemeProvider>
          </form>
        </>
      ) : (
        <>
          <Typography variant="h5" gutterBottom>
            Welcome, {session.user.email}
          </Typography>
          <Button variant="contained" color="secondary" onClick={logOutHandler}>
            Logout
          </Button>
        </>
      )}
    </Container>
  );
};

export default Login;

result redirects to the same page over and over and over :

please help me.

[Altroo]

Problem was in the id: "", in auth.js, i've removed it and it's now working.