Use organizations in your application

In the supastarter application, the active organization is determined from the organizationSlug path parameter of the URL.

Whenever you are on a path that starts with /app/my-organization, the organization my-organization is active.

There is another common pattern to store the active organization in the session of the user, but we decided to use the path parameter as it enables a few benefits:

1. It's easier to understand and reason about the active organization from the URL
2. You can easily share a link to a specific organization or some organization page
3. You can easily navigate to a different organization by changing the path parameter
4. You can use different organizations in the same browser session in different tabs

To use the active organization in your application, you can use the useActiveOrganization composable.

It provides the following properties:

• activeOrganization: The active organization
• setActiveOrganization: A function to set the active organization by the organization id
• loaded: A boolean indicating if the active organization has been loaded yet
• isOrganizationAdmin: A boolean indicating if the user is an admin or the owner of the active organization
• refetchActiveOrganization: A function to refetch the active organization

Usually when you are inside a page that is part of the /app/[organizationSlug] path, the active organization is already loaded and should be set.

<script setup lang="ts">
const { activeOrganization, setActiveOrganization, loaded, isOrganizationAdmin, refetchActiveOrganization } = useActiveOrganization();
</script>

<template>
  <div v-if="!loaded">Loading...</div>
  <div v-else-if="!activeOrganization">No active organization found</div>
  <div v-else-if="!isOrganizationAdmin">You are not an admin of the active organization</div>
  <div v-else>
    Active organization: {{ activeOrganization.name }}
  </div>
</template>

Get organization without slug

In some cases you want to get organization data without a slug being present in the URL.

In general the user can access the organization data for the organizations they are a member of.

To get the organization data for a specific organization, you can use the authClient on client side:

const { useAuthClient } = useNuxtApp();
const authClient = useAuthClient();

const { data, error } = await authClient.organization.getFullOrganization({
  query: {
    organizationId: '1234lasjdfwlj34l', // replace with the organization id
  },
});

To learn more about how to use organizations, please refer to the better-auth documentation.