Better Auth Pulse

A visual studio for Better Auth configuration with drag-and-drop interface and automatic environment variable generation.

✨ Features

• 🎨 Visual Configuration: Drag-and-drop interface for Better Auth setup
• 🔧 Node-Based Editor: Intuitive flow-based configuration
• ⚙️ Environment Generation: Automatic .env file generation with all required variables
• 🔐 OAuth Providers: Support for Google, GitHub, Discord, Twitter, and more
• 📧 Email Configuration: Resend integration with email verification
• 🗄️ Database Support: Prisma and Drizzle adapters
• 🔒 Security Features: Rate limiting, session management, account linking
• 📱 Responsive Design: Works on desktop and mobile devices
• 🎯 Real-time Preview: See your auth configuration as you build it

🚀 Quick Start

Installation

npm install better-auth-pulse
# or
yarn add better-auth-pulse
# or
pnpm add better-auth-pulse

Usage

# Start the visual studio
npx better-auth-pulse

# Or use the CLI
npx better-auth-pulse init

🎯 How It Works

1. Drag & Drop: Add authentication nodes to your canvas
2. Configure: Click the settings button on nodes to configure OAuth providers, database settings, etc.
3. Generate: Click "Save to auth.ts" to generate both your auth.ts file and .env file
4. Deploy: Use the generated files in your Better Auth project

🔧 Configuration

OAuth Providers

Configure OAuth providers by dragging them to the canvas and clicking the settings button:

• Google OAuth: Client ID and Client Secret
• GitHub OAuth: Client ID and Client Secret
• Discord OAuth: Client ID and Client Secret
• Twitter OAuth: Client ID and Client Secret

Database Configuration

• Prisma: PostgreSQL, MySQL, SQLite support
• Drizzle: Multi-database support
• Connection strings: Automatic environment variable generation

Email Services

• Resend: API key and from email configuration
• Email verification: Automatic setup
• Password reset: Built-in templates

📁 Generated Files

auth.ts

import { PrismaClient } from "@prisma/client";
import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";

const prisma = new PrismaClient();

export const auth = betterAuth({
  adapter: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
  database: {
    provider: "postgresql",
    url: process.env.DATABASE_URL,
  },
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
});

.env

# Better Auth Environment Variables
# Generated by Better Auth Pulse Studio

DATABASE_URL=postgresql://user:password@localhost:5432/mydb
BETTER_AUTH_SECRET=your-secret-key
NEXT_PUBLIC_APP_URL=http://localhost:3000

# OAuth Provider Credentials
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Email Configuration
RESEND_API_KEY=your-resend-api-key
[email protected]

🎨 Node Types

Authentication Core

• Auth Starter: Main authentication entry point
• Sign In: User sign-in functionality
• Sign Up: User registration
• Email + Password: Email/password authentication
• Email Verification: Email verification settings

OAuth Providers

• Google OAuth: Google authentication
• GitHub OAuth: GitHub authentication
• Discord OAuth: Discord authentication
• Twitter OAuth: Twitter authentication

Database & Storage

• Prisma Database: Prisma ORM integration
• Drizzle Database: Drizzle ORM integration

Advanced Features

• Rate Limiting: API rate limiting
• Account Linking: Multi-provider account linking
• Session Management: Session configuration
• Organization: Multi-tenant support

🛠️ Development

# Clone the repository
git clone https://github.com/your-username/better-auth-pulse.git

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run type checking
pnpm type-check

📝 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions

🙏 Acknowledgments

• Better Auth - The amazing authentication library
• React Flow - The flow-based editor
• Radix UI - Accessible UI components
• Tailwind CSS - Utility-first CSS framework

Made with ❤️ by the Better Auth Pulse Team