Better Auth Admin UI

Beautiful admin dashboard UI for better-auth.

Features

• 📊 User management dashboard
• 🚫 Ban/unban users with reasons and expiry
• 👥 Role management
• 🔐 Session management
• 👤 User impersonation
• 🔑 Password reset
• ⚡ Built with React and TypeScript
• 🎨 Styled with Tailwind CSS
• 📱 Fully responsive
• 🔄 Server Actions support (Next.js)

Installation

npm install better-auth-admin-ui

Requirements

• better-auth with admin plugin enabled
• React 18+
• Next.js 13+ (for server actions)
• Tailwind CSS (optional but recommended)

Quick Start

1. Set up better-auth with admin plugin

// lib/auth.ts
import { betterAuth } from "better-auth"
import { admin } from "better-auth/plugins"

export const auth = betterAuth({
  // ... your config
  plugins: [
    admin() // Required!
  ]
})

2. Add admin dashboard page

// app/admin/page.tsx
import { BetterAuthAdmin } from 'better-auth-admin-ui'
import { auth } from '@/lib/auth'

export default function AdminPage() {
  return <BetterAuthAdmin auth={auth} />
}

3. Import styles (optional)

If you're using Tailwind CSS, add this to your global CSS:

@import 'better-auth-admin-ui/styles.css';

4. Done!

Visit /admin to see your dashboard.

Advanced Usage

Pre-fetch users for better performance

import { headers } from 'next/headers'

export default async function AdminPage() {
  const users = await auth.api.listUsers({
    headers: await headers()
  })

  return <BetterAuthAdmin auth={auth} initialUsers={users} />
}

Protect the admin route

import { redirect } from 'next/navigation'

export default async function AdminPage() {
  const session = await auth.api.getSession({
    headers: await headers()
  })

  if (!session?.user?.role?.includes('admin')) {
    redirect('/')
  }

  return <BetterAuthAdmin auth={auth} />
}

Customization

<BetterAuthAdmin
  auth={auth}
  config={{
    defaultPageSize: 20,
    userColumns: ['name', 'email', 'role', 'createdAt'],
    enableImpersonation: true,
    enableBan: true,
    enableDelete: true,
    onUserBanned: (userId) => console.log('User banned:', userId),
    onUserDeleted: (userId) => console.log('User deleted:', userId),
    onUserRoleChanged: (userId, role) => console.log('Role changed:', userId, role)
  }}
/>

Features

User Management

• List Users: Paginated table with search and sorting
• View Details: Complete user information panel
• Ban/Unban: Ban users with optional expiry date
• Role Management: Change user roles via dropdown
• Delete User: Permanent user deletion with confirmation
• Set Password: Reset user password

Session Management

• View Sessions: See all active sessions for a user
• Session Details: IP address, device info, timestamps
• Revoke Session: Kill individual sessions
• Revoke All: Logout user from all devices

Impersonation

• Impersonate: Login as any user
• Visual Indicators: Clear UI showing impersonation status

Component API

BetterAuthAdmin

Main component that provides the complete admin interface.

interface BetterAuthAdminProps {
  auth: any // better-auth instance
  className?: string
  initialUsers?: User[]
  config?: {
    userColumns?: string[]
    defaultPageSize?: number
    enableImpersonation?: boolean
    enableBan?: boolean
    enableDelete?: boolean
    onUserBanned?: (userId: string) => void
    onUserDeleted?: (userId: string) => void
    onUserRoleChanged?: (userId: string, role: string) => void
  }
}

Using Individual Components

You can also use individual components for custom layouts:

import { UserList, UserDetail } from 'better-auth-admin-ui'

function MyCustomAdmin() {
  return (
    <div>
      <UserList
        users={users}
        onUserSelect={handleSelect}
        onBanUser={handleBan}
        onDeleteUser={handleDelete}
        onImpersonateUser={handleImpersonate}
      />
    </div>
  )
}

Tailwind CSS Setup

If you're using Tailwind CSS, make sure your tailwind.config.js includes the package:

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './node_modules/better-auth-admin-ui/**/*.{js,ts,jsx,tsx}'
  ],
  // ... rest of config
}

Examples

Check out the examples directory for:

• Next.js App Router implementation
• Custom styling examples
• Advanced usage patterns

TypeScript Support

This package is written in TypeScript and includes full type definitions.

import type { User, Session, AdminActions } from 'better-auth-admin-ui'

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

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

License

MIT

Links

• better-auth Documentation
• GitHub Repository
• npm Package

Support

If you encounter any issues, please file them on GitHub Issues.