Quickback Docs

Environment Variables

Complete reference for configuring Quickback Account UI

Environment Variables

Configure the Account UI by setting environment variables in your .env file or deployment platform.

Required Variables

These variables are required for the Account UI to function:

API Configuration

# Quickback API URL
VITE_API_URL=https://api.example.com

# Account UI URL (where the Account UI is deployed)
VITE_ACCOUNT_APP_URL=https://account.example.com

Required Configuration

The application will throw an error if VITE_API_URL is not set.

App Identity

Configure your application's basic information:

# App name (displayed in UI)
VITE_APP_NAME=My Application

# Tagline (shown on landing pages)
VITE_APP_TAGLINE=Build faster, ship sooner

# Full description
VITE_APP_DESCRIPTION=A complete platform for building modern web applications

# Company information
VITE_COMPANY_NAME=My Company Inc.
VITE_COMPANY_ADDRESS=123 Main St, Suite 100, San Francisco, CA 94105

URLs

Main Application

# Your main application URL
# Users will be redirected here after authentication
VITE_APP_URL=https://app.example.com

# Organization/Tenant URL pattern (optional)
# Use {slug} as placeholder for organization identifier
# Examples:
#   /organizations/{slug}           -> app.example.com/organizations/acme
#   /workspace/{slug}               -> app.example.com/workspace/acme
#   https://{slug}.example.com      -> acme.example.com
VITE_TENANT_URL_PATTERN=/organizations/{slug}
# Support/help URL
VITE_SUPPORT_URL=https://support.example.com

# Privacy policy URL
VITE_PRIVACY_URL=https://example.com/privacy

# Terms of service URL
VITE_TERMS_URL=https://example.com/terms

Email Configuration

# From address for all emails
VITE_EMAIL_FROM=noreply@example.com

# Reply-to address
VITE_EMAIL_REPLY_TO=support@example.com

# Support email address
VITE_SUPPORT_EMAIL=support@example.com

# AWS Region for SES (if using AWS SES)
VITE_EMAIL_REGION=us-east-1

Branding

# Primary theme color (hex code)
VITE_THEME_COLOR=#1e293b

# SEO keywords (comma-separated)
VITE_SEO_KEYWORDS=saas,authentication,account management

Feature Flags

Enable or disable features using boolean environment variables:

Authentication Features

# Enable user signup (default: true)
ENABLE_SIGNUP=true

# Enable email verification (default: true)
ENABLE_EMAIL_VERIFICATION=true

# Disable email deliverability checks (default: false)
# Set to true to skip checking if email addresses are deliverable
DISABLE_EMAIL_STATUS_CHECK=false

# Enable passkey (WebAuthn) authentication (default: true)
ENABLE_PASSKEYS=true

# Enable passkey signup — create accounts with just a passkey (default: true)
ENABLE_PASSKEY_SIGNUP=true

# Enable email OTP verification (default: true)
ENABLE_EMAIL_OTP=true

# Enable magic link authentication (default: true)
ENABLE_MAGIC_LINK=true

# Enable social authentication (default: false)
ENABLE_SOCIAL_AUTH=false

Account Management Features

# Enable account deletion (default: true)
ENABLE_ACCOUNT_DELETION=true

# Enable file uploads (avatar, etc.) (default: false)
VITE_ENABLE_FILE_UPLOADS=false

# Enable dark mode toggle (default: true)
ENABLE_THEME_TOGGLE=true

Organization Features

# Enable multi-tenant organizations (default: true)
ENABLE_ORGANIZATIONS=true

# Enable teams within organizations (default: true)
ENABLE_TEAMS=true

Admin Features

# Enable admin panel (default: true)
ENABLE_ADMIN=true

Complete Example

Here's a complete .env file with all common configuration:

.env
# ===== REQUIRED =====
VITE_API_URL=https://api.example.com
VITE_ACCOUNT_APP_URL=https://account.example.com

# ===== APP IDENTITY =====
VITE_APP_NAME=Acme SaaS
VITE_APP_TAGLINE=Build faster, ship sooner
VITE_APP_DESCRIPTION=The complete platform for modern web applications
VITE_COMPANY_NAME=Acme Corporation
VITE_COMPANY_ADDRESS=123 Main St, Suite 100, San Francisco, CA 94105

