⚠️ Beta Version Notice

Better Auth Studio is currently in beta and in early development. You may encounter bugs or incomplete features. Please report any issues you find on our GitHub repository to help us improve the project. Your feedback is greatly appreciated!

A web-based studio interface for managing Better Auth applications. Better Auth Studio provides a comprehensive dashboard for managing users, organizations, teams, and more.

A sneak peek of the studio dashboard and management interface.

For the hosted version, please join the waitlist: better-auth.build

📖 Documentation

Recommended: Install as a dev dependency (for project-specific versions):

pnpm add -D better-auth-studio

Or install globally using pnpm:

pnpm add -g better-auth-studio

Or use pnpx to run it without installation:

pnpx better-auth-studio [cmd] 

1. Navigate to your Better Auth project directory

   cd your-better-auth-project

2. Start the studio

   If installed as dev dependency:

   pnpm better-auth-studio start

   Or with pnpx:

   pnpx better-auth-studio start

3. Open your browser

   • The studio will automatically open at http://localhost:3000
   • Or manually navigate to the URL shown in the terminal

Before using Better Auth Studio, ensure you have:

• Node.js (v18 or higher)
• A Better Auth project with a valid auth.ts configuration file
• Database setup (Prisma, Drizzle, or SQLite)

Better Auth Studio automatically detects and works with:

• Prisma (prismaAdapter)
• Drizzle (drizzleAdapter)
• SQLite (new Database() from better-sqlite3)
• PostgreSQL (via Prisma or Drizzle)
• MySQL (via Prisma or Drizzle)

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

const prisma = new PrismaClient();

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: "postgresql", // or "mysql", "sqlite"
  }),
  // ... other config
});

// auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "./database";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg", // or "mysql", "sqlite"
  }),
  // ... other config
});

// auth.ts
import { betterAuth } from "better-auth";
import Database from "better-sqlite3";

export const auth = betterAuth({
  database: new Database("./better-auth.db"),
  // ... other config
});

• Overview statistics - User, teams and organization counts data

• View all users - Paginated list with search and filtering
• Create users - Add new users with email/password
• Edit users - Update user information, email verification status
• Delete users - Remove users from the system
• Bulk operations - Seed multiple test users
• User details - View user profiles, and accounts

• View organizations - List all organizations with pagination
• Create organizations - Add new organizations with custom slugs
• Edit organizations - Update organization details
• Delete organizations - Remove organizations
• Team management - Create and manage teams within organizations
• Member management - Add/remove members from teams
• Bulk seeding - Generate test organizations and teams

• Plugin status - Check which Better Auth plugins are enabled
• Database configuration - View current database adapter and settings
• Social providers - Configure OAuth providers (GitHub, Google, etc.)
• Email settings - Configure email verification and password reset

pnpx better-auth-studio start [options]

Options:

• --port <number> - Specify port (default: 3000)
• --host <string> - Specify host (default: localhost)
• --no-open - Don't automatically open browser
• --config <path> - Path to auth config file (default: auto-detect)
• --watch - Watch for changes in auth config file and reload server automatically

Examples:

# Start on custom port (if installed as dev dependency)
pnpm better-auth-studio start --port 3001

# Or with pnpx
pnpx better-auth-studio start --port 3001

# Start without opening browser
pnpm better-auth-studio start --no-open

# Use custom config file
pnpm better-auth-studio start --config ./custom-auth.ts

# Enable watch mode for auto-reload on config changes
pnpm better-auth-studio start --watch

# Combine multiple options
pnpx better-auth-studio start --port 3001 --watch --config ./src/auth.ts

Specify a custom path to your auth config file when it's in a non-standard location or auto-detection fails.

Example:

# With relative path
pnpm better-auth-studio start --config ./src/lib/auth.ts

# With absolute path
pnpm better-auth-studio start --config /path/to/project/auth.ts

How it works: Studio automatically searches for config files in common locations (auth.ts, src/auth.ts, lib/auth.ts, etc.). Use --config to specify a custom path when needed.

Automatically reload the server when your auth.ts file changes. Perfect for development when iterating on your auth configuration.

Example:

# Start with watch mode enabled
pnpx better-auth-studio start --watch

How it works: Monitors your auth config file for changes, automatically restarts the server, and updates the browser UI via WebSocket - no manual refresh needed.

# Check version
pnpx better-auth-studio --version

# Show help
pnpx better-auth-studio --help

⚠️ Beta Feature: Self-hosting is currently in beta. Please report any issues on GitHub.

Deploy Better Auth Studio alongside your application for production use.

Important: For self-hosting, install better-auth-studio as a regular dependency (not devDependency) since it's required at runtime in production:

pnpm add better-auth-studio

Note: The CLI usage (standalone studio) can be installed as a dev dependency, but self-hosting requires it in dependencies for production deployments.

Step 1: Initialize configuration

pnpx better-auth-studio init

This creates a studio.config.ts file:

import type { StudioConfig } from "better-auth-studio";
import { auth } from "./lib/auth";

const config: StudioConfig = {
  auth,
  basePath: "/api/studio",
  metadata: {
    title: "Admin Dashboard",
    theme: "dark",
  },
  access: {
    roles: ["admin"],
    allowEmails: ["[email protected]"],
  },
};

export default config;

The init command automatically creates app/api/studio/[[...path]]/route.ts:

import { createStudioHandler } from "better-auth-studio/nextjs";
import studioConfig from "@/studio.config";

const handler = createStudioHandler(studioConfig);

export {
  handler as GET,
  handler as POST,
  handler as PUT,
  handler as DELETE,
  handler as PATCH,
};

Access at http://localhost:3000/api/studio

Add the studio handler to your server:

import express from "express";
import { toNodeHandler } from "better-auth/node";
import { betterAuthStudio } from "better-auth-studio/express";
import { auth } from "./auth";
import studioConfig from "./studio.config";

const app = express();

app.use(express.json());
app.use("/api/studio", betterAuthStudio(studioConfig));
app.all("/api/auth/*", toNodeHandler(auth));

app.listen(3000);

Access at http://localhost:3000/api/studio

# Clone the repository
git clone https://github.com/Kinfe123/better-auth-studio.git
cd better-auth-studio

# Install dependencies
pnpm install

# Build the project
pnpm build

# Start development server
pnpm dev

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

MIT License - see LICENSE file for details.

If you encounter any issues or have questions:

Search existing issues on GitHub Create a new issue with detailed information