Remix SPA Mode
Before you start
This guide explains how to use Clerk with Remix in SPA mode. To use Clerk with Remix in SSR mode, follow the Remix quickstart.
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:
npm install @clerk/remixyarn add @clerk/remixpnpm add @clerk/remixbun add @clerk/remixAdd your Clerk Publishable Key to your .env file. It can always be retrieved from the API keys page in the Clerk Dashboard.
- In the Clerk Dashboard, navigate to the API keys page.
- In the Quick Copy section, copy your Clerk Publishable Key.
- Paste your key into your
.envfile.
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEYConfigure ClerkApp
Clerk provides a ClerkApp wrapper to provide the authentication state to your React tree. You must pass your Publishable Key to ClerkApp.
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
// Wrap your app with `ClerkApp`
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.
export default ClerkApp(App, {
publishableKey: PUBLISHABLE_KEY,
signInFallbackRedirectUrl: '/',
signUpFallbackRedirectUrl: '/',
})Protect your pages
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:
<SignedIn>: Children of this component can only be seen while signed in.<SignedOut>: Children of this component can only be seen while signed out.<UserButton />: Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.<SignInButton />: An unstyled component that links to the sign-in page. In this example, since no props or environment variables are set for the sign-in URL, this component links to the Account Portal sign-in page.
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>
)
}Customization & localization
Learn how to customize and localize the Clerk components.
Clerk components
Learn more about the prebuilt components.
Client-side helpers
Learn more about our client-side helpers and how to use them.
Feedback
Last updated on