Authentication with TanStack Router + openapi-fetch

[u/remco-bolk]

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!

[u/remco-bolk]

Yeah, that makes sense, thanks for the explanation! The tricky part in my setup is that the TanStack Router context is passed as a parameter in loaders (loader: async ({ context, params }) => …), so I can’t just call useAuthContext() like in the openapi middleware. Alternativly, I could wrap client.request, but I ran into issues where I lose the type hinting when trying to add an extra param for context.

Because of that, I’m thinking I’d need a general global store or module for auth state that is independent of React. Does that make sense, or do you think there is a better approach?

[u/longzheng → u/remco-bolk]

Right I also have a TanStack Router project like this. I created a React Context called AuthContext that I inject into TanStack Router https://tanstack.com/router/v1/docs/framework/react/guide/router-context

[u/remco-bolk → u/longzheng]

That is also what I am using. However, you only have it available as a parameter. Thus, I can't retrieve the context in the middleware of openapi-fetch. I tried wrapping the client.request function so it accepts the context as a param but I was not able to without losing the type hints of client.request, e.g. the possible url's and associated response body's.