I can't implement nextauth in a project with vite

[reunix]

Hello everyone, I've been unable to implement the very simple nextauth for credentials for about 8 days, but I can't do it right away as soon as I open the project it returns the errors:

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON 
{error: {…}, url: '/api/auth/session', message: `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`}
client
: 
true
error
: 
{message: `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`, stack: `SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON`, name: 'SyntaxError'}
message
: 
"Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON"
url
: 
"/api/auth/session"
[[Prototype]]
: 
Object

on any route I go, I've tried several ways, I've tried several help channels, documentation, all... I believe it's because of the location of the folders or because of vite?

can you help me please?

ja tentei de tudo, ChatGTP, google, foruns, documentação... estou a mais de 8 dias parado por conta desse erro:

Tentando implementar o NextAuth, daí qq rota que vá: retorna esse erro:

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON 

I confess that it gives me a headache to follow the documentation, and as days go by, it gets more difficult, so I'm trying here now!

I downloaded the example from NExtAuth itself, and it seems to me that it worked, despite always returning the error user not registered , invalidated etc... but the internal error does not occur.

I suspect Vite!!

This project is a Dashboard that I downloaded from github, it uses vite as a server,
everything seemed perfect, the project was going very well, until I had to implement authentication with NextAuth,

*I imagine that in addition to something in the routes, I must be making a mistake in the direction of the folders, including the session, another thing that I noticed is that some use a [...nextauth] folder and inside it a router file, others use [.. .nextauth] as the file already (my case now, but I've tried both ways), another thing, there are some that put the api folder inside /src directly, others put it inside the /pages folder, others put the folder pages inside src/api, finally tied a huge knot in my mind. And since I'm alone I'm almost freaking out!! not to mention the delay of the project

Obs. the system doesn't even arrive at [...nextauth].ts, it doesn't execute anything inside,
the error occurs as soon as I access the system, in any route and it already runs as if it had tried without me having to click the Enter button!!! (on any route)

Here's a print from the browser!!

HELP!

As I don't even know which part I owe here, I go for everyone involved, from the route to the SignIn().

Main.jsx:

import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { NextAuthSessionProvider } from './contexts/sessionProvider';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import ThemeProvider from './contexts/ThemeContext';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <NextAuthSessionProvider>
     <Router>
       <ThemeProvider>
         <App />
       </ThemeProvider>
     </Router>
   </NextAuthSessionProvider>
 );

App.Jsx:

    import React, { createContext } from 'react'
    import { Route, Routes, useLocation } from 'react-router-dom'
    import './components/charts/ChartjsConfig'
    import './css/style.css'
    import Dashboard from './pages/Dashboard'
    import Payments from './pages/finance/payments/page'
    import Transactions from './pages/finance/transactions/page'
    
    import Clients from './pages/clients/page'
    import Login from './pages/login/page'
    
    export const RotasContext = createContext({})
    function App() {
    
      return (
        <>
          <RotasContext.Provider value>
            <Routes>
              <Route exact path="/" element={<Dashboard />} />
              <Route exact path="/login" element={<Login />} />
              {/* <Route exact path="/api/auth/error" element={<Error />} /> */}
              <Route exact path="/clients" element={<Clients />} />
              <Route exact path="/finance/transactions" element={<Transactions />} />
              <Route exact path="/finance/payments" element={<Payments />} />
            </Routes>
          </RotasContext.Provider>
        </>
      )
    }
    export default App

Page.tsx = Pagina Login (que chama o signIn() )

