Contexts and Authenticated Routes deeper in the route tree

[SundayPowerEndre]

I have a question, has anyone been able to implement Authenticated Routes that are deeper than the root level. The current docs for Route Context seems to encourage using Hooks or Context API inside of the Tanstack Router context to access data inside of the loader and beforeload functions for the Routes.

I have an auth strategy where we have a general auth to get access to the app, and then we use ABAC to see which of the pages/resources you have access to.

You can envision it like the file structure like:

_auth.tsx
_auth/_company_context.tsx
_auth/_company_context/company.tsx
_auth/_company_context/hr.tsx

So the _auth.tsx has the regular authenticated routes as described in the docs. However the permissions for the company lives inside of the _company_context layout route, which is a regular Context Provider.

However, this means that i have no way of accessing the company context inside of the loader function for the hr.tsx route. In the hr.tsx i envision doing

  loader: async ({ context: { queryClient , companyContext}, params: { companyId } }) => {
    if (!companyContext?.permissions.includes('company:ReadHR')) {
      throw redirect({
        to: '/overview',
      });
    }

Do anyone have any suggestions for how to do protected routes when i do not have access to injecting the context at the RouteProvider or any other solutions for the general problem at hand 🙏🏽

[schiller-manuel]

can you please create a minimal complete example by forking one of the existing router examples on stackblitz?
e.g. https://tanstack.com/router/v1/docs/framework/react/examples/authenticated-routes

[SundayPowerEndre]

https://stackblitz.com/edit/github-pb1niu?file=src%2Froutes%2F_authenticated%2Fcompany%2F%24companyId%2F_company_context%2Fhr.tsx

Ofc, here you go 🙏🏽

[schiller-manuel]

is this what you need?

https://stackblitz.com/edit/github-pb1niu-ryrtvt?file=src%2Froutes%2F_authenticated%2Fcompany%2F%24companyId%2F_company_context.tsx,src%2Froutes%2F_authenticated%2Fcompany%2F%24companyId%2F_company_context%2Fhr.tsx

return something from beforeLoad in _company_context and then it gets added to the context in child routes

[SundayPowerEndre]

Hey, sorry, i should have been clearer on how i stripped out the fetches and hooks in the example i provided.

The data that I get about the company and therefore also the permissions are inside hooks. So i cannot get the user_permissions in the beforeLoad for the _company_context.

Your examples is exactly what i want to do, but since it is inside hooks, and i do not have a way of passing the data from the hooks that are deeper in the router into the beforeLoad as is done for the auth context I am stuck.

In other words it would be the same as if i attempted to do:

export const Route = createFileRoute(
  '/_authenticated/company/$companyId/_company_context'
)({
  beforeLoad: async ({ params: { companyId } }) => {
    if (isNaN(Number(companyId))) {
      throw redirect({
        to: '/',
      });
    }
    const {data:companyContext} = useSuspenseQuery({$CompanyOptions})
    return { companyContext };
  },
  component: CompanyComponent,
});

[SundayPowerEndre]

Ok i found a solution that i think is quite sensible so i'll leave it here as an answer for other people.

I ended using Tanstack Query to write the permissions to a query with a static key, and make it update whenever the context is run.
So in the _company_context.tsx:

export function CompanyProvider({ children }: { children: React.ReactNode }) {
...
  const permissions = company?.user_permissions ?? [];
  queryClient.setQueryData(['company_permissions'], () => {
    return permissions;
  });

... 
}
export function hasAccessToCompanyHR() {
  const permissions = queryClient.getQueryData<string[]>(['company_permissions']);
  return permissions?.includes('plant:ReadHR');
}

in the hr.tsx

  loader: async ({ context: { queryClient }, params: { companyId } }) => {
    if (!hasAccessToCompanyHR()) {
      throw redirect({
        to: '/',
      });
    }
    return queryClient.ensureQueryData(CompanyHRQueryOptions({ plantId }));
  },

It works as i expected, and i think it will make for a quite maintainable pattern, since i can abstract all the logic in regards the company and permissions into the same file that has all the company and permission logic ^^

[SundayPowerEndre]

@schiller-manuel I would still love if you could give some feedback if this feels like a sensible way of using Tanstack Query and Tanstack Router together in your mind.

I am having generally some issues where i feel like the Router forces me into patterns i feel are undesireable. F.ex the current setup i have shown using the layouts to use the React Context API. It feels like i am generating a lot of files and making a hard to follow pattern of routes, but as far as i can tell from the documentation this seems like the most straight forward implementation to use the Context API with Hooks and have that wrap around some set of routes.

I think the root cause of the akwardness is usually that i want access to data from hooks inside the router functions. I could remove all of the contexts is i could simply call a hook inside of a route function. I understand that it is not a trivial change to make, but it is root cause of most of my pain points with Tanstack Router.

I really like the docs, but this is the kind of issue that i have encountered the most times where i do not feel like i find good answers in the docs, so that is why i am asking for some guidance.

[schiller-manuel]

I think the root cause of the akwardness is usually that i want access to data from hooks inside the router functions.

That's also my interpretation.

I could remove all of the contexts is i could simply call a hook inside of a route function. I understand that it is not a trivial change to make, but it is root cause of most of my pain points with Tanstack Router.

I would say it is not really possible as router (and loader) are not living inside of React world. The only way we currently have is to pass hooks into router context via <RouterProvider>.
But this requires you to have the hooks / context on the top level.

[SundayPowerEndre]

I finally got back to this.

For future reference, if anyone has issues that looks similar to what i had you can do this

export const Route = createFileRoute('/monitoring')({
  pendingComponent: PendingDownloadLoader,
  loader: async ({ context: { queryClient } }) => {
    const permissions = await queryClient.ensureQueryData(permissionsQueryOptions());
    const hasAcces = hasAccessToMonitoring(permissions);
    if (!hasAcces) {
      throw redirect({
        to: '/overview',
      });
    }
    const defaultDate = getDefaultDate();
    const defaultQueryInput = getDefaultMonitoringQueryInput(defaultDate);
    const monitoringQuery = getMonitoringQueryOptions(defaultQueryInput);
    await queryClient.ensureQueryData(monitoringQuery);
  },
  component: MonitoringPage,
});

This allows to have quite effective guards against unauthenticated and/or unauthorised access to components