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

```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](/configure) for all `account` options and [Multi-Domain Architecture](/configure/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 list + invitations), org creation, member management |
| `auth.admin` | Admin panel (user management) |

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