'use client'
 import { signIn } from 'next-auth/react'
 import { ChangeEvent, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { ToastMessage } from '../../components'
 
 export default function Login() {
 
 	const { register, handleSubmit } = useForm()
 
 	const [loading, setLoading] = useState(false)
 
 	const [formValues, setFormValues] = useState({
 		email: "",
 		password: "",
 	})
 
 	const onSubmit = async (e: React.FormEvent) => {
 		e.preventDefault()
 
 		try {
 
 			setLoading(true)
 			setFormValues({ email: "", password: "" })
 
 			console.log('okokok, ', formValues)
 
 			const responseReturn = await signIn("credentials", {
 				redirect: false,
 				email: formValues.email,
 				password: formValues.password,
 
 				callbackUrl: '/finance/payments'
 			})
 		
 			console.log('responseReturn:', responseReturn)
 
 		} catch (error) {
 			setLoading(false)
 			console.log('eerorr;: ', error)
 			// setError(error)
 		}
 	}
 
 	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const { name, value } = event.target
 		setFormValues({ ...formValues, [name]: value })
 	}
 
 	return (
 
 		<section className="bg-gray-50 dark:bg-gray-900">
 			<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
 				<a href="#" className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
 					<img className="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo" />
 					XVendas
 				</a>
 				<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
 					<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
 						<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
 							Faça login com sua conta
 						</h1>
 						<form
 							onSubmit={onSubmit}
 							className="space-y-4 md:space-y-6"
 					
 						>
 							<div>
 								<label htmlFor='email' className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Seu email</label>
 								<input
 									type="email"
 									name="email"
 									autoComplete="username"
 									id="email"
 									value={"renato-muniz@hotmail.com"}
 									required
 									onChange={handleChange}
 									className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="email@..com" />
 							</div>
 							<div>
 								<label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Senha</label>
 								<input
 									type="password"
 									name="password"
 									required
 									id="password"
 									value={"rena0315"}
 									autoComplete="current-password"
 									onChange={handleChange}
 
 									placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
 							</div>
 							<div className="flex items-center justify-between">
 								<div className="flex items-start">
 									<a href="#" className="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Esqueci minha senha</a>
 								</div>
 							</div>
 							
 							<button
 								type="submit"
 								className="w-full btn bg-indigo-500 hover:bg-indigo-600 text-white">
 								<span className="xs:block ml-1">Entrar</span>
 							</button>
 
 							<p className="text-sm font-light text-gray-500 dark:text-gray-400">
 								Ainda não tem acesso? <a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">Solicite aqui!</a>
 							</p>
 						</form>
 					</div>
 				</div>
 			</div>
 		</section>
 	)
 }

[...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth"
 import CredentialsProvider from "next-auth/providers/credentials";
 
 export const authOptions: NextAuthOptions = {
 
   providers: [
     CredentialsProvider({
       name: "Sign in",
       credentials: {
         email: {
           label: "Email",
           type: "email",
           placeholder: "example@example.com",
         },
         password: { label: "Password", type: "password" },
       },
       async authorize(credentials) {
         if (!credentials?.email || !credentials.password) {
           return null;
         }
 
         const dados = { id: 1, name: 'J Smith', email: 'jsmith@example.com' }
         const user = await JSON.parse(JSON.stringify(dados)).json()
         return user
 
 
       },
     }),
   
   ],
   callbacks: {
     async jwt({ token }) {
       token.userRole = "admin"
       return token
     },
   },
 }
 export default NextAuth(authOptions)
 // export { handler as GET, handler as POST };

NextAuthSessionProvider:

'use client'
  import { SessionProvider } from "next-auth/react"
  
  type Props = {
    children?: React.ReactNode;
  };
  export function NextAuthSessionProvider({ children }: Props) {
    return <SessionProvider>{children}</SessionProvider>
  }

package.json

    {
      "name": "mosaic-react",
      "version": "0.1.0",
      "scripts": {
        "dev": "vite --host 0.0.0.0",
        "build": "vite build",
        "preview": "vite preview"
      },
      "dependencies": {
        "@tailwindcss/forms": "^0.5.5",
        "chart.js": "^4.3.0",
        "chartjs-adapter-moment": "^1.0.1",
        "moment": "^2.29.4",
        "next": "^13.4.19",
        "next-auth": "^4.14.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-flatpickr": "^3.10.13",
        "react-hook-form": "^7.45.4",
        "react-icons": "^4.10.1",
        "react-loading": "^2.0.3",
        "react-loading-skeleton": "^3.3.1",
        "react-router-dom": "^6.11.2",
        "react-toastify": "^9.1.3",
        "react-transition-group": "^4.4.5",
        "uuidv4": "^6.2.13"
      },
      "devDependencies": {
        "@types/react": "^18.2.21",
        "@types/react-dom": "^18.2.7",
        "@vitejs/plugin-react": "^4.0.4",
        "autoprefixer": "^10.4.15",
        "postcss": "^8.4.24",
        "tailwindcss": "^3.3.3",
        "typescript": "5.1.6",
        "vite": "^4.4.9"
      }
    }

ViteConfig

    import { defineConfig } from 'vite'
    import postcss from './postcss.config.js'
    import react from '@vitejs/plugin-react'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      define: {
        'process.env': process.env
      },
      // server: {
      //   port: 3000, // Altere para a porta que desejar
      // },
      css: {
        postcss,
      },
      plugins: [react()],
      resolve: {
        alias: [
          {
            find: /^~.+/,
            replacement: (val) => {
              return val.replace(/^~/, "");
            },
          },
        ],
      },
      build: {
        commonjsOptions: {
          transformMixedEsModules: true,
        }
      }
    })

