Quickback Account UI

A complete authentication and account management frontend that ships with the Quickback Stack. 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. After sign-in, Account UI lands on /profile.

When organizations are enabled, /profile has Manage Organizations (the /dashboard org list and invites) and a Go to… control that opens the tenant app. The URL is account.appUrl plus account.tenantPattern with the org slug substituted (the same getTenantUrl used on the org dashboard). One org is a single button; several orgs is a picker. The control is hidden when those config values cannot produce a URL.

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

Organization Management (multi-tenant)

/dashboard is org management — org list, pending invitations, and the path into org settings (/$slug). Personal account settings stay on /profile. 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.

How to Enable

Add account to your quickback.config.ts and compile. The compiler builds the SPA from source with your project-specific settings baked in and bundles it into your Worker.

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. Bundles the built assets into your Worker alongside the API

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 routes guard themselves at runtime — each feature route checks its flag from the worker-injected window.__QUICKBACK_RUNTIME config in beforeLoad and redirects away, and navigation entries for it are hidden. The Account SPA ships as one generic prebuilt bundle; flags decide which surfaces exist for your project.

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
• Connected Accounts — Link Google and Cloudflare logins from /connected-accounts (linked from profile)
• 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 from /api-keys (linked from profile)
• CLI Authorization — Device authorization flow for quickback login

Next Steps

• With Quickback — Configuration reference for the account block
• Feature Flags — Enable and disable features
• Environment Variables — Configuration reference
• Customization — Branding, labels, and theming
• Multi-Domain Architecture — Custom domains and hostname routing