Authentication with TanStack Router + openapi-fetch

[rloof-bbi]

I’m using TanStack Router and openapi-fetch in a React project. My backend uses access tokens and refresh tokens, where the refresh token is an HTTP-only SameSite=Strict cookie. The access token is also stored in HTTP-only SameSite=Strict cookie, but could potentially be saved in memory.

Signin, signout, and fetching the initial token (via /refresh) are straightforward. The problem I’m facing is handling 401s in loaders and components: I want to automatically refresh the token and retry the request, and if refreshing fails, log out the user.

The context is similar to this example. Here’s an example of what I’m doing in a loader.

export const Route = createFileRoute("/_auth/todos_/$todoId")({
  component: RouteComponent,
  params: { parse: (params) => ({ todoId: Number(params.todoId) }) },
  loader: async ({ context, params }) => {
    const { data, error, response } = await client.request("get", "/todos/{todo_id}", {
      params: { path: { todo_id: params.todoId }, context: context.auth },
    })

    if (response.status === 401) {
      const { error: refreshError } = await client.POST("/refresh")
      if (refreshError) {
        context.auth.logout()
        throw redirect({ to: "/login", search: { redirect: window.location.href } })
      }
      const { data, error } = await client.request("get", "/todos/{todo_id}", {
        params: { path: { todo_id: params.todoId }, context: context.auth },
      })
      if (error) throw new Error("Failed to fetch todos")
      return data
    }

    if (error) throw new Error("Failed to fetch todos")
    return data
  },
})

This works, but it’s cumbersome and I’d need to repeat it for every loader or mutation. I also looked into openapi-fetch middleware, but I don’t have access to my auth context there, so it’s hard to refresh tokens globally. Wrapping client.request with an extra property also loses TypeScript types, which I want to avoid.

I’m looking for the simplest solution that works both in loaders and in components, ideally without repeating all this logic. Has anyone solved this in a clean way with TanStack Router + openapi-fetch? What’s the best pattern for handling automatic token refresh in this setup or do you suggest any alternatives?

Thanks in advance!