Customization with App Configuration

This page will guide you through the power of the /app/app.config.ts file, allowing you to tailor almost every aspect of the kit to meet your specific needs.

Purpose of the Config File

The /app/app.config.ts serves as a central configuration hub, enabling you to customize various elements of your application. Use this file to store values that are used across the app to avoid hardcoding them in multiple places.

Let's explore the key sections of the configuration and understand how you can leverage them.

Branding

Define your brand identity with details such as the company name, app name, and logo URL.

brand: {
  companyName: "Your Company",
  appName: "Your App",
  logoUrl: "/path/to/logo.png",
  // ... other branding configurations
};

Pages

Configure the path for the different pages within your application. This is useful when you want to redirect users, link to a specific page etc. We use this object to extract the values, that way if you change the path, you only need to change it in one place.

pages: {
  home: "/",
  about: "/about",
  // ... other page configurations
};

Redirects

Specify where users should be redirected after signing in, signing out, or accessing unauthorized pages.

redirects: {
  afterSignin: "/dashboard",
  afterSignout: "/",
  // ... other redirect configurations
};

Account

Customize account-related settings, such as whether users can delete their accounts and whether the user's connected accounts section should be displayed.

account: {
  allowDeleteAccount: true;
  showConnectedAccountsSection: true;
  // ... other account configurations
}

API Endpoints

Customize API-related configurations, such as the base URL and specific endpoints.

api: {
    baseUrl: process.env.API_BASE_URL,
    authProviders: "/api/auth/providers",
    // ... other api endpoints
  };

Authentication Providers

Enable and configure authentication providers like email, GitHub, Google, and Facebook.

auth: {
  providers: {
    email: {
      enabled: true,
    },
    github: {
      enabled: true,
      clientId: "your-github-client-id",
      clientSecret: "your-github-client-secret",
    },
    google: {
      enabled: true,
      clientId: "your-google-client-id",
      clientSecret: "your-google-client-secret",
    },
    facebook: {
      enabled: true,
      clientId: "your-facebook-app-id",
      clientSecret: "your-facebook-app-secret",
    },
  },
};

Billing with Stripe

If you choose to integrate Stripe for billing, configure the necessary settings.

billing: {
  stripe: {
    enabled: true,
    publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    secretKey: process.env.STRIPE_SECRET_KEY,
    // ... other Stripe configurations
  },
};

Feel free to explore the entire /app/app.config.ts file to discover more customization options. Modify values, add new features, and make the Full-Stack Kit truly yours!