uber
uber
PostsComments
HHono
Created by uber on 10/21/2024 in #help
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`,
  },
});
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();
};
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();
  }, []);
  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?
3 replies