HonoH
Hono•15mo ago
uber

Append Authorization access token to RPC client in asynchronous way (amplify auth/cognito)

Im trying to use RPC but I use AMPLIFY AUTH and i want to append the access token in each rpc clients.

const client = hc<typeof adminApp>(process.env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer async-token-goes-here`,
  },
});

the problem is the way i retrieve my access token is async as cognito will refresh the token if needed. Is it bad to make the RCP client async?

export const adminsRpc = async () => {
  const token = await getAccessToken();
  const client = hc<typeof adminApp>(process.env.NEXT_PUBLIC_API_URL!, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  return client;
};

const getAccessToken = async () => {
  const session = await fetchAuthSession();
  if (!session.tokens) {
    throw new Error("No session");
  }
  return session.tokens.accessToken.toString();
};


... would be used lke this but i dont like it :
  useEffect(() => {
    const fetchData = async () => {
      const client = await adminsRpc(); // <---- i dont like this 
      const res = await client.admins.$get();
      if (!res.ok) {
        console.error(res);
        return;
      }
      const data = await res.json();
      console.log(data);
      setData(data);
    };

    fetchData();
  }, []);


i dont like having to use it that way across my app but i guess I dont have a choice as long as my token retrieval is async?
Was this page helpful?