Configuration
App configuration and settings
All application configuration is centralized in src/config/ using a single Config object pattern.
Configuration Files
src/config/
├── app.ts # Core app settings (single Config object)
├── colors.ts # Color palette definitions
├── company.ts # Company info and social links
├── fonts.ts # Font configuration
└── storage.ts # Storage bucket definitionsFavicon Generation
Generate favicons using RealFaviconGenerator:
- Go to realfavicongenerator.net
- Upload your source icon (minimum 512x512px recommended)
- Customize settings per platform
- Download the generated package
File Placement
| Generated File | Place In |
|---|---|
favicon.ico, favicon-96x96.png | public/ |
apple-touch-icon.png | public/ |
web-app-manifest-*.png | public/ |
site.webmanifest | public/ |
favicon.svg (optional) | src/app/ |
Update public/site.webmanifest with your app name and theme colors.
Quick Links
Environment Variables
Environment variable validation with Zod
Feature Flags
Feature flag configuration and usage
Configuration Pattern
All configuration is accessed via a single default export:
import Config from "@/config/app";
// Access via: Config.<Area>.<KEY>
Config.Auth.COOKIE_PREFIX;
Config.Theme.DEFAULT;
Config.Navigation.CALLBACK_SEARCH_PARAM;This pattern provides type-safe, centralized configuration across the entire application.
Core Configuration Areas
Authentication
Config.Auth.COOKIE_PREFIX; // Cookie name prefix
Config.Auth.DISABLE_OPENAPI; // Disable OpenAPI docs
Config.Auth.STORE_SESSION_IN_DATABASE; // Store sessions in DB
Config.Auth.SESSION_FRESH_AGE; // Freshness check (0 = disabled)
Config.Auth.DISABLE_ACCOUNT_DELETION; // Disable user account deletion
Config.Auth.SIGN_UP_AUTO_LOGIN; // Auto-login after registrationAPI
Config.Api.TRPC_REQUEST_ID_HEADER; // Header for tRPC request IDs
Config.Api.API_KEY_HEADER; // Header for API key authTheme
Config.Theme.DEFAULT; // "light" | "dark" | "system"
Config.Theme.ENABLE_SYSTEM; // Allow system theme detection
Config.Theme.FORCE; // Force specific theme (overrides user)UI
Config.Ui.TABLE_ROW_OPTIONS; // Pagination options [20, 50, 100]
Config.Ui.DEFAULT_TOAST_DURATION; // Toast duration in msNavigation
Config.Navigation.CALLBACK_SEARCH_PARAM; // Redirect callback param
Config.Navigation.LOCALE_COOKIE_KEY; // Locale cookie name
Config.Navigation.DEFAULT_TIMEZONE; // Default timezoneStorage
Config.Storage.STORAGE_PROVIDER; // "firebase" | "s3"
Config.Storage.FILENAME_DIVIDER; // Divider for unique filenames
Config.Storage.PRIVATE_FILE_URL_EXPIRATION_HOURS; // Signed URL expiryPayments
Config.Payments.DEFAULT_CURRENCY; // Default currency code
Config.Payments.DEFAULT_CURRENCY_FORMAT_LOCALE; // Locale for formattingCompany Configuration
Company information and social links:
import { Company } from "@/config/company";
Company.Name; // Company name
Company.SupportEmail; // Support email
Company.Socials; // Social media handlesSocial Link Utilities
Generate social media URLs from handles:
import { getSocialUrl, type SocialsType } from "@/lib/links";
const url = getSocialUrl("instagram", "mycompany");
// Returns: "https://instagram.com/mycompany"Best Practices
- Always use Config - Never hardcode values - import and use Config
- Import default export -
import Config from "@/config/app"; - Document changes - Update documentation when adding new config values
- Use type-safe access - TypeScript will catch invalid config paths
Example
// ✅ Good
import Config from "@/config/app";
if (Config.Auth.SIGN_UP_AUTO_LOGIN) {
// Auto-login logic
}
// ❌ Bad - hardcoded value
if (false) {
// Auto-login logic
}Always use the Config object instead of hardcoding values. This ensures consistent behavior and makes changes easier.