User Workspace API

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

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

To access the data, you can use the loadUserWorkspace 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.

import { loadUserWorkspace } from '~/home/_lib/server/load-user-workspace';
 
export default async function SomeUserPage() {
  const data = await loadUserWorkspace();
 
  // use data
}

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

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

Here is an example of the data structure:

import type { User } from '@supabase/supabase-js';
 
{
  account: {
    id: string | null;
    name: string | null;
    picture_url: string | null;
    public_data: Json | null;
    subscription_status: string | null;
  };
 
  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:

• id: The account ID
• name: The account name
• picture_url: The account picture URL
• public_data: The account public data
• subscription_status: The subscription status of the account. This can be 'active' | 'trialing' | 'past_due' | 'canceled' | 'unpaid' | 'incomplete' | 'incomplete_expired' | 'paused'.

Accessing the User Workspace Data in Client Components

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

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

The useUserWorkspace hook returns the same data structure as the loadUserWorkspace 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/(user) layout.