# ===== URLS =====
VITE_APP_URL=https://app.acme.com
VITE_TENANT_URL_PATTERN=/organizations/{slug}
VITE_SUPPORT_URL=https://help.acme.com
VITE_PRIVACY_URL=https://acme.com/privacy
VITE_TERMS_URL=https://acme.com/terms

# ===== EMAIL =====
VITE_EMAIL_FROM=noreply@acme.com
VITE_EMAIL_REPLY_TO=support@acme.com
VITE_SUPPORT_EMAIL=support@acme.com
VITE_EMAIL_REGION=us-east-1

# ===== BRANDING =====
VITE_THEME_COLOR=#3b82f6

# ===== SEO =====
VITE_SEO_KEYWORDS=saas,project management,team collaboration

# ===== FEATURES =====
ENABLE_SIGNUP=true
ENABLE_EMAIL_VERIFICATION=true
ENABLE_PASSKEYS=true
ENABLE_PASSKEY_SIGNUP=true
ENABLE_EMAIL_OTP=true
ENABLE_MAGIC_LINK=true
ENABLE_ORGANIZATIONS=true
ENABLE_TEAMS=true
ENABLE_ADMIN=true
ENABLE_ACCOUNT_DELETION=true
VITE_ENABLE_FILE_UPLOADS=true
ENABLE_THEME_TOGGLE=true
DISABLE_EMAIL_STATUS_CHECK=false
ENABLE_SOCIAL_AUTH=false

Environment-Specific Configuration

Development

.env.development
VITE_API_URL=http://localhost:8787
VITE_ACCOUNT_APP_URL=http://localhost:5173
VITE_APP_URL=http://localhost:3000
DISABLE_EMAIL_STATUS_CHECK=true

Staging

.env.staging
VITE_API_URL=https://api-staging.example.com
VITE_ACCOUNT_APP_URL=https://account-staging.example.com
VITE_APP_URL=https://app-staging.example.com

Production

.env.production
VITE_API_URL=https://api.example.com
VITE_ACCOUNT_APP_URL=https://account.example.com
VITE_APP_URL=https://app.example.com
ENABLE_EMAIL_VERIFICATION=true
DISABLE_EMAIL_STATUS_CHECK=false

Cloudflare Pages Setup

When deploying to Cloudflare Pages, set environment variables in the dashboard:

  1. Go to Settings → Environment Variables
  2. Add each VITE_* variable
  3. Separate values for Production and Preview branches

Build Variables

Vite environment variables are baked into the build at build time, not runtime. Changing a variable requires a rebuild and redeploy.

Wrangler Configuration

For wrangler dev and wrangler deploy, add variables to wrangler.toml:

wrangler.toml
[env.production.vars]
VITE_API_URL = "https://api.example.com"
VITE_ACCOUNT_APP_URL = "https://account.example.com"
VITE_APP_NAME = "My App"
# ... other variables

Or use .dev.vars for local development (git-ignored):

.dev.vars
VITE_API_URL=http://localhost:8787
VITE_ACCOUNT_APP_URL=http://localhost:5173

Runtime Configuration

Some values can be overridden at runtime using the config API:

import { setAppConfig } from '@/config/app';

setAppConfig({
  name: 'My Custom App',
  branding: {
    primaryColor: '#ff6600',
    logoUrl: '/custom-logo.png',
  },
  urls: {
    base: 'https://account.custom.com',
    app: 'https://app.custom.com',
  },
});

Limitations

Runtime configuration only works for values consumed by the React application. Environment variables used during the Vite build process cannot be changed at runtime.

Validation

The Account UI validates configuration on startup:

  • Missing VITE_API_URL: Throws error
  • Invalid URLs: Logs warning
  • Missing optional fields: Uses defaults

Check the browser console for configuration warnings.

Next Steps

Admin Panel

User and system administration in Account UI

Customization

Customize branding, labels, and messaging in the Account UI

On this page

Environment VariablesRequired VariablesAPI ConfigurationApp IdentityURLsMain ApplicationSupport and LegalEmail ConfigurationBrandingFeature FlagsAuthentication FeaturesAccount Management FeaturesOrganization FeaturesAdmin FeaturesComplete ExampleEnvironment-Specific ConfigurationDevelopmentStagingProductionCloudflare Pages SetupWrangler ConfigurationRuntime ConfigurationValidationNext Steps