Creating a typesafe reusable Authentication Checking function for beforeLoad event.

[alex-bello]

I'm not sure if this is the best place for this, but I am trying to write a simple function that I can reuse in my file routes for the beforeLoad event. I tried to use the BeforeLoadContext to type out the function, but it looks like it is not exported from the package. I was just literally about to copy the interface from the source and declare it in the module where we extend the Register interface. But I worry about it breaking the app down the road if changes are made to the interface.

Is anyone doing this already? How have you done this while keeping tsc happy?

Thanks!

[schiller-manuel]

how would that function look like? can you please provide a minimal complete example by forking one of the existing router examples on stackblitz?

[alex-bello]

Here's a really basic example of what I'm trying to accomplish. You can see I had to basically cut and paste the BeforeLoadContext from the source and add it to this project in order to be able to create the BeforeLoadFn type. I'm probably overthinking this, so I'm open to another suggestion that might be a best practice.

https://stackblitz.com/edit/tanstack-router-mbv4qg?file=src%2Fmain.tsx

Thanks!

[ViewableGravy]

I've been struggling with similar abstractions, and after reading this I finally decided to sit down and just solve the problem.

I couldn't import the BeforeLoadContext from Tanstack since it is not exported with the rest of the types, so I've done a bit of gymnastics to take a routeId and get the corresponding type of the BeforeLoadContext.

This probably isn't a "fast" type, and could be much simpler if BeforeLoadContext is exposed as a type, but hopefully it covers your use case:

type AnyRouteId = RouteById<RegisteredRouter['routeTree'], ParseRoute<RegisteredRouter['routeTree']>['id']>['types']['id'];

type GetBeforeLoadContextFromRouteId<TId extends AnyRouteId> = 
    RouteById<RegisteredRouter['routeTree'], TId>['types'] extends infer Types extends AnyRoute['types']
        ? typeof createRoute<
            Types['parentRoute'],
            Types['path'],
            Types['fullPath'],
            Types['customId'],
            Types['id'],
            Types['searchSchemaInput'],
            Types['searchSchema'],
            Types['searchSchemaUsed'],
            Types['fullSearchSchemaInput'],
            Types['fullSearchSchema'],
            Types['params'],
            Types['allParams'],
            Types['routeContext'],
            Types['routeContext'],
            Types['allContext'],
            Types['loaderDeps'],
            Types['loaderData'],
            Types['loaderData'],
            Types['children']
        > extends infer RRoute extends (options: any) => Route
            ? Parameters<Parameters<RRoute>[0]['beforeLoad']>
            : never
        : never

This can be used such as follows type MyBeforeLoadContext = GetBeforeLoadContextFromRouteId<"/billing/invoice/$invoiceId">

The infer(s) can be removed if you just want to inline it, I just added them since I found it easier to read (and I needed to do a check for RRoute to ensure it existed (since Parameters was complaining that createRoute was possible undefined)

My overall recommendation would be one or more of the following:

1. Expose the BeforeLoadContext interface for building a similar abstraction
2. Expose a similar helper type as this for getting it based on ID (or path)
3. Store the BeforeLoadContext type on the routes 'type' property for easy access (probably not good to just chuck everything on this though?)