Skip to main content
Docs
Dashboard

Remix Quickstart

You will learn the following:

  • Install @clerk/remix
  • Set your Clerk API keys
  • Configure rootAuthLoader
  • Configure ClerkApp
  • Protect your pages

Before you start

Example repository

Learn how to use Clerk to quickly and easily add secure authentication and user management to your Remix app. This guide assumes that you are using Remix v2 or later.

Note

If you are using Remix SPA mode, follow the Remix SPA mode guide.

Install @clerk/remix

The Clerk Remix SDK gives you access to prebuilt components, hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

terminal
npm install @clerk/remix
terminal
yarn add @clerk/remix
terminal
pnpm add @clerk/remix
terminal
bun add @clerk/remix

Set your Clerk API keys

.env.local
CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Configure rootAuthLoader()

The rootAuthLoader() function is a helper function that provides the authentication state to your Remix application. You must export rootAuthLoader() as the root loader() function.

Update your root.tsx file with the following code:

app/root.tsx
import type { MetaFunction, LoaderFunction } from '@remix-run/node'
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

// Import `rootAuthLoader()`
import { rootAuthLoader } from '@clerk/remix/ssr.server'

export const meta: MetaFunction = () => [
  {
    charset: 'utf-8',
    title: 'New Remix App',
    viewport: 'width=device-width,initial-scale=1',
  },
]

// Export `rootAuthLoader()` as the root route `loader`
export const loader: LoaderFunction = (args) => rootAuthLoader(args)

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />
}

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.

Update your root.tsx file with the following code:

app/root.tsx
import type { MetaFunction, LoaderFunction } from '@remix-run/node'

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

import { rootAuthLoader } from '@clerk/remix/ssr.server'
// Import ClerkApp
import { ClerkApp } 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)

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

function App() {
  return <Outlet />
}

// Wrap your app with `ClerkApp`
export default ClerkApp(App)

Protect your pages

Client-side

To protect your pages on the client-side, Clerk's prebuilt control components control the visibility of content based on the user's authentication state.

The following example uses the following components:

routes/_index.tsx
import {
  SignInButton,
  SignOutButton,
  SignUpButton,
  SignedIn,
  SignedOut,
  UserButton,
} from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <h1>Index Route</h1>
      <SignedIn>
        <p>You are signed in!</p>

        <UserButton />
      </SignedIn>
      <SignedOut>
        <p>You are signed out</p>

        <SignInButton />
      </SignedOut>
    </div>
  )
}

Server-side

To protect your routes, use the getAuth() function in your loader. This function retrieves the authentication state from the request object, returning an Auth object that includes the userId, allowing you to determine if the user is authenticated.

routes/_index.tsx
import { UserButton } from '@clerk/remix'
import { getAuth } from '@clerk/remix/ssr.server'
import { LoaderFunction, redirect } from '@remix-run/node'

export const loader: LoaderFunction = async (args) => {
  const { userId } = await getAuth(args)
  if (!userId) {
    return redirect('/sign-in')
  }
  return {}
}

export default function Index() {
  return (
    <div>
      <h1>Index route</h1>
      <p>You are signed in!</p>
      <UserButton />
    </div>
  )
}

Create your first user

Run your project with the following command:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev
terminal
bun dev

Visit your app's homepage at http://localhost:5173. Sign up to create your first user.

Next steps

Create a custom sign-in-or-up page

Learn how add custom sign-in-or-up page with Clerk components.

Read user and session data

Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix app.

Customization & localization

Learn how to customize and localize the Clerk components.

Clerk components

Learn more about the prebuilt components.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on