General Authentication for the entire application

[NB071]

Hello, Hope you're doing great!

Recently implemented the authentication for my application and reached a sort of dead-end due to the way I implemented my routes (since it's a dashboard). I'm not using any sub-routes (in the sense of remix) where I have nested layouts. My overall layout in set in my root.

The reason I brought this up is that I can't provide isAuthentication to my root or _index to have a fixed authentication in place because :

• root will create an infinite loop.
• _index doesn't share any context with other parts of the routes.

Q: I was wondering if you have any consideration for such scenarios?

After a while, I realized that it's a repeated task! which you are aware of: using isAuthentication with failureRedirect in all sub-routes!

What if we get the best of both options I mentioned above?
I propose getting an additional parameter in your Authenticator class as authUrl and allow developers to use isAuthenticated in their root loaders.

Example:

export const AuthCheck = async (request: Request, authUrl: string) => {

  // Getting the session from the request

  const session = await (
    await getSession(request.headers.get("cookie"))
  ).get(authenticator.sessionKey);

  // Check if the session exists and `the url is NOT the auth url`

  if (!session && !request.url.includes(authUrl)) {
    throw redirect("/login");
  }
};

I believe there's a nicer way to accomplish this, which I leave it up to you.

With this, it's possible to insert the function in the root loader :

export const loader = async ({ request }: LoaderFunctionArgs) => {
  await AuthCheck(request, "/login");
...
};

if there is any alternative, please share it with me. THANKS.

[sergiodxa]

Remix will eventually add middleware, until then the recommendation is to call isAuthenticated in any route you want to protect.