Removing Organizations from your Project

While having teams and organizations is an essential SaaS feature where users can share assets and resources with teammates, not every SaaS needs it.

In fact, many have asked me how to remove organizations and only keep individual users. So, in this recipe, I will write down my thoughts on removing organizations from your project.

There are two main ways to remove organizations:

1. The more challenging way is refactoring the project and removing the code related to organizations
2. The second and more straightforward way is to keep organizations, while hiding all the related UI. In this way, each user belongs to their organization. This way is more future-proof: if your SaaS will need refactoring for adding teammates to your user's accounts, the code is still there, and you will only need to show it.

Since the first way is highly challenging and will cause problems pulling changes from the latest version, I suggest you try the second solution: we will create organizations behind the scenes for each user, but these won't be shown in the front end.

Here is the list of changes we need to add:

1. Skip onboarding: automatically create an Organization for the user
2. Remove Organizations dropdown from the headers
3. Remove the "Organization" tab within the settings pages

Skipping the Onboarding flow

You can change the onboarding flow and add your own steps if you need your users to set up their accounts. The organization, though, will be created without user input.

Let's update the Onboarding page at pages/onboarding/index.tsx.

The code below represents the first step, and we can simply get rid of it:

<If condition={currentStep === 0}>
  <OrganizationInfoStep onSubmit={onFirstStepSubmitted} />
</If>

We can simply leave as shown below:

<CompleteOnboardingStep 
  data={{ organization: `Organization` }} 
  onComplete={onComplete}
/>

This will automatically kick off the onboarding API request and create an organization named Organization.

Hiding the Organizations dropdown

To hide the organizations dropdown, we will update the headers of the layout you have chosen to use.

Sidebar Layout

If you have chosen the sidebar layout, open the component AppHeaderNoMenu.tsx and remove the code below:

<If condition={userSession?.auth?.uid}>
  {(uid) => <OrganizationsSelector userId={uid} />}
</If>

Header Layout

Open the component AppHeaderWithMenu and remove the component rendered by the constant OrganizationsDropdown:

<div className={'flex flex-1 items-center space-x-4'}>
  <div className={'hidden lg:flex'}>
    <Logo href={configuration.paths.appHome} />
  </div>
 
  <div>{OrganizationsDropdown}</div>
</div>

Removing the Settings pages

Finally, we want to remove the settings pages. To do so, we need to first remove them from the settings navigation menu:

We open the component SettingsPageContainer.tsx and then remove the organization settings from the links array:

const links = [
  {
    path: '/settings/profile',
    i18n: 'common:profileSettingsTabLabel',
  },
  // remove the object below!
  {
    path: '/settings/organization',
    i18n: 'common:organizationSettingsTabLabel',
  },
  {
    path: '/settings/subscription',
    i18n: 'common:subscriptionSettingsTabLabel',
  },
];

Optionally, remove the pages at settings/organization.

Alternatively, you can automatically redirect them somewhere else using the getServerSideProps function on each page:

export function getServerSideProps(ctx) {
  return ctx.redirect(configuration.paths.appHome);
}

Updating the Firestore Rules

Finally, remove the rules to create new organizations in Firestore rules. You should only allow to read from them:

match /organizations/{organizationId} {
  allow read: if userId() in existingData().members;
}

Final thoughts

That's it! While your application will still create an organization for each user, these do not exist as far as your SaaS users are concerned. In terms of future-proofing, hiding organizations allows you to add them in the longer term if users need a way to share stuff with teammates.