I'm porting my app to Next with app router/RSC. With my old app, I use axios with a custom interceptor to fetch and refresh access tokens on the client.

In my new app I'm having trouble understanding where the auth logic should live. I imagine it'd come down to getting the headers from the request, but how do I set these on the client in the first place? (previously I'd use localstorage with axios-jwt)

Example code:

export async function getGames(filters?: {}): Promise<{ data: Game[] }> {
  TODO: set authorization header on this request
  let games = await fetch('http://localhost:3000/games');

  return games.json();
}

export default async function Home() {
  const games = (await getGames()).data;

  return (
    <main className="px-10 py-8">
      <div className="flex gap-4">
        {games.map((game) =>
          <GameCard game={game} key={game.id} />
        )}
      </div>
    </main>
  )
}

(the acccess token is sent down in response to a /login endpoint in my Go backend. There's also a /refresh endpoint)

Would really appreciate any insight. This model is super new to me and I'm having trouble grokking it.