React Router v7 with Remix Auth Starter Kit

An introductory starter kit for building applications with React Router v7 (Remix) and Remix Auth, designed to run seamlessly on Cloudflare Workers.

Features

• 🔐 TOTP, Google, and GitHub Login
  Supports TOTP authentication, Google login, and GitHub login. TOTP is integrated with Resend for secure email-based verification.

• 🔑 KV-Based Authentication and Rate Limiting
  Efficient session management and rate limiting using Cloudflare KV.

• 🛢️ Drizzle ORM + Cloudflare D1
  Seamless database integration with Drizzle ORM and Cloudflare D1.

• 🌗 Dynamic Color Schemes
  Supports theme customization with color scheme switching.

• 🎨 TailwindCSS + Shadcn UI
  Modern and customizable UI styling with TailwindCSS and Shadcn components.

• 🧪 Biome.js for Code Quality
  Ensures high-quality code with integrated linting and formatting.

• 🚀 Cloudflare Workers-Ready
  Optimized for deployment on Cloudflare Workers.

Demo

Here's a preview of the app:

For more demo images, check the .assets directory.

Links

More from the React Router v7 Series:

• React Router v7 with Better Auth - Authentication demo using Better Auth package.
• React Router v7 Cloudflare workers template - React Router v7 Cloudflare workers template.

Getting Started

Installation

Git clone the repository:

git clone https://github.com/foxlau/react-router-v7-remix-auth.git

Install the dependencies:

npm install

Development

First, copy the .dev.vars.example file and rename it to .dev.vars:

cp .dev.vars.example .dev.vars

Update the environment variables in the .dev.vars file according to your needs. These variables will be used by Wrangler during local development.

Run an initial database migration:

npm run db:apply

If you modify the Drizzle ORM schema, please run npm run db:generate first. If you need to delete the generated SQL migrations, execute npm run db:drop and select the SQL migration you wish to remove.

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Building for Production

Create a production build:

npm run build

Deployment

Deployment is done using the Wrangler CLI.

npx wrangler d1 create rr7-remix-auth
npx wrangler kv namespace create APP_KV

To deploy directly to production:

npm run db:apply-prod
npm run deploy

To deploy a preview URL:

npm run deploy:version

You can then promote a version to production after verification or roll it out progressively.

npm run deploy:promote

Questions

If you have any questions, please open an issue.