Adding authentication leads to performance issues and unneccessary api calls

In my

src/routes/(protected)/admin/route.tsx

src/routes/(protected)/admin/route.tsx

layout file, I call

export const Route = createFileRoute("/(protected)/admin")({
  beforeLoad: async () => {
    const user = await getLoggedInUser(); ### Call to auth provider
    if (!user) {
      throw redirect({ to: "/admin/login" });
    }
    return { user };
  },
  component: AdminLayoutComponent,
});

export const Route = createFileRoute("/(protected)/admin")({
  beforeLoad: async () => {
    const user = await getLoggedInUser(); ### Call to auth provider
    if (!user) {
      throw redirect({ to: "/admin/login" });
    }
    return { user };
  },
  component: AdminLayoutComponent,
});

Then when navigating to a nested route

dashboard.tsx

dashboard.tsx

users.tsx

users.tsx

it calls again the beforeLoad function as I see those calls in the logs.
Shouldn't this somehow been cached? At the moment there are a bunch of api calls against the auth provider made only through navigation.
Then, if a server function is performed another call to the auth provider is made as through an authMiddleware.

I assume there is a better way to do this in tanstack start.

TanStack•4mo ago•

8 replies

broad-salmon

Adding authentication leads to performance issues and unneccessary api calls

In my

src/routes/(protected)/admin/route.tsx

src/routes/(protected)/admin/route.tsx

layout file, I call

export const Route = createFileRoute("/(protected)/admin")({
  beforeLoad: async () => {
    const user = await getLoggedInUser(); ### Call to auth provider
    if (!user) {
      throw redirect({ to: "/admin/login" });
    }
    return { user };
  },
  component: AdminLayoutComponent,
});

export const Route = createFileRoute("/(protected)/admin")({
  beforeLoad: async () => {
    const user = await getLoggedInUser(); ### Call to auth provider
    if (!user) {
      throw redirect({ to: "/admin/login" });
    }
    return { user };
  },
  component: AdminLayoutComponent,
});

Then when navigating to a nested route

dashboard.tsx

dashboard.tsx

users.tsx

users.tsx

Adding authentication leads to performance issues and unneccessary api calls

Similar Threads

Adding authentication leads to performance issues and unneccessary api calls

Similar Threads

Similar Threads

Similar Threads