customização da session

preciso fazer requisições sempre com um token jwt, e senti dificuldade de ficar transportando o contexto da aplicação quando uso getSeverSideProps para buscar os tokens do browser. Colocar o token dentro da sessão dessa forma:

  const data = usersService.listar(contexto.req.token);

  return {
    props: {
      session: contexto.req.session,
      data,
    }
  };
});

function Users({session, data}){
  return (
    <div>
      
      Listando usuarios
      {data}
    </div>
  );
}

export default Users;

{
  "session": {
    "ok": true,
    "status": 200,
    "body": {
      "full_name": "teste",
      "user_id": "5g04nw3k-c143-442d-a6ff-5f5d7960245c",
      "user_name": "teste@gmail.com",
      "scope": [
        "READ",
        "WRITE"
      ],
      "active": true,
      "exp": 1709671112,
      "authorities": [
        "ADMIN_LEVEL_2",
        "ADMIN_LEVEL_1"
      ],
      "jti": "9428cff2-526e-4b20-b369-2af7d76fe685",
      "client_id": "teste-frontend",
      "token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJmdWxsX25hbWUiOiJsYWZvY2EiLCJ1c2VyX2lkIjoiNWcwNG53M2stYzE0My00NDJkLWE2ZmYtNWY1ZDc5NjAyNDVjIiwidXNlcl9uYW1lIjoibGFmb2NhQGdtYWlsLmNvbSIsInNjb3B...."
    }
  }
}

xport async function httpClient(fetchUrl, fetchOptions) {
  return fetch(fetchUrl, {
    ...fetchOptions,
    method: 'POST', 
    headers: {
      ...fetchOptions.headers,
      'Authorization': `Basic ${fetchOptions.headers.Authorization}`, 
      'Content-Type': 'application/x-www-form-urlencoded',
    }, 
    body: fetchOptions.body ? fetchOptions.body.toString() : null
  })
    .then(async (response) => {
      return {
        ok: response.ok,
        status: response.status, 
        // body: await response.json(),
        body: {
          ... await response.json(),
          token: tokenService.get(fetchOptions.contexto),
        }
      };
    })

é uma forma válida ou poderia melhorar?