Remix Authentication

Easily add secure, edge- and SSR-friendly authentication to Remix with Clerk.

Clerk is the easiest way to add authentication and user management to your Remix application. After following this guide, you should have a working Remix app complete with:

Fully fledged sign in and sign up flows.
Google Social Login.
Secure email/password authentication.

Install @clerk/remix

Once you have a Remix application ready, you need to install Clerk's Remix SDK. This gives you access to our prebuilt components and hooks for Remix applications.

1
  npm install @clerk/remix

Set Environment Keys

Below is an example of your .env file. To get the respective keys go to the API Keys page in the Clerk dashboard.

1
CLERK_PUBLISHABLE_KEY=pk_test_••••••••••••••••••••••••••••••••••
2
CLERK_SECRET_KEY=sk_test_••••••••••••••••••••••••••••••••••

Disable ErrorBoundary

Currently we are unable to support ErrorBoundaryV2 but will support this when Remix V2 is in general release, make sure that it is set to false in your remix.config.js:

1
/** @type {import('@remix-run/dev').AppConfig} */
2
module.exports = {
3
  ignoredRouteFiles: ["**/.*"],
4
  // appDirectory: "app",
5
  // assetsBuildDirectory: "public/build",
6
  // serverBuildPath: "build/index.js",
7
  // publicPath: "/build/",
8
  serverModuleFormat: "cjs",
9
  future: {
10
    v2_errorBoundary: false,
11
    v2_meta: true,
12
    v2_normalizeFormMethod: true,
13
    v2_routeConvention: true,
14
  },
15
};

Configure `rootAuthLoader`

To configure Clerk in your Remix application, you will need to update your root loader. This will enable us to have access to authentication state in any Remix routes.

1
import type { MetaFunction,LoaderFunction } from "@remix-run/node";
2
import {
3
  Links,
4
  LiveReload,
5
  Meta,
6
  Outlet,
7
  Scripts,
8
  ScrollRestoration,
9
} from "@remix-run/react";
10

11
import { rootAuthLoader } from "@clerk/remix/ssr.server";
12

13
export const meta: MetaFunction = () => ({
14
  charset: "utf-8",
15
  title: "New Remix App",
16
  viewport: "width=device-width,initial-scale=1",
17
});
18

19
export const loader: LoaderFunction = (args) => rootAuthLoader(args);
20

21
export default function App() {
22
  return (
23
    <html lang="en">
24
      <head>
25
        <Meta />
26
        <Links />
27
      </head>
28
      <body>
29
        <Outlet />
30
        <ScrollRestoration />
31
        <Scripts />
32
        <LiveReload />
33
      </body>
34
    </html>
35
  );
36
}

If you need to load in additonal data you can pass your loader directly to the rootAuthLoader.

1
//Imports
2

3

4
export const loader: LoaderFunction = args => {
5
  return rootAuthLoader(args, ({ request }) => {
6
    const { sessionId, userId, getToken } = request.auth;
7
    // fetch data
8
    return { yourData: 'here' };
9
  });
10
};
11

12
// Additonal application code.

Configure ClerkApp

Clerk provides a ClerkApp wrapper to provide the authentication state to your React tree. This helper works with Remix SSR out-of-the-box and follows the "higher-order component" paradigm.

1
import { ClerkApp } from "@clerk/remix";
2
import type { MetaFunction,LoaderFunction } from "@remix-run/node";
3

4
import {
5
  Links,
6
  LiveReload,
7
  Meta,
8
  Outlet,
9
  Scripts,
10
  ScrollRestoration,
11
} from "@remix-run/react";
12

13
import { rootAuthLoader } from "@clerk/remix/ssr.server";
14
// Import ClerkApp
15
import { ClerkApp } from "@clerk/remix";
16

17
export const meta: MetaFunction = () => ({
18
  charset: "utf-8",
19
  title: "New Remix App",
20
  viewport: "width=device-width,initial-scale=1",
21
});
22

23
export const loader: LoaderFunction = (args) => rootAuthLoader(args);
24

25
function App() {
26
  return (
27
    <html lang="en">
28
      <head>
29
        <Meta />
30
        <Links />
31
      </head>
32
      <body>
33
        <Outlet />
34
        <ScrollRestoration />
35
        <Scripts />
36
        <LiveReload />
37
      </body>
38
    </html>
39
  );
40
}
41

