Hono•2mo ago

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?

1 Reply

uberOP•2mo ago

Is this terrible? having to create the client in a async way everytime i want to perform a http call.. :

import { AdminRPC } from "@my-sst-monorepo/functions/admins/rpc";
import { fetchAuthSession } from "aws-amplify/auth";
import { hc } from "hono/client";

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

const createRpcClient = async () => {
  const accessToken = await getAccessToken();
  return hc<AdminRPC>(process.env.NEXT_PUBLIC_API_URL!, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
};

export async function listAdmins() {
  const rpc = await createRpcClient();
  const res = await rpc.admins.$get();
  if (!res.ok) {
    throw new Error(`Failed to list admins: ${res.status}`);
  }
  return await res.json();
}

import { AdminRPC } from "@my-sst-monorepo/functions/admins/rpc";
import { fetchAuthSession } from "aws-amplify/auth";
import { hc } from "hono/client";

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

const createRpcClient = async () => {
  const accessToken = await getAccessToken();
  return hc<AdminRPC>(process.env.NEXT_PUBLIC_API_URL!, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
};

export async function listAdmins() {
  const rpc = await createRpcClient();
  const res = await rpc.admins.$get();
  if (!res.ok) {
    throw new Error(`Failed to list admins: ${res.status}`);
  }
  return await res.json();
}

fixed ✅: Hono client allows us to pass a function for headers that can be async :

const rpcClient = hc<AdminRPC>(process.env.NEXT_PUBLIC_API_URL!, {
  headers: async () => ({
    Authorization: `Bearer ${await getAccessToken()}`,
  }),
});

const rpcClient = hc<AdminRPC>(process.env.NEXT_PUBLIC_API_URL!, {
  headers: async () => ({
    Authorization: `Bearer ${await getAccessToken()}`,
  }),
});

Gaming

Programming

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