Skip to content

harshil1712/rwsdk-better-auth-prisma

Repository files navigation

RWSDK Better Auth Example

A modern authentication demo built with RedwoodJS SDK (RWSDK), Better Auth, and Prisma ORM, deployed on Cloudflare Workers with D1 Database.

✨ Features

  • πŸ”’ GitHub OAuth Authentication with Better Auth
  • ⚑ Edge Computing with Cloudflare Workers
  • πŸ—„οΈ Type-safe Database operations with Prisma + D1
  • βš›οΈ React Server Components with server-side rendering
  • 🎨 Modern UI with RWSDK brand colors and dark mode support
  • πŸ“± Responsive Design with glassmorphism effects

πŸ› οΈ Tech Stack

πŸš€ Quick Start

Prerequisites

  • Node.js 18+
  • npm or pnpm
  • Cloudflare account (for deployment)

Installation

  1. Clone the repository

    git clone <repository-url>
    cd rwsdk-better-auth-prisma
  2. Install dependencies

    npm install
  3. Set up environment variables

    cp .env.example .env

    Configure the following variables:

    BETTER_AUTH_URL=http://localhost:5173
    OAUTH_GITHUB_CLIENT_ID=your_github_client_id
    OAUTH_GITHUB_CLIENT_SECRET=your_github_client_secret
  4. Generate Prisma client and apply migrations

    npm run generate
    npm run migrate:dev
  5. Generate Better Auth schema

    npx @better-auth/cli generate
  6. Start development server

    npm run dev

Visit http://localhost:5173 to see the application!

πŸ“ Available Scripts

Development

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run types - Run type checking

Database

  • npm run generate - Generate Prisma client and Wrangler types
  • npm run migrate:dev - Apply migrations to local database
  • npm run migrate:prd - Apply migrations to production D1 database
  • npm run migrate:new - Create new migration
  • npm run check - Run type checking after generation

Deployment

  • npm run release - Deploy to Cloudflare Workers

πŸ—„οΈ Database Setup

This project uses Prisma with the D1 adapter for Cloudflare Workers:

  1. Local Development: Uses SQLite file database
  2. Production: Uses Cloudflare D1 database

Migration Workflow

  1. Create migration:

    npm run migrate:new
  2. Apply to local database:

    npm run migrate:dev
  3. Deploy to production:

    npm run migrate:prd

πŸ”‘ Authentication Setup

GitHub OAuth Configuration

  1. Create GitHub OAuth App:

    • Go to GitHub Settings > Developer settings > OAuth Apps
    • Create a new OAuth App
    • Set Authorization callback URL to: http://localhost:5173/api/auth/callback/github
  2. Configure Environment Variables:

    OAUTH_GITHUB_CLIENT_ID=your_client_id
    OAUTH_GITHUB_CLIENT_SECRET=your_client_secret
  3. Better Auth Integration:

    • Better Auth handles OAuth flows automatically
    • Session management integrated with Prisma
    • Type-safe user authentication throughout the app

🎨 UI Features

  • RWSDK Brand Colors: Official orange color scheme (#F37337)
  • Dark Mode Support: True black theme with high contrast
  • Modern Design: Glassmorphism effects and smooth animations
  • Responsive Layout: Works on desktop, tablet, and mobile
  • Interactive Elements: Hover effects and transitions

πŸ“ Project Structure

src/
β”œβ”€β”€ app/
β”‚   β”œβ”€β”€ Document.tsx          # HTML document with styling
β”‚   β”œβ”€β”€ pages/
β”‚   β”‚   β”œβ”€β”€ Home.tsx          # Main landing page
β”‚   β”‚   └── user/
β”‚   β”‚       β”œβ”€β”€ Login.tsx     # Authentication page
β”‚   β”‚       └── routes.ts     # User route definitions
β”‚   └── shared/
β”œβ”€β”€ lib/
β”‚   β”œβ”€β”€ auth.ts              # Better Auth configuration
β”‚   └── auth-client.ts       # Client-side auth utilities
β”œβ”€β”€ worker.tsx               # Main application entry point
└── db.ts                    # Database configuration

prisma/
└── schema.prisma           # Database schema

migrations/
└── 0001_better_auth.sql    # Database migrations

πŸš€ Deployment

Cloudflare Workers Deployment

  1. Configure Wrangler:

    npx wrangler login
  2. Set up D1 Database:

    npx wrangler d1 create your-database-name
  3. Update wrangler.jsonc with your D1 database ID

  4. Deploy:

    npm run release

Environment Variables for Production

Set these in Cloudflare Workers dashboard:

  • BETTER_AUTH_URL - Your production domain
  • OAUTH_GITHUB_CLIENT_ID - GitHub OAuth client ID
  • OAUTH_GITHUB_CLIENT_SECRET - GitHub OAuth client secret

πŸ›Ÿ Troubleshooting

Common Issues

  1. Better Auth CLI Error:

    • Ensure auth configuration doesn't use Cloudflare Workers imports during CLI execution
    • The project includes runtime-compatible auth setup
  2. Migration Errors:

    • Check database connection string
    • Ensure Prisma client is generated: npm run generate
  3. Type Errors:

    • Run npm run types to check for issues
    • Regenerate types: npm run generate

πŸ“š Learn More

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit changes: git commit -m 'Add amazing feature'
  4. Push to branch: git push origin feature/amazing-feature
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


Built with ❀️ using RedwoodJS SDK, Better Auth, Prisma, and Cloudflare Workers

About

A template repo to use Better Auth for your RWSDK app

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published