• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Account API
    • Team Account API
    • Authentication API
    • User Workspace API
    • Account Workspace API
    • OTP API

Account Workspace API

The account workspace API allows you to retrieve all the data related to the current account.

How to use the Account Workspace API

The account workspace API allows you to retrieve all the data related to the current account.

1

Accessing the Team Account Workspace Data in Server Components

2

Accessing the Account Workspace Data in Client Components

When within the layout /home/[account] - you have access to data fetched from the account workspace API.

The data in this layout has most of the information you need around the currently selected account and the user.

Accessing the Team Account Workspace Data in Server Components

To access the data, you can use the loadTeamWorkspace loader function. This function is cached per-request, so you can call it multiple times without worrying about performance.

While multiple calls to this function are deduped within a single request, bear in mind that this request will be called when navigating to the page. If you only require a small subset of data, it would be best to make more granular requests.

tsx
import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
export default async function SomeAccountPage() {
const data = await loadTeamWorkspace();
// use data
}

The data returned from the loadTeamWorkspace function is an object with the following properties:

  • account: The account object
  • user: The user object coming from Supabase Auth
  • accounts: An array of all accounts the user is a member of

Here is an example of the data structure:

tsx
import type { User } from '@supabase/supabase-js';
{
account: {
id: string;
name: string;
picture_url: string;
slug: string;
role: string;
role_hierarchy_level: number;
primary_owner_user_id: string;
subscription_status: string;
permissions: string[];
};
user: User;
accounts: Array<{
id: string | null;
name: string | null;
picture_url: string | null;
role: string | null;
slug: string | null;
}>;
}

The account object contains the following properties:

  1. id: The account ID
  2. name: The account name
  3. picture_url: The account picture URL
  4. slug: The account slug
  5. role: The user's role in the account
  6. role_hierarchy_level: The user's role hierarchy level
  7. primary_owner_user_id: The primary owner user ID
  8. subscription_status: The subscription status of the account. This can be 'active' | 'trialing' | 'past_due' | 'canceled' | 'unpaid' | 'incomplete' | 'incomplete_expired' | 'paused'.
  9. permissions: An array of permissions the user has in the account

Accessing the Account Workspace Data in Client Components

The data fetched from the account workspace API is available in the context. You can access this data using the useAccountWorkspace hook.

tsx
'use client';
import { useTeamAccountWorkspace } from '@kit/team-accounts/hooks/use-team-account-workspace';
export default function SomeComponent() {
const { account, user, accounts } = useTeamAccountWorkspace();
// use account, user, and accounts
}

The useTeamAccountWorkspace hook returns the same data structure as the loadTeamWorkspace function.

NB: the hooks is not to be used is Server Components, only in Client Components. Additionally, this is only available in the pages under /home/[account] layout.

On this page
  1. Accessing the Team Account Workspace Data in Server Components
    1. Accessing the Account Workspace Data in Client Components