How should authentication be handled in an app that uses only external APIs?

[hamez0r]

Our app is using our micro-services suite. One of them is responsible for authentication (using Oauth2). Requests to protected endpoints must include Bearer Token. I'm trying to figure out a way to handle 401 responses and redirect to the login flow (which is started by /oauth2/login-required route in the app).

I created an authenticatedRequest that does this

const request = async (
  method: Method,
  url: RequestInfo | URL,
  options?: RequestInit,
) => {
  const response = await fetch(url, {
    method,
    redirect: "follow",
    ...options,
    headers: {
      Authorization: `Bearer ${bearerToken()}`,
      ...options?.headers,
    },
  });

  if (response.status === 401) {
    throw new UnauthorizedError();
    // I also tried this, with no success, and I don't like the coupling
    // throw redirect({ to: "/oauth2/login-required" });
  }

  return response;
};

This way, if the user is not authenticated (first visit), or the token was revoked, or for whatever other reason the endpoint returned 401, I know it's time to redirect to /oauth2/login-required (using refresh tokens is out of scope here).

My initial tought was to have the error handled by queryCahe

export async function getRouter() {
  const context = await getContext();

  const router = createTanStackRouter({
    routeTree,
    context,
    scrollRestoration: true,
    defaultPreload: "intent",
    defaultPreloadStaleTime: 0,
  });

  // Why does this look fishy?
  context.queryClient.getQueryCache().config.onError = (error) => {
    if (error instanceof UnauthorizedError) {
      router.navigate({ to: "/oauth2/login-required" });
    }
  };

  setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient });

  return router;
}

Then I'm trying to defer data loading in my component

export const Route = createFileRoute("/_layout")({
  loader: async ({ context }) => {
    context.queryClient.query(userDetailsOptions);
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { data: user } = useSuspenseQuery(userDetailsOptions);
  console.log(user);
  return (
    <div>
      <p>Hello "/_layout" route!</p>
      <Outlet />
    </div>
  );
}

This results in the following error

A query that was dehydrated as pending ended up rejecting. [["user-details"]]: [object Response]; The error will be redacted in production builds
node:internal/process/promises:392
      new UnhandledPromiseRejection(reason);
      ^

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>".

I'm starting to realize that since I intend to stream the queried data, the server has already replied with 200. And then I'm changing my mind and replying with 307, so that's one possible source for the disconnect.

Is there a way to achieve what I want using start + router + query?
My next try was going to be adding error boundaries, but I'm not sure this would solve the issue, since it looks like my issue is rather related to the server, and not React-land.