i am using next js 14 app router. i am doing the admin panel now.
so for authentication, i decided to use middleware. but as soon as i started to use middleware i got a problem [TypeError: Failed to parse URL from /api/v0/…] .
i am using fetch method for making requests to my api (which is running on docker container on localhost:8000).
so let me show you a bit of related code :
assume i have a function to make request to my backend , verify the access token is valid
// AdminAuth.js file for requests to backend
const baseURL = "/api/v0/auth"
const tokenVerification = async acc_token => {
const res = await fetch(`${baseURL}/token/verify`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(acc_token),
credentials: "include",
})
if (!res.ok) {
if (res.status === 401) {
throw new Error("401")
}
throw new Error(`Error in token verification: ${res.statusText}`)
}
return res.json()
}
so in middleware, if i get the access_token from cookies and execute this:
// middleware.js
// ..
try{
const res_token_verify = await AdminAuth.tokenVerification({
token: acc_token,
})
//..
}catch(err){
console.log("maybe there was an error in verify =>>", err)
}
//..
i get this in terminal:
maybe there was an error in verify =>> [TypeError: Failed to parse URL from /api/v0/auth/token/verify]
what i did to solve the issue is i tried to hardcode baseUrl and it works on development machine, but when i want to check the app i am writing on my mobile device, i have to view it through the ip of development machine in my lan… so the baseurl is not correct when trying to work with app that way.
so how can i solve this problem?
this is also next.config.mjs file in root dir of my project :
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
return [
{
source: "/api/:path*",
destination: "http://localhost:8000/api/:path*/",
},
]
},
}
export default nextConfig
i think its not working since i switched to middleware ?