I have a very simple Next.js App Router application that renders using React Server Components. I’m using the nextjs-auth0 SDK to authenticate users.
While rendering on the server, I need to fetch some data from some protected APIs, and I use the accessToken returned by getSession to retrieve the access token to do so.
I need to ensure that the access token isn’t expired before I try to fetch, and I need to refresh the token if it has expired. To accomplish this, as suggested by Adam in this GitHub issue, I call getAccessToken in middleware.
However, I think there’s a flaw in this approach. Because getAccessToken is called after calling NextResponse.next(), the token isn’t refreshed before page is rendered.
This means that, when a logged-in user returns to the site after their access token has expired, they encounter an error. This error can be resolved by reloading the page, because the token was refreshed after the initial page load. This is obviously not a good user experience, though.
I’ve tried calling the parameterless version of getAccessToken before calling NextReponse.next(), but that appears to not update the session at all?
How do I ensure that my server components are guaranteed a non-expired access token for use when fetching data?