¿How to pass an in memory access token to a server component? - nextjs 13

Question

I have a refresh token in a cookie, and also an access token in memory.

So, in this client component, i'm gettin the access token, and saving it to a zustand store

"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { AxiosResponse } from "axios";
import { useEffect } from "react";
import { useRouter } from "next/navigation";

import { useStore } from "@/globalState";
import { ServerResponse, userApi } from "@/types/serverResponse";
import { useGetAccessToken } from "@/customHooks/useGetAccessToken";

const UserAccess = () => {
  const updateAccessToken = useStore((state) => state.updateAccessToken);

  const router = useRouter();

  const onSuccess = (resp: AxiosResponse<ServerResponse, any>) => {
    // console.log('access token api response');
    // console.log(resp);
    updateAccessToken(resp.data.data);
    router.push("/");
  };

  const onError = (error: unknown) => {
    console.log("access token api call failed");
    console.log(error);
  };

  const { mutate } = useGetAccessToken({
    onSuccess,
    onError,
  });

  useEffect(() => {
    mutate();
  }, []);

  return (
    <motion.div>
......
    </motion.div>
  );
};

export default UserAccess;

Then, i want to be able to access some data that only logged in users can access, for that, i need the refresh token (which is already sent in every request, because it's a cookie), but i can't pass it as props or call zustand store to get it in a server component.

This is how the server component looks like

import { cookies } from "next/headers";

import NavbarContainer from "@/components/molecules/home/NavbarContainer";
import { ServerResponse, userApi } from "@/types/serverResponse";

const fetchUser = async (): Promise<ServerResponse | boolean> => {
  const refreshToken = cookies().get("refresh-token");

  if (!refreshToken) {
    return false;
  }

  const resp = await userApi.get<ServerResponse>("/user/me", {
    withCredentials: true,
    headers : {
        Authorization: // i need the access token in memory );
    }
  });

  // not authorized
  if (resp.status === 401) {
  }

  return false;
};

const Navbar = async () => {
  const user = await fetchUser();

  console.log(user);

  return <NavbarContainer />;
};

export default Navbar;

Now, i've tried to set global headers to axios, but, it only works client side, on the server, it does not appear. Also, if i try to get the access token every time a user makes a request, that's going to be a LOT of request, and i can't put the access token in a cookie, because it would be vulnerable.

So, i really don't know how can i use my access token to fetch data on server components, what changes should i consider to be able to do this.

Thanks in advance !!