Protected sub routes

[binajmen]

Hi,

I noticed that in a nested route, I must protect all routes with:

export const loader: LoaderFunction = async ({ request }) => {
  let user = await authenticator.isAuthenticated(request, {
    failureRedirect: '/auth/login',
  });
  ...
}

In the route /some/protected/route, I put the above snippet code in /some/index.tsx only. When hitting the route /some/protected/route, I expected the loader of /some/index.tsx to redirect the user when not authenticated. But it does not seem to be the case.

Am I supposed to repeat the snippet in every sub route? Or is it because /some/index.tsx does not contain an <Outlet/> component?

[sergiodxa]

Every loader/action function should verify if the user is authenticated, there's no way to protect sub routes in Remix because Remix may or may not call the parent loader.

Let's say you have routes/protected.tsx and routes/protected/child1.tsx and routes/protected/child2.tsx and you only call authenticator.isAuthenticated in the routes/protected.tsx file.

When the user goes to /protected/child1 because it was a document request Remix will call all loaders and if the user is not authenticated it will be redirected.

Now suppose the user clicks a Link to /protected/child2, because Remix already have the data of routes/protected.tsx it will not fetch that loader again, and it will only fetch the routes/protected/child2.tsx loader, this means if the user session expired after it loaded the first URL and before it clicked the link, it will fetch the child2 loader and it will try to do the rest of the code (and probably throw an error) instead of redirecting the user to the login.

This happens because Remix avoid fetching a loader you already have the data for, and because of this you can't rely of a parent loader to protect a child loader, so all your routes should call authenticator.isAuthenticated to protect themself.

I recommend you to think about your loaders and actions as API endpoints, in an API endpoint you can't rely on a parent endpoint to protect the child endpoint because you don't know if the parent is gonna be called, so you protect each endpoints, loaders and actions are automatically generated API endpoints for your routes.

[binajmen]

Thank you for the clarification. Makes sense as always!

[mcgaw]

The fact that Remix doesn't have a simple middleware style way of handling authentication is embarrassing. You shouldn't have to remember to pepper isAuthenticated style calls everywhere. Let's not pretend this is better.

[binajmen]

It's a bit cumbersome indeed.. Not quite sure if the middleware currently baking in the roadmap (remix-run/react-router#9566) will solve this. Wait & see 🙈

[mcgaw]

Thanks, this looks promising! In the mean time I'm going to use Express and Passport.