Auto-refresh the login tokenWorkplace case

A problem where you complete, with Next.js (App Router) and TypeScript, the flow that keeps a signed-in user's session unbroken by fetching a fresh token when the old one stops working. When a resource call no longer goes through, you get a new token and call again — filled into request in api-client.

With short-lived tokens, a good experience is to quietly fetch a new token and carry the session on, rather than bouncing the user back to a login screen when the token stops working. This "unbroken session" shows up on almost every screen that uses token-based auth, and this problem implements that flow directly.

What is the difference between an access token and a refresh token?

An access token is a short-lived pass attached to every resource request; a refresh token is long-lived and is used to obtain a new pass when the access token no longer goes through.

When a token expires, do I have to send the user back to log in?

Not necessarily. If the refresh token is still alive, you can fetch a new access token and carry on the request in flight, so the user feels no interruption.