:3000/api/auth/session:1     Failed to load resource: the server responded with a status of 404 (Not Found)
app-index.js:31 [next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON Object
window.console.error @ app-index.js:31
:3000/api/auth/session:1     Failed to load resource: the server responded with a status of 404 (Not Found)
app-index.js:31 [next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON Object
window.console.error @ app-index.js:31
:3000/api/auth/_log:1     Failed to load resource: the server responded with a status of 404 (Not Found)
:3000/api/auth/_log:1     Failed to load resource: the server responded with a status of 404 (Not Found)

"use client";
import { useState } from "react";

import { SessionProvider } from "next-auth/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

export default function Provider({ children }: { children: React.ReactNode }) {
  const [client] = useState(new QueryClient());

  if (process.env.NEXT_PUBLIC_VITE_ENVIRONMENT === undefined) {
    console.error("Enviroment file not defined or staging variable not defined (.env)")
  }

  return (
    <SessionProvider>

      <QueryClientProvider client={client}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
      </QueryClientProvider>
    </SessionProvider>
  );
}

import { authLogin } from "@/services/apis/xxx/requests/auth";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",

      credentials: {
        email: { label: "Email", placeholder: "Enter email"},
        password: { label: "Password", type: "password", placeholder: "Please enter password"},
      },
      async authorize(credentials, req) {
        
        // const res = await authLogin({
        //   email: "woo@mail.com",
        //   password: "ksdfsfewyb968h"
        // })
        // const res = await fetch("url/api/auth/login/", {
        //   method: "POST",
        //   headers: {
        //     "Content-Type": "application/json",
        //   },
        //   body: JSON.stringify({
        //     email: "test@mail.com",
        //     password: "khWLrThnCyb968h"
        //   }),
        // });
        // console.log(res)

        // const user = await res.json();
        if (user) {
          return user;
        } else {
          return null;
        }
      },
    }),
  ],

  pages: {
    signIn: "/auth/signIn",
  },
});

export { handler as GET, handler as POST}

{
    "access": "eyJhbGciOi2323242349.eyJ0b2tlbl90eX234234wiZXhwIjoxNzEyNzUzOTc5LCJpYXQiOjE2OTcyMDE5NzksImp0aSI6ImZhOTlkMmNiNWU4YjRhMjliZTZlMDQ0ZDdfwerwMTYyIiwidXNlcl9pZCI6MTR9.r8lAcUrkKP5oLwOEl--V7uOg48DMQ3ECtwrnSsE831w",
    "refresh": "",
    "user": {
        "pk": 14,
        "email": "test@gmail.com"
    }
}

{
    "error": null,
    "status": 200,
    "ok": true,
    "url": "https://domain.com/api/auth/signin?csrf=true"
}

export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/dashboard/*"],
  // matcher: ["/((?!register|api|login).*)"],
};

'use client'

import { usePathname, useRouter } from 'next/navigation'

import '../../src/styles/styles.scss'
import Provider from '../utils/provider'
import helperAuth from '@/utils/helperAuth'

import Login from './auth/login/page'
import Register from './auth/register/page'

export const ClientSideAuthCheck = ({ children }: any) => {
  const router = useRouter()
  const pathname = usePathname()
  const isAuth = helperAuth.checkIfAuthenticated()

  const object:any = {
    "/auth/login": <Login />,
    "/auth/register": <Register />
  }
  const activePathname = object[pathname]

  if (!isAuth) {
    if(activePathname) {
      if (!location.pathname.startsWith('/auth')) {
        router.replace(pathname);
      }
      return activePathname
    } else {
      router.replace("/auth/login")
      return object["/auth/login"]
    }
  }
  return children
}

export default function RootLayout({ children, }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>
          <ClientSideAuthCheck children={children} />
        </Provider>
      </body>
    </html>
  )
}