• 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
  • Global Configuration
    • Environment Variables
    • Feature Flags
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • The Makerkit SDK
    • User SDK
    • Organization SDK
    • Organization Subscription SDK
    • Data Loader SDK
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading Records from Postgres
    • Creating a Record
    • Seeding Local Data
    • Introduction
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Supabase is not starting
    • Calling API Routes from the client
    • Adding Pages
    • Updating the Sidebar menu
    • Setup oAuth
    • Fetching the selected Organization
    • Resetting the local DB
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Supabase is not stopping
    • Dark Theme
    • Theming
    • API Routes vs Server Actions
    • Generating Database Types
    • Updating the Logo
    • Adding a new language in the Next.js Supabase SaaS Kit
    • Tables/Functions not found
    • Updating the Fonts
    • Adding Pages
    • Adding a new translation file
    • Contentlayer gets stuck
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Dynamic server usage error
    • Environment variables
    • Detect current Locale
    • 403 error with API/Actions
    • Setting up Emails
This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation

Fetching the selected Organization

Learn how to fetch the selected organization from the backend and frontend.

There are several ways to fetch the current selected organization, depending on the use-case.

Getting the selected Organization ID

Getting the selected organization ID is done using different ways depending on the context.

  1. If you are in a Server Component under the [organization] route, the organizationUid is passed as a prop to the component. You can match the organizationUid with the uuid property of the organization.
  2. If you're not, use the cookie utility parseOrganziationCookie to get the organizationUid from the cookie. This is scoped by user, so you will need to pass the userId as well.

Using "parseOrganizationIdCookie" to get the Organization ID

You can use the parseOrganizationIdCookie function in:

  • API Routes
  • Server Actions
  • Server Components
tsx
import getSupabaseServerActionClient from '~/core/supabase/action-client';
import { parseOrganizationIdCookie } from '~/lib/server/cookies/organization.cookie';
import requireSession from '~/lib/user/require-session';
async function getOrganizationId() {
const client = getSupabaseServerActionClient();
const session = await requireSession(client);
return parseOrganizationIdCookie(session.user.id);
}

This can be nullish, so remember to check for that.

Fetching the selected Organization from the backend

To do so, use the function getCurrentOrganization, which also takes care of redirecting the user to the login page if they are not signed in, and checking the correct MFA access level if the user opted in.

You can use this function in:

  • API Routes
  • Server Actions
  • Server Components

This function requires the current user ID and the (optionally) organization UID.

  1. Get the current user ID from the session: we use the requireSession helper to do so.
  2. Get the organization: we use the getCurrentOrganization helper to do so using the user ID and the organization UID.
tsx
const client = getSupabaseRouteHandlerClient();
const session = await requireSession(client);
const userId = session.user.id;
const organizationResponse = await getCurrentOrganization({
organizationUid,
userId,
});

Fetching the selected Organization from the frontend

Within the [organization] context, the layout loader passes the current organization is passed from the backend to the frontend using the Context API. Therefore, we can require it using the useCurrentOrganization hook.

Getting the Organization with "useCurrentOrganization"

To retrieve the signed in user from the frontend, you can use the useUserSession hook:

tsx
import useCurrentOrganization from '~/lib/organizations/hooks/use-current-organization';
const organization = useCurrentOrganization();

This is a React hook and can only be used inside a React component.

Getting if the Organization subscription status is set to "active" on the frontend

You can use the useIsSubscriptionActive hook to get the subscription status of the current organization. You may want to use this function to gate access to certain parts of the app.

tsx
import useCurrentOrganization from '~/lib/organizations/hooks/use-is-subscription-active';
const isActive = useIsSubscriptionActive();

This is a React hook and can only be used inside a React component.

On this page
  1. Getting the selected Organization ID
    1. Using "parseOrganizationIdCookie" to get the Organization ID
  2. Fetching the selected Organization from the backend
    1. Fetching the selected Organization from the frontend
      1. Getting the Organization with "useCurrentOrganization"
      2. Getting if the Organization subscription status is set to "active" on the frontend