# 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.

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.

## 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.

```typescript title="quickback/quickback.config.ts"
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
};
```

```bash
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](/compiler/config) for all `account` options and [Multi-Domain Architecture](/compiler/config/domains) for custom domain setup.

### Skip SPA Rebuild

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

```typescript
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

```typescript
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:

| Flag | Pages Included |
|------|---------------|
| `auth.password` | Password login, inline password change on profile |
| `auth.emailOTP` | Email OTP login flow, email-based password reset |
| `auth.passkey` | Passkey setup and management |
| `auth.organizations` | Dashboard, org creation, member management, invitations |
| `auth.admin` | Admin panel (user management) |

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.

## 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](/stack/account-ui/with-quickback)** — Configuration reference for the `account` block
- **[Feature Flags](/stack/account-ui/features)** — Enable and disable features
- **[Environment Variables](/stack/account-ui/environment-variables)** — Configuration reference
- **[Customization](/stack/account-ui/customization)** — Branding, labels, and theming
- **[Multi-Domain Architecture](/compiler/config/domains)** — Custom domains and hostname routing
