What is the idiomatic way to protect your whole Remix app?

[ric980]

Hi there,

I'm building an admin application that should be used only by admins. There are no public routes except for the login page.

I cannot find a good way to achieve that. With other web frameworks, I've got middleware and I can wrap everything with an authentication middleware.

What I am doing with Remix is just bloating every loader with something like this:

export const loader = async ({request}: LoaderArgs) => {
  const authenticated = await isUserAuthenticated(request)

  if (!authenticated) {
    return redirect('/login')
  }

  return json({})
}

I've tried having a requireUser method, just like the Jokes tutorial shows, but when I do throw redirect('/') I got this error:

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#".

Even routes that don't need a loader, I still have to define one and return empty json.

I've looked at the remix-examples repo, but didn't find anything useful there as well.

Thanks.

[tgds]

I feel you. This is my major pain point with Remix. As far as I know, there's no good way until the loader/action middleware feature lands. You have to either bloat every loader, or, if you're using express server, you can add a middleware there (not very pretty).

As for why you can't successfully throw the redirect, I don't know. You'd have to share more of your code.

[kiliman]

I use the Express adapter and check for the auth cookie before handing it to Remix. It protects all routes by default. You have to opt-out of the check for public routes.

I also check for the user in the loader via the requireUser function that throws. I'm not sure why that's not working for you.

Anyway, here's a sample showing how it works:

https://github.com/kiliman/express-auth-example/blob/main/server/index.js

[ric980]

Thanks, guys.

The problem with throw redirect was a missing await.

For now, I've decided to just put requireUser in my root.tsx loader and skip it for the /login path.

Let's see in the future how Remix evolves and better handles horizontal aspects. 🤞

[boptom]

FYI, this is not recommended as Remix calls all loaders in parallel.

From the official FAQ: https://remix.run/docs/en/main/guides/faq#how-can-i-have-a-parent-route-loader-validate-the-user-and-protect-all-child-routes