React Router v7 with Better auth.

This template features React Router v7, Better auth, Drizzle ORM, and D1, designed for deployment on Cloudflare Workers.

🔐 Authentication Features

This template implements a complete authentication system using Better Auth with the following features:

• 📧 Email and Password Authentication - Secure login with email and password
• 🔑 Password Recovery - Forgot password and reset password functionality
• 🔄 Social Login - Sign in with Google and GitHub accounts
• 👤 Session Management - Secure session handling with Cloudflare KV storage
• 🗑️ Account Management - Including account deletion functionality
• 👑 Admin Panel - Complete admin dashboard with user management, role-based access control

⭐ Core Features

• 🚀 Server-side rendering
• ⚡️ Hot Module Replacement (HMR)
• 📦 Asset bundling and optimization
• 🔄 Data loading and mutations
• 🔒 TypeScript by default
• 🎉 TailwindCSS and Shadcn for UI styling
• 🔑 Better Auth for authentication
• 🌧️ Drizzle ORM for database
• 🛢️ Cloudflare D1 for database
• 📁 Cloudflare KV for caching
• 📖 React Router docs

Demo

Here's a preview of the app:

For more demo images, check the .assets directory.

Links

React Router v7 Authentication Demo Series:

• React Router v7 Cloudflare workers template - React Router v7 Cloudflare workers template.
• React Router v7 with Remix Auth - Multi-strategy authentication demo using Remix Auth

Getting Started

Installation

Install the dependencies:

git clone https://github.com/foxlau/react-router-v7-better-auth.git
pnpm install

Development

Run an initial database migration:

cp .dev.vars.example .dev.vars
cp wrangler.jsonc.example wrangler.jsonc
pnpm db:apply
pnpm db:seed

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

Start the development server with HMR:

pnpm dev

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

Database Commands

• pnpm db:generate - Generate new database migration files
• pnpm db:apply - Apply migrations to local database
• pnpm db:apply-prod - Apply migrations to production database
• pnpm db:drop - Remove generated SQL migrations (interactive)
• pnpm db:seed - Seed local database with initial data from app/lib/database/seed.sql
• pnpm db:seed-prod - Seed production database with initial data from app/lib/database/seed.sql

Default Users (from seed.sql)

• Regular User: john@example.com / user@9900
• Admin User: admin@example.com / admin@8899

Building for Production

Create a production build:

pnpm build

Deployment

Deployment is done using the Wrangler CLI.

Use the following commands to create the D1 database and KV cache for Better Auth sessions. Remember to replace the db and kv configurations in the wrangler.toml file with the data generated by these commands:

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

To deploy directly to production:

pnpm db:apply-prod
pnpm deploy

To deploy a preview URL:

pnpm deploy:version

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

pnpm deploy:promote

Questions

If you have any questions, please open an issue.