Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to


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.


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);


RootCatchBoundary?React.ComponentTypeA optional component used as your application boundary.

What did you think of this content?

Clerk © 2023