Stuck with adding authentication to the whole app rather than section of it

[remote coral]

Hi, I've been working based on the indie stack and while I generally understand how the authentication works in remix, but I'm not 100% on how to go about restricting the whole app to the authenticated users so they would be redirected to the /login page regardless of which path they hit.

root.tsx doesn't work as /login is a child of the root and this causes redirection loop.

Alternative solution I came up with that would probably work is that I would need to create another subfolder in app/routes where I put all the application logic so /login would live outside of that and perhaps add __ to the subfolder so it would become pathless layout route and wouldn't add any extra stuff to the url - am I on the right path with this train of thought or there is another/better approach for this?

[quartz mesa]

each route loader is an individual API route, so in order to require auth for every loader you need to add the protection to each loader, not just a parent route

right now, because there's no pre-request hook you would have to check for auth on every loader

or if you use Express you can move your auth check there

[remote coral]

hm, I'm not sure I follow and/or whether we are on the same page - I just tested this by adding routes/app/ and routes/app.tsx and moving part of the application code to the routes/app/ folder and added the following code to the routes/app.tsx : ```import { Outlet } from "@remix-run/react";
import type { LoaderArgs } from "@remix-run/node";

import { requireUserId } from "~/session.server";
import Menu from "~/components/menu";
import { json } from "@remix-run/node";

export async function loader({ request }: LoaderArgs) {
const userId = await requireUserId(request);
return json({ userid: userId });
}
export default function Wrapper() {
return (
<div>
<Menu />
<Outlet />
</div>
);
}

which seemed to work as I thought (unauthenticated user gets redirected to the `/login` and after logging in the application under the `/routes/app/` folder becomes accessible)

[quartz mesa]

it will work for document request because all loaders run at the same time

but if the user is on /app and goes to /app/something-else and that something-else is not protected on its loader, if the user session expired it will not be caught by routes/app loader because on client-side transition Remix will only fetch the loader of routes/app/something-else and not the loader of routes/app

[remote coral]

I see, that makes sense

I just ran a quick test tho - I logged in, deleted the session cookie and tried to navigate to child route and that still triggered the redirect back to login

if I understood what you are saying correctly then client-side transition from routes/app to routes/app/something-else shouldn't have triggered the loader in routes/app which causes the redirect

just trying to understand the logic, the app at this point is pretty small and adding the loader to every component is not that big of a deal

[quartz mesa]

treat every loader as an API endpoint, in an API every protected route needs to run the authorization code, even if somehow it worked it can still cause issues because someone fetch data that it shouldn't

also, your nested routes may need the authenticated user to do things anyway

[remote coral]

yeah, I agree

thank you! 🙂

[distant pulsar]

Hey @quartz mesa, I know, the discussion is pretty old, but I found it via search, because I'm currently in the exact same situation. Requiring auth in loaders (and possible three-level deep "sub-loaders") makes the response cycle quite long as validating the authentication happens via an external identity provider. So, four requests in parallel to that identity provider. Thinking back and forth, but still wondering how to circumvent this scenario. What would be a proper way here? Any help is highly appreciated 🙂

[quartz mesa]

you can move the auth check to the HTTP server (e.g. Express) but that would only help with the initial document request (when doing SSR)

because on a client-side navigation you'll still have a request per loader and each request will do the auth check again on the HTTP server

so you're moving the auth check from Remix to the HTTP server

I recommend you to keep the auth check in Remix loaders and try to make it as fast as possible