Quickback Account UI

A complete authentication and account management frontend. It handles login, signup, password reset, profile management, device sessions, passkeys, organizations, and admin — so you don't have to build any of it.

What's Included

Account UI is a single React SPA that contains three distinct sections:

Account (every user)

Login, signup, profile editing, password management, device sessions, email changes, and account deletion. This is what every user interacts with.

Served on its own domain (e.g., auth.example.com) or at /account/ when embedded alongside the CMS.

Organization Management (multi-tenant)

Dashboard with org switching, org creation, member invitations, role management, and org settings. Only available when auth.organizations is enabled.

Admin Panel (admin users only)

User management dashboard — view all users, search, create accounts, ban/unban, reset passwords, and manage sessions. Only accessible to users with the admin role. Can be served on its own domain (e.g., admin.example.com) via the adminDomain config.

Quick Start (Compiler-Embedded)

The recommended approach: add account to your quickback.config.ts and compile. The compiler builds the SPA from source with your project-specific settings baked in.

export default {
  name: "my-app",
  template: "hono",
  cms: { domain: "cms.example.com" },
  account: {
    domain: "auth.example.com",
    name: "My App",
    auth: {
      password: true,
      passkey: true,
      organizations: true,
      admin: true,
    },
  },
  // ...providers
};

quickback compile
npx wrangler deploy

That's it. The compiler:

1. Reads your auth feature flags and branding from the config
2. Generates a .env file with the correct VITE_* variables
3. Builds the SPA from source with Vite (inside Docker)
4. Excludes routes for disabled features (compile-time tree shaking)
5. Outputs the built assets alongside your API code

No manual .env configuration needed. No separate deployment.

See Configuration for all account options and Multi-Domain Architecture for custom domain setup.

Skip SPA Rebuild

After the first compile, skip rebuilding the Account SPA on subsequent compiles:

account: { build: false, /* ...other options */ }

Useful when iterating on API features — saves significant compile time. Set back to true (or omit) when you need to update the Account UI.

Custom Output Directory

account: { outputDir: "my-custom-path/account" }

Changes where compiled Account assets are placed, instead of the default src/apps/account/.

Compile-Time Feature Gating

Auth feature flags control which pages are included in the bundle:

When a flag is false, the corresponding route files are removed before the Vite build — they never appear in the JavaScript bundle. This keeps production bundles minimal.

Standalone Usage

Account UI also works outside of Quickback:

Template (own the source)

Clone the repo and customize directly:

npx degit Kardoe-com/quickback-better-auth-account-ui my-account-app
cd my-account-app
npm install

Configure via .env files and deploy as a standalone Cloudflare Worker. See Standalone Usage for Better Auth backends or With Quickback for Quickback-compiled backends.

Library (npm package)

Install as a dependency:

npm install quickback-better-auth-account-ui

import { AuthApp, setAppConfig } from 'quickback-better-auth-account-ui';
import 'quickback-better-auth-account-ui/styles.css';

setAppConfig({
  authRoute: 'quickback',
  name: 'My App',
});

See Library Usage for details.

Features

• Authentication — Email/password, passkeys (WebAuthn), email OTP, magic links, email verification, password reset
• Account Management — Profile editing, avatar upload, password changes, device/session management, account deletion
• Organizations — Multi-tenant org management with owner/admin/member roles, invitations, and org settings
• Admin Panel — User management dashboard with search, create, ban/unban, password reset, and session viewing
• API Keys — Generate and manage API keys for programmatic access
• CLI Authorization — Device authorization flow for quickback login

Next Steps

• With Quickback — Compiler-embedded and standalone setup
• Standalone Usage — Use with any Better Auth backend
• Library Usage — Import as an npm package
• Feature Flags — Enable and disable features
• Environment Variables — Configuration reference
• Customization — Branding, labels, and theming
• Multi-Domain Architecture — Custom domains and hostname routing