Questions about router context in authenticated routes

[happenslol]

Hey, I have a question about route context, especially in the context of authenticated/protected routes.

I have an auth provider wrapping my entire app, which ensures that we know whether the user is authenticated or not. According to the docs, I pass this into the router context so I can check it in beforeLoad.

// In AuthProvider.tsx
const AuthProvider = (props) => {
  const isLoggedIn = getIsLoggedIn()
  const user = getUserFromApi()
  const login = () => { /* ... */ }
  const logout = () => { /* ... */ }

  return (
    <AuthContext.Provider value={{ isLoggedIn, user, login, logout }}>
      {props.children}
    </AuthContext.Provider>
  )
}

// In App.tsx
const Router = () => {
  const auth = useAuthContext()
  return <RouterProvider router={router} context={{ auth }} />
}

// In routes/_authenticated.tsx
export const Route = createFileRoute("/_authenticated")({
	component: RouteComponent,
	beforeLoad: ({ context, location }) => {
		if (context.auth?.isLoggedIn) return
		sessionStorage.setItem("redirect-to", location.href)
		throw redirect({ to: "/login" })
	},
})

Now, here are my questions:

1. Why is context.auth nullable? I defined the root route as createRootRouteWithContext<{ auth: AuthContext }>(), and the context is required on createRouter. It feels like that should be non-nullable on the beforeLoad argument as well.
2. Do I need to manually invalidate the router context when the auth state changes? Or does <RouterProvider /> react to changes in the context prop? The auth provider must wrap the router provider so it can pass the context - which means I can't get the router inside the auth provider. It seems I would have to create a new hook inside both the router and auth provider that listens to auth changes and then invalidates the router based on that. What's the best practice here?
3. It would be great if I could refine the context type for a specific route and all its children. That would allow me to make a non-nullable user field available to all authenticated routes. I couldn't devise a way to do this with the docs, did I miss something?

Edit:
First question solved. I defined my context as type AuthContext = { ... } | null, so I can default-init it with null and then do a non-null check in useAuthContext. Apparently, when all sub-values of the router context are optional, the context itself becomes optional as well. A bit unintuitive, I would have expected that only if I defined the context as { auth?: AuthContext }, and not also { auth: AuthContext | null }.

This issue is solved by moving the | null to the context create call instead.

---

I've also figured out the third question. Apparently I'm blind and we can just return something else from beforeLoad.

It seems I can only add to the context - can I remove something as well? It would be great to remove the login function in authenticated routes, for example.

It would also be nice to have helper types to write context extractor hooks. I now have this:

export const useAuthenticatedUser = <
	T extends { useRouteContext: (opts: {
		select: (ctx: { user: AuthenticatedUser }) => AuthenticatedUser
	}) => AuthenticatedUser },
>(route: T) => route.useRouteContext({ select: ctx => ctx.user })

// Allows doing:
const user = useAuthenticatedUser(Route)

which is... unwieldy, to say the least.

[schiller-manuel]

no you cannot remove from route context, only add.

[happenslol]

Thanks 🙏 Is that planned/tracked anywhere? I think it would be useful to have!

[schiller-manuel]

no that's not planned. you can override stuff, so if you put your function in a nested object, you could override that object.

[happenslol]

Thanks! Overriding works fine.

Do you have any pointers for question 2?