Remix Quickstart
You will learn the following:
- Install
@clerk/remix
- Set your Clerk API keys
- Configure
rootAuthLoader
- Configure
ClerkApp
- Protect your pages
Before you start
Example repository
Learn how to use Clerk to quickly and easily add secure authentication and user management to your Remix application. This guide assumes that you are using Remix v2 or later.
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.
Configure rootAuthLoader
To configure Clerk in your Remix application, you will need to update your root loader. This will enable you to have access to authentication state in any Remix routes.
Update your root.tsx
file with the following code:
If you need to load in additional data, you can pass your loader directly to the rootAuthLoader
.
Configure ClerkApp
Clerk provides a ClerkApp
wrapper to provide the authentication state to your React tree. This helper works with Remix SSR out-of-the-box and follows the "higher-order component" paradigm.
Update your root.tsx
file with the following code:
Protect your pages
Client-side
To protect your pages on the client-side, you can use Clerk's prebuilt control components that 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 />
: A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.<SignInButton />
: An unstyled component that links to the sign-in page. For this example, because you have not specified any props or environment variables for the sign-in URL, the component will link to Clerk's Account Portal sign-in page.<SignUpButton />
: An unstyled component that links to the sign-up page. For this example, because you have not specified any props or environment variables for the sign-in URL, the component will link to Clerk's Account Portal sign-up page.
Server-side
To protect your routes, use the getAuth()
function in your loader. This function retrieves the authentication state from the request object, returning an Auth
object that includes the userId
, allowing you to determine if the user is authenticated.
Create your first user
Run your project with the following command:
Visit your app's homepage at http://localhost:5173
. Sign up to create your first user.
Create custom sign-up and sign-in pages
Learn how add custom sign-up and sign-in pages with Clerk components.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix application.
Customization & localization
Learn how to customize and localize the Clerk components.
Clerk components
Learn more about Clerk's prebuilt components.
Feedback
Last updated on