Hi. I've been playing with Auth0 integration with Nextjs for a while, and basically I want the access token to fetch things from external APIs (I tried one with Java Spring Boot)...

Every time I try 'http://127.0.0.1:3000/auth/access-token' on browser, it shows me a JSON with the token and expiry fine... But every time I try to fetch anywhere within my App router using

const accessToken = await getToken();

(or with scope/audiences), I receive invalid url error
'/auth/access-token'... I vaguely understand the problem: the server doesnt know what to do with the relative url but the browser does, but this getAccessToken() doesn't work even if I make the whole thing a client component.

I tried specifying the whole url using good old javascript fetch:

const res = await fetch("http://127.0.0.1:3000/auth/access-token", {credentials: 'include'});
const obj = await res.json();
console.log(obj);

But this returns a missing session object while the browser still has active session.

AIs say that this is because the server side doesn't read the browser cookies, so it isn't the same session. But at the same time they say this token is stored in HTTPOnly cookie which is stored in server side, which makes sense because otherwise the nextjs server would have to check every time with the browser...

Below is the problematic part of the code (as per console)...


//{root}/src/app/helloapi/page.tsx

import { getAccessToken } from '@auth0/nextjs-auth0';
import React from 'react'

const res = await fetch("http://127.0.0.1:3000/auth/access-token", {credentials: "include"});
const obj = await res.json();

console.log(obj);
export default function page() {
return (
<div>
{JSON.stringify(obj)}
</div>
)
}
const accessToken = await getAccessToken();
console.log(accessToken);