42
// Wrap your app in ClerkApp(app)
43
export default ClerkApp(App);
44
`

Set ClerkCatchBoundary

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

If you are seeing a 401 after a short period of time even though your user is logged in. Please verify you have implemented this section.

1
import { ClerkApp } from "@clerk/remix";
2
import type { MetaFunction,LoaderFunction } from "@remix-run/node";
3

4
import {
5
  Links,
6
  LiveReload,
7
  Meta,
8
  Outlet,
9
  Scripts,
10
  ScrollRestoration,
11
} from "@remix-run/react";
12

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

16
export const meta: MetaFunction = () => ({
17
  charset: "utf-8",
18
  title: "New Remix App",
19
  viewport: "width=device-width,initial-scale=1",
20
});
21

22
export const loader: LoaderFunction = (args) => rootAuthLoader(args);
23
// add a Catch Boundary
24
export const CatchBoundary = ClerkCatchBoundary();
25

26
function App() {
27
  return (
28
    <html lang="en">
29
      <head>
30
        <Meta />
31
        <Links />
32
      </head>
33
      <body>
34
        <Outlet />
35
        <ScrollRestoration />
36
        <Scripts />
37
        <LiveReload />
38
      </body>
39
    </html>
40
  );
41
}
42

43
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.

1
//imports
2
export const CatchBoundary = ClerkCatchBoundary(YourBoundary);
3
// Additional application code

Clerk offers a set of prebuilt components that you can use to embed sign in, sign up, and other user management functions into your Next.js application. We are going to use the <SignIn />,<SignUp /> components by utlizing Remix routes.

The functionality of the components are controlled by the instance settings you specify in your Clerk Dashboard.

The page needs to be mounted on a catch all route for example:

app/routes/sign-up/$.tsx

1
import { SignUp } from "@clerk/remix";
2

3
export default function SignUpPage() {
4
  return (
5
    <div>
6
      <h1>Sign Up route</h1>
7
      <SignUp routing={"path"} path={"/sign-up"} />
8
    </div>
9
  );
10
}

The page needs to be mounted on a catch all route for example:

app/routes/sign-in/$.tsx

1
import { SignIn } from "@clerk/remix";
2

3
export default function SignInPage() {
4
  return (
5
    <div>
6
      <h1>Sign In route</h1>
7
      <SignIn routing={"path"} path={"/sign-in"} />
8
    </div>
9
  );
10
}

Update your dashboard settings

To make sure you are using the embedded components you will need to update your instance settings in the Clerk Dashboard to use the embedded components.

Select Paths
Set paths to /sign-in and /sign-up

By default, the Clerk components inherit the font family.

Protecting Your Pages

Client Side

Clerk offers Control Components that allow you to protect your pages, below is a simple example using Clerk's hosted components and the <SignedIn/> and <SignedOut/> control components.

1
import {
2
  SignedIn,
3
  SignedOut,
4
  RedirectToSignIn,
5
  UserButton,
6
} from "@clerk/remix";
7

8
export default function Index() {
9
  return (
10
    <div>
11
      <SignedIn>
12
        <h1>Index route</h1>
13
        <p>You are signed in!</p>
14
        <UserButton />
15
      </SignedIn>
16
      <SignedOut>
17
        <RedirectToSignIn />
18
      </SignedOut>
19
    </div>
20
  );
21
}

Server Side

To protect your routes you can use the the loader to check for the userId singleton, and if it doesn't exists redirect your user back to the sign in page.

1
import {
2
  UserButton,
3
} from "@clerk/remix";
4
import { getAuth } from "@clerk/remix/ssr.server";
5
import { LoaderFunction, redirect } from "@remix-run/node";
6

7
export const loader: LoaderFunction = async (args) => {
8
  const { userId } = await getAuth(args);
9
  if(!userId){
10
    return redirect("/sign-in");
11
  }
12
  return {};
13
}
14

15
export default function Index() {
16
  return (
17
    <div>
18
        <h1>Index route</h1>
19
        <p>You are signed in!</p>
20
        <UserButton afterSignOutUrl="/"/>
21
    </div>
22
  );
23
}

Read Session & User Data

Clerk provides a set of hooks and helpers that you can use to access the active session and user data in your Remix application. We have included examples of how to use these helpers to get you started.

Client Side

`useAuth`

The useAuth hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session.

1
import { useAuth } from "@clerk/remix";
2

3
export default function Example() {
4
  const { isLoaded, userId, sessionId, getToken } = useAuth();
5

6
  // In case the user signs out while on the page.
7
  if (!isLoaded || !userId) {
8
    return null;
9
  }
10

11
  return (
12
    <div>
13
      Hello, {userId} your current active session is {sessionId}
14
    </div>
15
  );
16
}

`useUser`

The useUser hook is a convenient way to access the current user data where you need it. This hook provides the user data and helper methods to manage the current active session.

1
import { useUser } from "@clerk/remix";
2

3
export default function Example() {
4
  const { isLoaded, isSignedIn, user } = useUser();
5

6
  if (!isLoaded || !isSignedIn) {
7
    return null;
8
  }
9

10
  return <div>Hello, {user.firstName} welcome to Clerk</div>;
11
}

Server Side

getAuth()

Using getAuth allows you to retrieve auth state and also ways to fetch data using the getToken function.

1

2
import {getAuth} from "@clerk/remix";
3
export const loader: LoaderFunction = async (args) => {
4
  // Using getAuth to retrieve data as needed.
5
  const { userId, sessionId, getToken } = await getAuth(args);
6

7
  console.log("Use getAuth() to access the auth state:", userId, sessionId, getToken);
8

9
  if (!userId) {
10
    return redirect("/sign-in?redirect_url=" + args.request.url);
11
  }
12
  // fetch data where you need the userId.
13
  const posts = await mockGetPosts(userId);
14
  return { posts };
15
};

Retrieve Full User

1
import {getAuth,clerkClient} from "@clerk/remix";
2

3
export const loader: LoaderFunction = async (args) => {
4
  const { userId } = await getAuth(args);
5

6
  if (!userId) {
7
    return redirect("/sign-in?redirect_url=" + args.request.url);
8
  }
9

10
  const user = await createClerkClient({secretKey: process.env.CLERK_SECRET_KEY}).users.getUser(userId);
11
  return { serialisedUser: JSON.stringify(user) };
12
};

Remix Authentication

Easily add secure, edge- and SSR-friendly authentication to Remix with Clerk.

Install @clerk/remix

Set Environment Keys

Disable ErrorBoundary

Configure rootAuthLoader

Configure ClerkApp

Set ClerkCatchBoundary

Build Your Sign Up

Build Your Sign In

Update your dashboard settings

Protecting Your Pages

Client Side

Server Side

Read Session & User Data

Client Side

useAuth

useUser

Server Side

getAuth()

Retrieve Full User

Configure `rootAuthLoader`

`useAuth`

`useUser`