stormy-gold

How do i read auth tokens during http request with axios?

I want to call react query inside loader but my axios don't have auth tokens in header (currently doing session cookie) but my auth is being failed due to lack of auth tokens. how do i handle auth tokens in ssr pages?

7 Replies

optimistic-gold•2w ago

which scenario is this? in the SSR request you want axios to use the cookie the client sent to start?

stormy-goldOP•2w ago

yeah. i digged in createServerFn and it seems like we can get client cookie and headers in this server fn

export const serverGetVendors = createServerFn({ method: "GET" }).handler(
  async () => {
    const request = getWebRequest();
    const cookie = request.headers.get("cookie");
    return await getVendors({ cookie: cookie ?? "" });
  },
);

export const serverGetVendors = createServerFn({ method: "GET" }).handler(
  async () => {
    const request = getWebRequest();
    const cookie = request.headers.get("cookie");
    return await getVendors({ cookie: cookie ?? "" });
  },
);

something liket this. is it ok to do lke this? I am getting ts error while returning getVendors(),

export const getVendors = async (headers: { cookie: string }) =>
  zeroAxios<GetVendorsSuccessResponse>({
    method: "GET",
    url: EP.VENDORS.GET,
    headers: {
      ...headers,
    },
  });

export const getVendors = async (headers: { cookie: string }) =>
  zeroAxios<GetVendorsSuccessResponse>({
    method: "GET",
    url: EP.VENDORS.GET,
    headers: {
      ...headers,
    },
  });

export const Route = createFileRoute("/admin/_layout/vendors")({
  component: RouteComponent,
  loader: async ({ context }) => {
    const data = await serverGetVendors();
    //context.queryClient.ensureQueryData(vendorsQuery);
    return data.data;
  },
});

export const Route = createFileRoute("/admin/_layout/vendors")({
  component: RouteComponent,
  loader: async ({ context }) => {
    const data = await serverGetVendors();
    //context.queryClient.ensureQueryData(vendorsQuery);
    return data.data;
  },
});

i can fetch data like this with correct credentials but now what do I do with tanstack query ? how do I ensureQueryData if i am fetching directly with server Fn @Manuel Schiller

optimistic-gold•2w ago

what's the request URL here? is this one from start? or a different backend?

stormy-goldOP•2w ago

it's a different backend

optimistic-gold•7d ago

you could use different query functions depending on whether you are on the server or on the client

const myQueryFunction().client(() => {
    // perform axios request without any cookie header since this is handled by the browser
}).server(() => {
    const request = getWebRequest();
    const cookie = request.headers.get("cookie");
    // perform axios request with cookie header
})

const myQueryFunction().client(() => {
    // perform axios request without any cookie header since this is handled by the browser
}).server(() => {
    const request = getWebRequest();
    const cookie = request.headers.get("cookie");
    // perform axios request with cookie header
})

extended-salmon•7d ago

it's createIsomorphicFn , is it ?

optimistic-gold•6d ago

yes sorry

Gaming

Programming

How do i read auth tokens during http request with axios?

Did you find this page helpful?