I tried to find answer for specific problem I'm in and I'm sure many of you come up with same type of problem or will face in future. I will try to explain it in detail so we get on to more discussion.

if I've to create only website and not want to target any android or IOS application in that case nextjs and next-auth is perfect tool to use. it will handle everything for developer and set httpOnly cookie and set JWT and can perform database operations with adapters. so far so good no issue.

I'm working on project where we're targeting multiple clients like web, Android and IOS app. we've choose Next14 for web app. we've separate backend services that follows micro service architecture. there are many different micro services and one of the micro service is for authentication and authorisation. job of this service is to login/register user and on successful response it sends JWT access token and refresh token. now its up to client to store those token on client side and pass access token in authorisation header in all subsequent request.

with nextjs I want to use as much as server components. now my question is how can I store JWT tokens on client side so I can access it on server component as well middleware.ts file? with client side I can access the token easily form local storage. but in server component and middleware.ts file we will not have access to local storage or cookie that set by browser APIs. so I've 2 major issues. first is I'm not able to figure out how can I check if user is authenticated or not while navigate to server component and second is while I do fetch call in server component how can I get JWT token that store on browser to pass in authorisation header?

Thanks in advance.