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
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/remix
yarn add @clerk/remix
pnpm add @clerk/remix
Set your environment variables
- If you don't have an
.env
file in the root directory of your React project, create one now. - 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.
- Add your key to your
.env
file.
The final result should look as follows:
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
Configure 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