Basically in my job i need to integrate a custom backend (built on Java and i DO NOT have access to it), in Nextjs app router project, and authentication is driving me crazy, tried authjs and following NextJs auth guide but allways something ain't right.
The only way i was able to make it work is using everything as a client component, but i feel this is not what i should do, since i'm losing all Nextjs benefits.

I'm going to show a little example of this custom backend (auth is 100% like this), and 2 extra "dummy" endpoints so you can understand this and in case you solved this puzzle, can help me:

POST /api/auth/login -> receives username and password, and returns an object with { accessToken, refreshToken, refreshExpirationInMs, username, role }

POST /api/auth/refresh -> receives a body with { refreshToken }, adn returns an object similar to /login but with updated JWT's (also invalidates the sent refreshToken).

POST /api/auth/logout -> receives a body with { refreshToken }, and returns a { message: "Successfully logged out" }

GET /api/books -> receives the authorization header with the access token (Bearer <accessToken>) and returns : {books: [{id: 1, name: "The book of Nextjs"},{id: 2, name: "Help with auth 101"} ]}

POST /api/books -> receives the authorization header with the access token (Bearer <accessToken>) and a payload of name, and returns the created book.

Any help or codebase that implements it properly would be awesome, been struggling last week with this and learnt a lot of Nextjs Server components, Client, Route handlers, but im not being able to solve it.

Thanks!

TLDR: Nextjs app router integration with a custom backend that uses JWT Auth and Refresh token rotation.