TscConfig

{
   "compilerOptions": {
     "target": "esnext",
     "module": "commonjs",
     "jsx": "preserve",
     "jsxFactory": "h",
     "jsxFragmentFactory": "Fragment",
     "strict": true,
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,
     "esModuleInterop": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
   "paths": {
     "@/*": [
       "./src/*"
     ]
   },
   "include": [
     "next-env.d.ts",
     ".next/types/**/*.ts",
     "**/*.ts",
     "**/*.tsx",
     // "src/libs/auth.ts",
     // "src/pages/api/auth/[...nextauth].ts",
     // "process.d.ts",
     // "next-auth.d.ts",
   ],
   "exclude": [
     "node_modules"
   ]
 }

.ENV

NEXTAUTH_URL=http://localhost:5173
 NEXTAUTH_SECRET=4lA346O4535468n73+fbYBO0L1uhAqs=

Minha estrutuda das pastas:

ª   App.jsx
  ª   favicon.svg
  ª   main.jsx
  ª   
  +---components
  ª   ª   ButtonLoadingDisable.jsx
  ª   ª   ButtonLoadingDisableAguarde.jsx
  ª   ª   Datepicker.jsx
  ª   ª   DatepickerNew.jsx
  ª   ª   DateSelect.jsx
  ª   ª   DropdownEditMenu.jsx
  ª   ª   DropdownFilter.jsx
  ª   ª   DropdownHelp.jsx
  ª   ª   DropdownNotifications.jsx
  ª   ª   DropdownProfile.jsx
  ª   ª   index.jsx
  ª   ª   LoadingPage.jsx
  ª   ª   LoadingSkeleton.jsx
  ª   ª   ModalFormUsers.jsx
  ª   ª   ModalSearch.jsx
  ª   ª   Pagination.jsx
  ª   ª   StatusTransaction.jsx
  ª   ª   ThemeToggle.jsx
  ª   ª   ToastMessage.tsx
  ª   ª   Tooltip.jsx
  ª   ª   
  ª   +---charts
  ª   ª       BarChart01.jsx
  ª   ª       BarChart02.jsx
  ª   ª       BarChart03.jsx
  ª   ª       ChartjsConfig.jsx
  ª   ª       DoughnutChart.jsx
  ª   ª       LineChart01.jsx
  ª   ª       LineChart02.jsx
  ª   ª       RealtimeChart.jsx
  ª   ª       
  ª   +---partials
  ª       ª   Banner.jsx
  ª       ª   Header.jsx
  ª       ª   Sidebar.jsx
  ª       ª   SidebarLinkGroup.jsx
  ª       ª   
  ª       +---dashboard
  ª               DashboardAvatars.jsx
  ª               DashboardCard01.jsx
  ª               DashboardCard02.jsx
  ª               DashboardCard03.jsx
  ª               DashboardCard04.jsx
  ª               DashboardCard05.jsx
  ª               DashboardCard06.jsx
  ª               DashboardCard07.jsx
  ª               DashboardCard08.jsx
  ª               DashboardCard09.jsx
  ª               DashboardCard10.jsx
  ª               DashboardCard11.jsx
  ª               DashboardCard12.jsx
  ª               DashboardCard13.jsx
  ª               WelcomeBanner.jsx
  ª               
  +---constants
  ª       app-routes.tsx
  ª       
  +---contexts
  ª       AppWrapper.jsx
  ª       sessionProvider.tsx
  ª       ThemeContext.jsx
  ª       
  +---css
  ª   ª   style.css
  ª   ª   tailwind.config.js
  ª   ª   
  ª   +---additional-styles
  ª           flatpickr.css
  ª           utility-patterns.css
  ª           
  +---domain
  ª   +---components
  ª   ª   ª   ModalSearchClientePrincipal.jsx
  ª   ª   ª   ModalSearchClientes.jsx
  ª   ª   ª   SelectPlanosDeConta.jsx
  ª   ª   ª   
  ª   ª   +---header
  ª   ª           ProviderContextSaldoDisponivel.jsx
  ª   ª           ShowSaldoDisponivelCliente.jsx
  ª   ª           ShowSaldoLiquidoDia.jsx
  ª   ª           
  ª   +---interfaces
  ª           IResponseProps.tsx
  ª           
  +---images
  ª       favicon.png
  ª       icon-01.svg
  ª       icon-02.svg
  ª       icon-03.svg
  ª       user-36-01.jpg
  ª       user-36-02.jpg
  ª       user-36-03.jpg
  ª       user-36-04.jpg
  ª       user-36-05.jpg
  ª       user-36-06.jpg
  ª       user-36-07.jpg
  ª       user-36-08.jpg
  ª       user-36-09.jpg
  ª       user-avatar-32.png
  ª       
  +---pages
  ª   ª   Dashboard.jsx
  ª   ª   _app.jsx
  ª   ª   
  ª   +---api
  ª   ª   +---auth
  ª   ª   ª       [...nextauth].ts
  ª   ª   ª       
  ª   ª   +---examples
  ª   ª           jwt.ts
  ª   ª           protected.ts
  ª   ª           session.ts
  ª   ª           
  ª   +---clients
  ª   ª       DropdownFilterPayment.jsx
  ª   ª       ModalClient.jsx
  ª   ª       page.jsx
  ª   ª       ShowClients.jsx
  ª   ª       
  ª   +---finance
  ª   ª   ª   CardSumOfTransactions.jsx
  ª   ª   ª   CardTotalBruto.jsx
  ª   ª   ª   CardTotalLiquido.jsx
  ª   ª   ª   
  ª   ª   +---payments
  ª   ª   ª       CreateUpdatePaymentPageModal.jsx
  ª   ª   ª       DropdownFilterPayment.jsx
  ª   ª   ª       MenuOpctionsRecordPayment.jsx
  ª   ª   ª       page.jsx
  ª   ª   ª       ShowPayments.jsx
  ª   ª   ª       
  ª   ª   +---transactions
  ª   ª           DropdownFilterTypeTransaction.jsx
  ª   ª           page.jsx
  ª   ª           ShowTransactions.jsx
  ª   ª           
  ª   +---login
  ª           page.tsx
  ª           
  +---use-cases
  ª   +---header
  ª   ª   +---usecases
  ª   ª           GetSaldosHeaderUseCase.tsx
  ª   ª           
  ª   +---login
  ª   ª   +---controllers
  ª   ª   +---usecases
  ª   ª           auth.ts
  ª   ª           UserLoginUserCase.tsx
  ª   ª           
  ª   +---payments
  ª   ª   ª   ValidateFormPayment.tsx
  ª   ª   ª   
  ª   ª   +---controllers
  ª   ª   ª       PaymentsController.tsx
  ª   ª   ª       
  ª   ª   +---dtos
  ª   ª   ª       CreateUpdatePaymentsDTO.tsx
  ª   ª   ª       RequestGetPaymentsMainDTO.tsx
  ª   ª   ª       
  ª   ª   +---usecases
  ª   ª           CreatePaymentsUseCase.tsx
  ª   ª           GetPaymentsMainUseCase.tsx
  ª   ª           UpdatePaymentsUseCase.tsx
  ª   ª           
  ª   +---suppliers
  ª   ª       GetClientsMainUseCase.tsx
  ª   ª       
  ª   +---transactions
  ª   ª   +---controllers
  ª   ª   +---dtos
  ª   ª   +---usecases
  ª   ª           GetTransacationsMainUseCase.tsx
  ª   ª           
  ª   +---users
  ª       +---controllers
  ª       +---models
  ª               UsersModel.tsx
  ª               
  +---utils
          Info.jsx
          rotasApp.tsx
          Transition.jsx
          Utils.jsx
          UtilsTs.tsx

[reunix]

Please!!!

[yuggysaputra7]

mee too get eror like you , how fix it?

[rabin-thami]

Please!!!

did you find the solution