Configuration Overview

Before diving into development, it's important to configure your application environment properly. The configuration settings are centralized in the app-config.jsx file located in the src/ directory.

This file defines global settings that affect authentication, theming, language support, and backend communication. Centralizing configuration makes it easier to propagate settings across the entire application.

AppConfig Object

The configuration is exported as a single constant named AppConfig. This object encapsulates all relevant application settings.

OIDC Authentication Configuration

The first section of AppConfig contains the OpenID Connect (OIDC) configuration, essential for enabling authentication via providers like Keycloak.

Some values are dynamically pulled from environment variables:

app-config.jsx
oidc: {
  issuerUri: import.meta.env.VITE_OIDC_ISSUER,
  clientId: import.meta.env.VITE_OIDC_CLIENT_ID,
  homeUrl: import.meta.env.VITE_OIDC_BASE_URL,
  scopes: 'openid email profile',
  autoLogin: true,
  debugLogs: false,
  mockEnabled: import.meta.env.VITE_MOCK || false,
  mockUser: {
    username: 'alice',
    upn: 'alice',
    name: 'Alice Doe',
    firstName: 'Alice',
    middleNames: '',
    lastName: 'Doe',
    nickName: 'Ally',
    issuer: 'https://sso.strategyobject.com',
    subject: 'alice',
    gender: undefined,
    birthdate: undefined,
    address: {},
    phone: '',
    phoneVerified: false,
    email: '[email protected]',
    emailVerified: true,
    tokenId: '',
    rawToken: '',
    expirationTime: 0,
    expiration: undefined,
    issuedAtTime: 0,
    issuedAt: undefined,
    notBeforeTime: 0,
    notBefore: undefined,
    authTime: 0,
    auth: undefined,
    updatedAtTime: 0,
    updatedAt: undefined,
    audience: [],
    roles: [],
    scopes: [],
    claims: {},
    ownership: [],
    authenticated: true,
    picture: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    locale: 'en',
  },
}

🧪 The mockUser object is used when mock mode is enabled. It simulates an authenticated user for development and testing purposes, avoiding the need to log in through a real identity provider.

This section customizes the behavior and appearance of the application's navigation bar.

app-config.jsx
navbar: {
  darkToggle: true,
  languageMenu: true,
}

darkToggle: Shows or hides the switch for enabling dark mode.
languageMenu: Displays a dropdown for changing the application language.

Internationalization (i18n)

Define supported languages and locale settings here:

app-config.jsx
i18n: {
  languages: [
    { code: 'en', emoji: '🇺🇸', name: 'English' },
    { code: 'fr', emoji: '🇫🇷', name: 'Français' },
    { code: 'es', emoji: '🇪🇸', name: 'Español' },
    { code: 'ar', emoji: '🇸🇦', name: 'العربية', rtl: true },
  ]
}

This makes it easy to add or remove languages without modifying logic in other parts of your application.

API Configuration

Finally, the AppConfig can also include settings for API endpoints. These settings help maintain environment-specific URLs for communicating with backend services.

app-config.jsx
company: {
  apiBase: import.meta.env.VITE_COMPANY_API_BASE,
  apiUri: import.meta.env.VITE_COMPANY_API_URI,
}

By using environment variables, you can easily switch between different environments (development, mock, production) without changing the codebase.

info

You can add custom properties to the AppConfig object in app-config.jsx to centralize and manage configuration values efficiently. Simply define a new JSON key-value pair inside AppConfig, and it will be accessible throughout your application wherever AppConfig is imported.

✅ With these configurations in place, your application is now fully prepared for development and integration.