Docs

Remix SPA Mode

You will learn the following:

  • Install @clerk/remix
  • Set your environment variables
  • Configure ClerkApp
  • Update your paths through ClerkApp options
  • Protecting your pages

Before you start

Note

This guide explains how to use Clerk with Remix in SPA mode. If you are using Remix with SSR, follow the Remix quickstart.

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.

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

Set your environment variables

  1. If you don't have an .env file in the root directory of your React project, create one now.
  2. Find your Clerk publishable key. If you're signed into Clerk, the .env snippet below will contain your key. Otherwise:
    • Navigate to the Clerk Dashboard and select your application.
    • In the navigation sidebar, select API Keys.
    • You can copy your key from the Quick Copy section.
  3. Add your key to your .env file.

Warning

You will not need the Clerk Secret Key in Remix SPA mode, as it should never be used on the client-side.

The final result should look as follows:

.env
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY

Configure ClerkApp

Clerk provides a ClerkApp wrapper to provide the authentication state to your React tree.

app/root.tsx
import { ClerkApp } from '@clerk/remix'
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

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 />
      </body>
    </html>
  )
}

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

export default ClerkApp(App, {
  publishableKey: PUBLISHABLE_KEY,
})

Update your paths through ClerkApp options

Next, add paths to your ClerkApp options to control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.

app/root.tsx
export default ClerkApp(App, {
  publishableKey: PUBLISHABLE_KEY,
  signInFallbackRedirectUrl: '/',
  signUpFallbackRedirectUrl: '/',
})

Protecting your pages

Clerk offers Control Components that allow you to protect your pages. These components are used to control the visibility of your pages based on the user's authentication state.

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>
        <div>
          <p>View your profile here</p>
          <UserButton />
        </div>
        <div>
          <SignOutButton />
        </div>
      </SignedIn>
      <SignedOut>
        <p>You are signed out</p>
        <div>
          <SignInButton />
        </div>
        <div>
          <SignUpButton />
        </div>
      </SignedOut>
    </div>
  )
}

Next steps

Now that you have an application integrated with Clerk, you will want to read the following documentation:

Customization & Localization

Learn how to customize and localize the Clerk components.

Authentication Components

Learn more about all our authentication components.

Client Side Helpers

Learn more about our client-side helpers and how to use them.

Feedback

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

Last updated on