Here is a solution that has worked nicely in practice for me. Though it requires some complicated setup code to be written once up front, no changes are required to any existing authentication provider code and using the authentication context in beforeLoad hooks is simple.

Suppose we have some authentication state stored in a context AuthContext, which asynchronously loads the user session on app startup. Storing the authentication context directly in the router context is problematic for the reason you describe, since the beforeLoad middleware of any route will run before the authentication loads. Instead, we need to provide a way for code in beforeLoad to wait until the authentication loads. The natural way to do this is to expose an asynchronous method, say loadAuth(): Promise<AuthContext | undefined>, on the router context. Then we can write const auth = await context.auth.loadAuth(); in beforeLoad.

Now, how do we write loadAuth? The main difficulty is that, in our root app where we inject the authentication context using the RouterProvider, the authentication context hasn't loaded yet! The solution is to inject a deferred promise that is later resolved once the authentication loads in an effect.

Disclaimer: I'm writing this code from memory. There may be typos. However, I have used the same principle in a private project which has been tested more extensively, so the idea is sound. I recommend reading the code, understanding the idea it uses, and implementing it yourself again in your project if it makes sense.

interface LoadingAuth {
	resolve: (auth: AuthContext) => void;
	promise: Promise<AuthContext>;
}

function App() {
	const auth = useAuth();
	const loadingAuthRef = useRef<LoadingAuth | undefined>(undefined);
	if (!loadingAuthRef.current) {
		// Initial render of the app; initialize `loadingAuthRef`.
		// In sufficiently modern environments one can use `Promise.withResolvers` to create the deferred promise here.
		let resolve!: (auth: AuthContext) => void;
		const promise = new Promise<AuthContext>((resolve_) => {
			resolve = resolve_;
		});
		loadingAuthRef.current = { resolve, promise };
	}

	useEffect(() => {
		if (auth.isLoading) return;
		// Finished loading; propagate the loaded authentication context to clients waiting on the promise.
		loadingAuthRef.current!.resolve(auth);
	}, [auth.isLoading]);

	const loadAuth = async () => {
		// SUBTLY BUGGY; see diff below for the fix.
		return loadingAuthRef.current!.promise;
	};
	return <RouterProvider router={router} context={{ loadAuth }}>{...}</RouterProvider>;
}

The above code resolves the initial problem: downstream routes can just write

async beforeLoad({ context }) {
	const auth = await context.loadAuth();
	if (!auth.session) {
		// ...redirect...
	}
	// ...
}

However, it runs into a subtle problem when the authentication context is updated after the initial load (e.g., if a logout is issued.) In this case, the authentication context returned by loadAuth will be stale, since it always resolves to the same initially loaded value without regard to subsequent changes to auth.

The fix is to adjust loadAuth to return the loading promise only if auth.isLoading is true, and otherwise eagerly return the latest authentication context:

const loadAuth = async () => {
-	return loadingAuthRef.current!.promise;
+	if (auth.isLoading) return loadingAuthRef.current!.promise;
+	return auth;
}

(Rest of the code remains the same.)

This final solution ends up working nicely in all scenarios I have tested, and although the implementation of loadAuth is ugly it doesn't leak into downstream usage. Fundamentally I don't believe there is a substantially better solution if you want to check authentication in beforeLoad with the current design of TanStack Router--a lot of the solution here is forced by the constraints and when things get called--but I'd love to see a nicer approach.