Remix SPA Mode
You will learn the following:
- Install
@clerk/remix - Set your environment variables
- Configure
ClerkApp - Update your paths through
ClerkAppoptions - Protecting your pages
Before you start
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