Multi-tenancy & teams

With the "teams" feature, supastarter integrats multi-tenancy functionality for your application. This allows users to create teams and share data with other users in the same team. Also subscriptions are based on a team level.

Here is an overview over the teams schema:

Disable multi-tenancy

In case you don't want to use the teams functionality you can easily disable / hide it. Since the inital team for each user is always created automatically, we can basically hide all team related UI elements and it will look like there is no team functionality at all.

You can find a working example on the demo/disable-multi-tenancy branch in the supastarter repository (opens in a new tab).

1. Hide the team select from the navbar

In the apps/web/modules/saas/shared/components/NavBar.tsx file, remove or comment out the following line:

<span className="hidden opacity-30 lg:block">
    <Icon.chevronRight className="h-4 w-4" />
</span>
 
<TeamSelect teams={teams} />

2. Refactor settings menu

In the apps/web/app/[locale]/(saas)/[team-slug]/settings/layout.tsx file you need to remove the Teams navigation section and move the Billing item to the User Account section, so that the menu items array looks like this:

const menuItems = [
  {
    title: t('settings.menu.account.title'),
    avatar: <UserAvatar name={user.name ?? ''} avatarUrl={user.avatar_url} />,
    items: [
      {
        title: t('settings.menu.account.general'),
        href: `/${teamSlug}/settings/account/general`,
      },
      {
        title: t('settings.menu.team.billing'),
        href: `/${teamSlug}/settings/account/billing`,
      },
    ],
  },
];

Next move the billing folder from apps/web/app/[locale]/(saas)/[team-slug]/settings/team to apps/web/app/[locale]/(saas)/[team-slug]/settings/account. After that change the href value to /${teamSlug}/settings/account/billing in the code above.

After doing so, you can remove the team folder in (apps/web/app/[locale]/(saas)/[team-slug]/settings).

3. Change redirect for default settings page

In the apps/web/app/[locale]/(saas)/[team-slug]/settings/page.tsx file you need to change the redirect for the default settings page to the account settings page:

redirect(`/${teamSlug}/settings/account/general`);