`ClerkCatchBoundary()`

Clerk uses short-lived tokens to keep your application secure. To refresh expired tokens Clerk uses Remix's catch boundary feature.

If you do not implement this into your app, you will see a 401 after a short period of time even though your user is logged in.

Usage

import type { MetaFunction, LoaderFunction } from "@remix-run/node";
 
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 meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});
 
export const loader: LoaderFunction = (args) => rootAuthLoader(args);
 
// add a Catch Boundary
export const CatchBoundary = ClerkCatchBoundary();
 
function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}
 
export default ClerkApp(App);

If you need to add a custom boundary to your application you can pass it as an argument to the ClerkCatchBoundary.

export const CatchBoundary = ClerkCatchBoundary(YourBoundary);

Props

Name	Type	Description
`RootCatchBoundary?`	`React.ComponentType`	A optional component used as your application boundary.