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)
├── color-variants.ts # Semantic colors + generic component variants
├── 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/ |
favicon.svg (optional) | src/app/ |
Do not use a static public/site.webmanifest file. The manifest is
dynamically generated via src/app/manifest.ts, which Next.js automatically
serves at /manifest.webmanifest.
Web App Manifest
The manifest configuration is in src/app/manifest.ts:
import { Company } from "@/config/company";
import type { MetadataRoute } from "next";
export default function manifest(): MetadataRoute.Manifest {
return {
name: Company.Name,
short_name: Company.Name,
description: Company.Description,
start_url: "/",
icons: [
/* ... */
],
theme_color: "#ffffff",
background_color: "#ffffff",
// ...
};
}Update this file to customize your app name, theme colors, and icons.
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
App
Config.APP_VERSION; // App version from process envPWA
Config.Pwa.STANDALONE; // Run as standalone app (true) or browser tab (false)Authentication
Config.Auth.COOKIE_PREFIX; // Cookie name prefix
Config.Auth.DISABLE_OPENAPI; // Disable OpenAPI docs
Config.Auth.DISABLE_COOKIE_CACHE; // Disable cookie cache for sessions
Config.Auth.STORE_SESSION_IN_DATABASE; // Store sessions in DB
Config.Auth.DISABLE_SESSION_REFRESH; // Disable session refresh
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.RPC_REQUEST_ID_HEADER; // Header for RPC request IDs
Config.Api.API_KEY_HEADER; // Header for API key auth
Config.Api.DEFAULT_PREFIX; // API key prefix
Config.Api.API_KEY_SKIP_RATE_LIMIT; // Skip rate limits for API key requests
Config.Api.LIST_UNEXPOSED_PROCEDURES_IN_OPENAPI; // Include unexposed procedures in OpenAPIRate Limiting
Config.RateLimit.ENABLED; // Enable/disable rate limiting
Config.RateLimit.LOG_VIOLATIONS; // Log rate limit violations
Config.RateLimit.SEND_METRICS; // Send rate limit metricsTheme
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 ms
Config.Ui.AUTH_LAYOUT; // "image-form" | "centered-blank" | "card-over-image"
Config.Ui.NAVIGATION_LAYOUT; // "sidebar" | "floating"Cookie Banner
Config.CookieBanner.POSITION; // "center" | "bottom-left" | "bottom-right" | "full" | "top-bar"
Config.CookieBanner.ANIMATION_ENABLED; // Enable slide/fade animationDate / Time
Config.Date.MIN_CALENDAR_DATE; // Earliest calendar date
Config.Date.MAX_CALENDAR_DATE; // Latest calendar dateNavigation
Config.Navigation.CALLBACK_SEARCH_PARAM; // Redirect callback param
Config.Navigation.LOCALE_COOKIE_KEY; // Locale cookie name
Config.Navigation.LOCALE_HEADER_KEY; // Locale header key
Config.Navigation.TIMEZOME_HEADER_KEY; // Timezone header key
Config.Navigation.PATHNAME_HEADER; // Pathname header key
Config.Navigation.DEFAULT_TIMEZONE; // Default timezoneStorage
Config.Storage.STORAGE_PROVIDER; // Storage provider type (see src/config/storage.ts)
Config.Storage.FILENAME_DIVIDER; // Divider for unique filenames
Config.Storage.PRIVATE_FILE_URL_EXPIRATION_HOURS; // Signed URL expiryAnalytics
Config.Analytics.SESSION_ID_COOKIE_NAME; // Session cookie name
Config.Analytics.SESSION_ID_UPDATE_COOKIE_NAME; // Session refresh cookie nameBilling
Config.Billing.DEFAULT_CURRENCY; // Default currency code
Config.Billing.DEFAULT_CURRENCY_FORMAT_LOCALE; // Locale for currency formatting
Config.Billing.ORGANIZATION_BILLING; // Enable organization billing
Config.Billing.USER_BILLING; // Enable user billing
Config.Billing.ENABLED; // Computed billing enabled stateUsers
Config.Users.USERNAME_SUFFIX_NUMBERS; // Random username suffix digitsCompany 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.