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
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.
npm install @clerk/remixyarn add @clerk/remixpnpm 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.
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.
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.
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
Last updated on