This example shows how to use Clerk with Remix.
Clerk is Hiring!
Would you like to work on Open Source software and help maintain this repository? Apply today!
This starter demonstrates how to add authentication to your Remix application with Clerk. The example features adding sign up, sign in, profile management, and an authenticated API route to your Remix application.
Clerk works with Remix SSR and supports server-side rendering out-of-the-box and follows Remix conventions for loaders and higher-order components (HOCs).
A live demo of this starter application is available at clerk-remix-starter.vercel.app
To run the starter application locally, you need to:
- Sign up for a Clerk account at https://clerk.dev
- Clone this repo locally
- Rename the
.env.sampleto.envand then set the requiredCLERK_PUBLISHABLE_KEYandCLERK_SECRET_KEYvariables from the API keys screen in your Clerk dashboard. npm installthe required dependenciesnpm run devto start the development server- Open http://localhost:3000 and you are ready to go!
In Remix, app/root.tsx wraps your entire application in both server and browser contexts. Clerk makes three modifications to this file so the authentication state is shared with your Remix routes.
rootAuthLoaderexported asloaderClerkCatchBoundaryexported asCatchBoundary- The default export wrapped with
ClerkApp
For more details, please refer to the Get started with Remix guide, or take a look at the app/root.tsx file.
To learn more about Clerk and Remix, take a look at the following resources:
After having cloned the repo you only need to import your Git repository into Vercel, and it will be deployed.
If you'd like to avoid connecting a Git repository with Vercel, you can also deploy the directory by running the Vercel CLI:
npm i -g vercel
vercelIt is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git integration.
This project is licensed under the MIT license.
See LICENSE for more information.