/remix-clerk-starter

Primary LanguageTypeScriptMIT LicenseMIT


Remix Auth Starter

This example shows how to use Clerk with Remix.

chat on Discord documentation twitter

Clerk is Hiring!

Would you like to work on Open Source software and help maintain this repository? Apply today!

Table of contents

Overview

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).

Demo

A live demo of this starter application is available at clerk-remix-starter.vercel.app

Getting started

To run the starter application locally, you need to:

  1. Sign up for a Clerk account at https://clerk.dev
  2. Clone this repo locally
  3. Rename the .env.sample to .env and then set the required CLERK_FRONTEND_API and CLERK_API_KEY variables from the API keys screen in your Clerk dashboard.
  4. npm install the required dependencies
  5. npm run dev to start the development server
  6. Open http://localhost:3000 and you are ready to go!

Where the magic happens

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.

  1. rootAuthLoader exported as loader
  2. ClerkCatchBoundary exported as CatchBoundary
  3. 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.

Documentation

To learn more about Clerk and Remix, take a look at the following resources:

Deployment (Vercel)

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
vercel

It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git integration.

License

This project is licensed under the MIT license.

See LICENSE for more information.