This example shows how to use Clerk with Remix in a Remix application.
The example features adding sign up, sign in, profile management, and an authenticated API route to your Remix application, using Cerbos to authorize access.
- Cerbos, Remix and Clerk Example
Cerbos is an open-source authorization-as-a-service option for allowing decoupled access control in your software. It allows writing human-readable policy definitions that serve as context-aware access control policies for your application resources.
Cerbos works with any identity provider services like Auth0, Okta, FusionAuth, Clerk, Magic, WorkOS or even your own, bespoke directory system.
In this demo we use Clerk as the identity provider.
Our Remix application will connect with Clerk for authentication and Cerbos for authorization, to decide what actions are available on which resources for a given user.
The policies is defined in the cerbos/policies directory. Each policy is authored in a very human-readable format which you can learn more about at the Cerbos Policy documentation site, and for the demo revolves around access to a contacts resource.
- TypeScript - Type checking
- ESLint - Code linting
- Prettier - Code formatting
git clone https://github.com/cerbos/remix-clerk-cerbos.gitThen cd into the project directory and run npm install to install the dependencies.
npm installAlternatviely you could use yarn or pnpm or anything that runs npm scripts
Create a free account at https://clerk.dev and create a new application for development.
If you have any trouble you can check out Clerk's documentation for setting up your application.
There are 3 environment variables from Clerk's SDK that need to be set for this demo to work.
There is a .env.example file in the root of the project that you can copy and rename to .env and add your Clerk API keys to.
# .env
CLERK_PUBLISHABLE_KEY=your_key
CLERK_SECRET_KEY=your_secret_keyThe Clerk API keys can be found at the API Keys page in the Clerk dashboard.
Cerbos runs along side of the app, so for this local demonstration you'll have to start Cerbos separately from the app.
There are many ways to run Cerbos:
If you have Docker installed: you can simply run the npm run script cerbos:docker from the root of the project to start Cerbos in a container.
npm run cerbos:docker(on windows you may need to run npm run cerbos:docker:win)
If you have the Cerbos binary installed locally and available to the project, you can start Cerbos with the following command from the root of the project:
npm run cerbosThis will use the yaml policy files at cerbos/policies/*.yaml to configure authorization policies for Cerbos.
The cerbos/policies directory contains the policies that will be loaded into Cerbos when it starts. You can edit these policies to see how they affect the behavior of the app.
This demo is how to use Clerk with Cerbos in a Remix application, so to start it you can just start the Remix app in dev mode with the following command:
npm run devWhich will start up a dev server which you can open in your browser.
You could also npm run build and npm start the app to see what it would be like in production. Deployment of this app is out of scope for this example.
- Open your browser to
http://localhost:3000to see the included example code running.
There is a demonstration of changing the user's role, and seeing how that affects the permissions of the user to take actions on the resources.
**Note: If you are having trouble, try running the example in incognito mode, some common browser extensions cause Remix to fail in deev mode.**
npm run dev- Starts the development server.npm run cerbos:docker- Starts the Cerbos service in Docker.npm run format- Formats code with prettier for the entire project.npm run build- Builds the project for production.
To learn more about Cerbos, Remix and Clerk take a look at the following resources:
- Cerbos Website
- Cerbos Documentation
- Clerk.dev Documentation - learn about Clerk.dev features and API.
- Remix Documentation - learn about Remix features and API.