React Remix and Clerk authentication

I followed the React Remix / Clerk authentication tutorial very closely and it seems that no matter what I do, I get a 401 Not Authorized page, as soon as I plug the loader function in route.jsx (I am using JS, not TypeScript):

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import {rootAuthLoader} from '@clerk/remix/ssr.server'
import { ClerkApp, ClerkCatchBoundary } from "@clerk/remix";

export const loader = args => {
  return rootAuthLoader(
    args,
    ({ request }) => {
      const { userId, sessionId, getToken } = request.auth;
      console.log("Root loader auth:", { userId, sessionId, getToken });
      return { message: `Hello from the root loader :)` };
    },
    { loadUser: true }
  );
};

function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export default ClerkApp(App);

export const CatchBoundary = ClerkCatchBoundary();

Any ideas?

I have setup the account, copied the environment keys to .env and they are getting picked up by Remix.

Solution

If you are using the new Remix V2 Error Boundaries then you likely need to use the code in this GitHub issue which uses the ErrorBoundary to handle what Clerk is expecting to be handled in the old CatchBoundary.

I just went through the setup and it worked out.

The other issue I had was the wrong env variable names. I copied the Next.js version instead of the ones for Remix. You can get them from the Home page on the Clerk dashboard for your account.