Standalone Usage

Account UI can be used with any Better Auth-powered backend, not just Quickback-compiled projects. This makes it a drop-in authentication frontend for any app using Better Auth.

Requirements

• A backend running Better Auth with API endpoints
• Node.js 18+ and npm/pnpm/bun
• A Cloudflare account (for deployment)

Setup

1. Clone or Install the Account UI

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

2. Configure the Auth Route Mode

The key difference from Quickback mode is the VITE_AUTH_ROUTE variable. Set it to better-auth to use Better Auth's default API paths:

# Auth route mode — use 'better-auth' for standalone
VITE_AUTH_ROUTE=better-auth

# Your Better Auth backend URL
VITE_API_URL=https://api.example.com

# Where this Account UI is hosted
VITE_ACCOUNT_APP_URL=https://account.example.com

This configures the auth client to use /api/auth as the base path (Better Auth's default), instead of Quickback's /auth/v1.

3. Configure Your App

# App identity
VITE_APP_NAME=My App
VITE_APP_TAGLINE=Welcome to My App

# Redirect after login
VITE_APP_URL=https://app.example.com

# Feature flags
ENABLE_SIGNUP=true
ENABLE_ORGANIZATIONS=true
ENABLE_PASSKEYS=true
ENABLE_EMAIL_OTP=true

See Environment Variables for the complete reference.

4. Build and Deploy

npm run build
npx wrangler deploy

Auth Route Modes

Account UI supports three routing modes, controlled by VITE_AUTH_ROUTE:

Better Auth Mode (Default)

Routes all auth requests to /api/auth/* — the standard Better Auth convention:

VITE_AUTH_ROUTE=better-auth

Custom Mode

For non-standard setups, use custom mode with explicit paths:

VITE_AUTH_ROUTE=custom
VITE_AUTH_BASE_PATH=/my-auth
VITE_DATA_BASE_PATH=/my-api
VITE_STORAGE_BASE_PATH=/my-storage

Backend Requirements

Your Better Auth backend must have the following plugins enabled for full Account UI functionality:

Only enable the features that match your backend's plugin configuration. Disable features for plugins you haven't installed:

# If your backend doesn't have the organization plugin:
ENABLE_ORGANIZATIONS=false

# If you haven't set up passkeys:
ENABLE_PASSKEYS=false

CORS Configuration

Your Better Auth backend must allow requests from the Account UI's domain. Configure CORS to include:

// In your Better Auth config
trustedOrigins: [
  "https://account.example.com",  // Account UI domain
],

Differences from Quickback Mode

Next Steps

• Environment Variables — Complete configuration reference
• Customization — Branding, labels, and theming
• Worker Setup — Cloudflare Workers deployment
• Feature Flags — Enable and disable features