nextauth returning html instead of json file on self hosting service with apache proxy.
Answered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
i have created a dashboard for my clients webiste to make changes to their database, however the login logic is having issue such as login page not rendering because of
or when i remove the session, the page renders, but typing anything i the form returns an html instead of a json file the errors are
as mentioned before the service uses apache proxy to handle ssl certification
//app/login/page
const session = await getServerSession(authOptions)
if (session) {
redirect("/dashboard")
}
or when i remove the session, the page renders, but typing anything i the form returns an html instead of a json file the errors are
Failed to load resource: the server responded with a status of 500 ()
[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON Object
overrideMethod @ chrome-extension://f…ld/installHook.js:1
api/auth/_log:1
Failed to load resource: the server responded with a status of 500 ()
api/auth/providers:1
Failed to load resource: the server responded with a status of 500 ()
[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON Object
overrideMethod @ chrome-extension://f…ld/installHook.js:1
api/auth/_log:1
Failed to load resource: the server responded with a status of 500 ()
Navigation to https://rekangroup.com/login was restored from back/forward cache (see https://web.dev/bfcache/)
/api/auth/signin?callbackUrl=%2Fdashboard:1
GET https://rekangroup.com/api/auth/signin?callbackUrl=%2Fdashboard 500 (Internal Server Error)
Navigated to https://rekangroup.com/api/auth/signin?callbackUrl=%2Fdashboard
as mentioned before the service uses apache proxy to handle ssl certification
Answered by Northeast Congo Lion
it was the bcrypt library not working, must be a compatibility issue or the library breaks during uploading it on the server
39 Replies
Northeast Congo LionOP
the website is https://rekangroup.com/login
//middleware
import { withAuth } from "next-auth/middleware"
import { NextResponse } from "next/server"
export default withAuth(
function middleware(req) {
const token = req.cookies.get("next-auth.session-token") || req.cookies.get("__Secure-next-auth.session-token")
const isAuthenticated = !!token
const path = req.nextUrl.pathname
// If not authenticated and trying to access protected routes
if (!isAuthenticated && (path.startsWith("/dashboard") || path.startsWith("/api/admin"))) {
return NextResponse.redirect(new URL("/login", req.url))
}
// If authenticated and trying to access login page
if (isAuthenticated && path === "/login") {
return NextResponse.redirect(new URL("/dashboard", req.url))
}
return NextResponse.next()
},
{
callbacks: {
authorized: ({ token }) => !!token,
},
},
)
export const config = {
matcher: ["/dashboard/:path*", "/api/admin/:path*"],
}
//app/login/page.tsx
import { LoginForm } from "@/components/dashboard/LoginForm"
import { getServerSession } from "next-auth/next"
import { redirect } from "next/navigation"
import { authOptions } from "@/lib/auth/config"
export default async function LoginPage() {
const session = await getServerSession(authOptions)
if (session) {
redirect("/dashboard")
}
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
<div className="text-center">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">Admin Login</h2>
<p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
Enter your credentials to access the dashboard
</p>
</div>
<div className="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8">
<LoginForm />
</div>
</div>
</div>
)
}
//app/api/auth/[...auth]/route.ts
error picture
also no error happens on vercel and locally, only on the hosting service
@B33fb0n3 can you try the same inside a guest browser? Not incognito, not normal browser - guest mode
Northeast Congo LionOP
Will do once i get home. Im in lecture, and my newest update broke the login page again Sry
@B33fb0n3 can you try the same inside a guest browser? Not incognito, not normal browser - guest mode
Northeast Congo LionOP
What would i be looking for btw ?
@Northeast Congo Lion What would i be looking for btw ?
You check if the error persists. The error message tells something about an Extension, that’s why I want to test this and guest mode does not have any extensions
Northeast Congo LionOP
I ran the same code in vercel and it worked
https://rekan-group.vercel.app/login
no db is connected but the auth checks unlike the main website
https://rekan-group.vercel.app/login
no db is connected but the auth checks unlike the main website
@B33fb0n3 You check if the error persists. The error message tells something about an Extension, that’s why I want to test this and guest mode does not have any extensions
Northeast Congo LionOP
Will do, although if it helps i do test it through phone and my pc in 3 different browsers
But they all return the same output
@Northeast Congo Lion I ran the same code in vercel and it worked
https://rekan-group.vercel.app/login
**no db is connected but the auth checks unlike the main website**
Hm weird. Yea, test it in guest mode and if that still does not work, make sure to provide a repro of the issue
@B33fb0n3 Hm weird. Yea, test it in guest mode and if that still does not work, make sure to provide a repro of the issue
Northeast Congo LionOP
Will do thanks
@B33fb0n3 Hm weird. Yea, test it in guest mode and if that still does not work, make sure to provide a repro of the issue
Northeast Congo LionOP
on guest mode i dont even need to input the error shows up as i enter the page
Northeast Congo LionOP
i simply changed the auth api from api/auth/[...nextauth]/route.ts to api/auth/[...nextauth].ts and the issue started happening on the client side aswell, now idk if my origin way was wrong or what :')
@Northeast Congo Lion i simply changed the auth api from api/auth/[...nextauth]/route.ts to api/auth/[...nextauth].ts and the issue started happening on the client side aswell, now idk if my origin way was wrong or what :')
Orinoco Crocodile
this usually happen in next js, but we dont need to define route.ts just path till parent folder name is enough usually
@Northeast Congo Lion i simply changed the auth api from api/auth/[...nextauth]/route.ts to api/auth/[...nextauth].ts and the issue started happening on the client side aswell, now idk if my origin way was wrong or what :')
The syntax with route.ts is the syntax for the app router. I assume you are using the app router, so please change it back to route.ts. Also, please share your authOptions. Also share what version from next-auth you are using
@B33fb0n3 The syntax with route.ts is the syntax for the app router. I assume you are using the app router, so please change it back to route.ts. Also, please share your authOptions. Also share what version from next-auth you are using
Northeast Congo LionOP
next-auth version
"next-auth": "^4.24.11",
@Northeast Congo Lion next-auth version "next-auth": "^4.24.11",
can you remove (for a moment) the
pages
or at least give all another route? For example like this:@B33fb0n3 can you remove (for a moment) the `pages` or at least give all another route? For example like this:
Northeast Congo LionOP
i cant see the example,
@Northeast Congo Lion i cant see the example,
yea, my example was to remove the lines. It's hard for me to visualize to remove something, sorry
@B33fb0n3 yea, my example was to remove the lines. It's hard for me to visualize to remove something, sorry
Northeast Congo LionOP
oh mb 😂 i will check and see how it works on the server
@B33fb0n3 yea, my example was to remove the lines. It's hard for me to visualize to remove something, sorry
Northeast Congo LionOP
i think it might works sinfe now i can type the api url and not get an error locally :') will see how it goes
@B33fb0n3 yea, my example was to remove the lines. It's hard for me to visualize to remove something, sorry
Northeast Congo LionOP
nope :')
this is my login form
@Northeast Congo Lion nope :')
Northeast Congo LionOP
this error happened after filling the login form
Northeast Congo LionOP
@B33fb0n3 that helps a lot. Remove both of these boxes:
Northeast Congo LionOP
oki
@B33fb0n3 that helps a lot. Remove both of these boxes:
Northeast Congo LionOP
ah still error
i did find a log error tho
hmm.. I guess I am not enough in your project to be able to solve your issue
@B33fb0n3 hmm.. I guess I am not enough in your project to be able to solve your issue
Northeast Congo LionOP
the last few errors says bycript module is not found or broken, if it ios broken can it cause error ?
the problem is even with ssh tunnel i cant run any code such as npm install or build, so i have todo it locally and the upload it, but another issue is im using windows and the server runs on linux so idk how compatibile it can be
Northeast Congo LionOP
it was the bcrypt library not working, must be a compatibility issue or the library breaks during uploading it on the server
Answer
Northeast Congo LionOP
an error log was found with error
⨯ [Error: /home/[user]/example.com/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header] {
code: 'ERR_DLOPEN_FAILED'
}
/