Configuration
Configuration
Learn how to configure your supastarter application.
supastarter is a highly flexible and customizable starter kit and allow you to configure the project to your needs. You can find the main config file in the config/index.ts file in the repository.
This section will cover all configuration options and when to use them.
Config file You can find the configuration object in the config/index.ts file in the repository.
export const config = {
// Internationalization
i18n: {
// Whether internationalization should be enabled (if disabled, you still need to define the locale you want to use below and set it as the default locale)
enabled: true,
// Define all locales here that should be available in the app
// You need to define a label that is shown in the language selector and a currency that should be used for pricing with this locale
locales: {
en: {
currency: "USD",
label: "English",
},
de: {
currency: "USD",
label: "Deutsch",
},
},
// The default locale is used if no locale is provided
defaultLocale: "en",
// The default currency is used for pricing if no currency is provided
defaultCurrency: "USD",
// The name of the cookie that is used to determine the locale
localeCookieName: "NEXT_LOCALE",
},
// Organizations
organizations: {
// Whether organizations are enabled in general
enable: true,
// Whether billing for organizations should be enabled (below you can enable it for users instead)
enableBilling: true,
// Whether the organization should be hidden from the user (use this for multi-tenant applications)
hideOrganization: false,
// Should users be able to create new organizations? Otherwise only admin users can create them
enableUsersToCreateOrganizations: true,
// Whether users should be required to be in an organization. This will redirect users to the organization page after sign in
requireOrganization: false,
// These colors are used for placeholder avatar if the organization has no logo uploaded
avatarColors: ["#4e6df5", "#e5a158", "#9dbee5", "#ced3d9"],
// Define forbidden organization slugs. Make sure to add all paths that you define as a route after /app/... to avoid routing issues
forbiddenOrganizationSlugs: [
"new-organization",
"admin",
"settings",
"ai-demo",
],
},
// Users
users: {
// Whether billing should be enabled for users (above you can enable it for organizations instead)
enableBilling: true,
// Whether you want the user to go through an onboarding form after signup (can be defined in the OnboardingForm.tsx)
enableOnboarding: false,
},
// Authentication
auth: {
// Whether users should be able to create accounts (otherwise users can only be by admins)
enableSignup: true,
// Whether users should be able to sign in with a magic link
enableMagicLink: true,
// Whether users should be able to sign in with a social provider
enableSocialLogin: true,
// Whether users should be able to sign in with a passkey
enablePasskeys: true,
// Whether users should be able to sign in with a password
enablePasswordLogin: true,
// where users should be redirected after the sign in
redirectAfterSignIn: "/app",
// where users should be redirected after logout
redirectAfterLogout: "/",
// how long a session should be valid
sessionCookieMaxAge: 60 * 60 * 24 * 30,
},
// Mails
mails: {
// the from address for mails
from: "hello@your-domain.com",
},
// Frontend
ui: {
// the themes that should be available in the app
enabledThemes: ["light", "dark"],
// the default theme
defaultTheme: "light",
// the saas part of the application
saas: {
// whether the saas part should be enabled (otherwise all routes will be redirect to the marketing page)
enabled: true,
// whether the sidebar layout should be used
useSidebarLayout: true,
},
// the marketing part of the application
marketing: {
// whether the marketing features should be enabled (otherwise all routes will be redirect to the saas part)
enabled: true,
},
},
// Storage
storage: {
// define the name of the buckets for the different types of files
bucketNames: {
avatars: process.env.NEXT_PUBLIC_AVATARS_BUCKET_NAME ?? "avatars",
},
},
// Contact form
contactForm: {
// whether the contact form should be enabled
enabled: true,
// the email address to which the contact form should be sent
to: "hello@your-domain.com",
// the subject of the email
subject: "New contact form submission",
},
// Payments
payments: {
// define the products that should be available in the checkout
// read the payments documentation for more information on how to define plans
plans: {
// ...
},
},
};