This is an extremely important section of the documentation: it will teach you the most important functions you need to know to use the Next.js Supabase kit effectively.
We will cover both client-side and server-side functions.
Client-Side Functions
Supabase Hooks
The Next.js Supabase kit uses the client Supabase SDK extensively throughout the kit. You can find the full documentation of the Supabase SDK here.
To interact with the client-side Supabase SDK, you can use the hook useSupabase
.
import useSupabase from '~/core/hooks/use-supabase';
function Component() {
// This is the Supabase client
const supabase = useSupabase();
}
Using the useSupabase
hook, you can access the Supabase client anywhere in your application, and it will be initialized with the correct Supabase URL and Supabase key that you have set in your environment variables.
Server Side Supabase Clients
There are other variations for use on the server-side, but of course these are not hooks since you will be using them outside of React components.
We will take a look at server-side Supabase functions in the next sections.
Makerkit Hooks
1. "useCurrentOrganization": getting the current user organization
This hook will allow you to get the current user organization. It is populated with the data fetched server-side in the dashboard/[organization]
layout, and is injected using the Context API.
For example, let's see how we can use this hook to get the current user organization name:
import { useCurrentOrganization } from '~/lib/organizations/hooks/use-current-organization';
export function useCurrentOrganizationName() {
const organization = useCurrentOrganization();
return organization?.name;
}
There are a variety of other hooks that you can use to get the current user organization data. You can find them in the ~/lib/organizations/hooks
folder.
2. "useCurrentUserRole": getting the current user role within the current organization
In case you need to access the current user role within the current organization, you can use the useCurrentUserRole
hook.
For example, let's see how we can use this hook to get the current user role within the current organization:
import { useCurrentUserRole } from '~/lib/organizations/hooks/use-current-user-role';
function MyComponent() {
const role = useCurrentUserRole();
return (
<div>
<p>Current user role: {role}</p>
</div>
);
}
3. "useUserSession": getting the current user session information
In case you need to access the current user session data, you can use the useUserSession
hook.
This hook will return the current user session data, which includes the following information:
auth
: the data that comes from Supabase Authdata
: the data that comes from the user's Supabase document
export interface UserSession {
auth: AuthUser | undefined;
data: UserData | undefined;
}
For example, let's see how we can use this hook to get the current user ID:
import { useUserSession } from '~/core/hooks/use-user-session';
function MyComponent() {
const userSession = useUserSession();
const userId = userSession?.auth?.uid;
return (
<div>
<p>Current user ID: {userId}</p>
</div>
);
}
4. "useIsSubscriptionActive": getting the current organization subscription status and checking if it's active
A subscription is considered active if it's either active
or trialing
. The useIsSubscriptionActive
hook will return true
if the current organization is on any paid subscription, regardless of plan.
This can be useful if you want to display a message to the user if they are on a paid subscription, or if you want to restrict access to certain pages.
You can customize this hook to fit your needs.
import type { Stripe } from 'stripe';
import { useCurrentOrganization } from '~/lib/organizations/hooks/use-current-organization';
const ACTIVE_STATUSES: Stripe.Subscription.Status[] = ['active', 'trialing'];
/**
* @name useIsSubscriptionActive
* @description Returns whether the organization is on any paid
* subscription, regardless of plan.
*/
function useIsSubscriptionActive() {
const organization = useCurrentOrganization();
const status = organization?.subscription?.status;
if (!status) {
return false;
}
return ACTIVE_STATUSES.includes(status);
}
export default useIsSubscriptionActive;
Server-Side Functions
1. Supabase Server clients
Supabase provides different server clients depending on where they are used. This is because the cookie handling is usually different.
getSupabaseServerComponentClient
: getting the server-side Supabase client for use in Server ComponentsgetSupabaseRouteHandlerClient
: getting the server-side Supabase client for use in API Route HandlersgetSupabaseServerActionClient
: getting the server-side Supabase client for use in Server Actions
This function will return a server-side Supabase client, which you can use to interact with Supabase server-side.
import getSupabaseRouteHandlerClient from '~/core/supabase/route-handler-client';
export function GET() {
const supabase = getSupabaseRouteHandlerClient();
// Do something with the supabase client
}
if you want to use a Service Role key and use admin permissions, you can pass the admin
option to the getSupabaseRouteHandlerClient
function:
import getSupabaseRouteHandlerClient from '~/core/supabase/route-handler-client';
export function GET() {
const supabase = getSupabaseRouteHandlerClient({
admin: true
});
// Do something with the supabase client
}
If you want to use the client in a Server Component:
import getSupabaseServerComponentClient from '~/core/supabase/server-component-client';
function PageComponent() {
const client = getSupabaseServerComponentClient();
}
If you want to use the Supabase client in a Server Action:
'use server';
import getSupabaseServerActionClient from '~/core/supabase/server-action-client';
export async function serverAction() {
const client = getSupabaseServerActionClient();
}
2. "requireSession": Getting (and requiring) the current user session
This function will return the current user session data, and will also require the user to be logged in.
- If the user is not logged in: they will be redirected to the sign-in page.
- If the user is signed in, but requires MFA: they will be redirected to the MFA verification page.
It returns a Supabase Auth Session
instance:
import getSupabaseRouteHandlerClient from '~/core/supabase/route-handler-client';
export async function GET() {
const supabase = getSupabaseRouteHandlerClient();
const session = await requireSession(supabase);
//
}
Use it across layouts, route handlers, etc. every time you want to validate the user is signed in.
3. "getCurrentOrganization": getting the current user organization
This function returns the current user organization. It accepts two optional fields:
userId
: the user ID to get the organization for. If not provided, it will use the current user ID.organizationId
: the organization ID to get. If not provided, it will use the current organization ID. If neither is found, it will fetch the first organization for the user.
And returns the organization data:
export type UserOrganizationData = {
role: MembershipRole;
organization: Organization & {
subscription?: {
customerId: Maybe<string>;
data: OrganizationSubscription;
};
};
};
Usage:
import getCurrentOrganization from '~/lib/server/organizations/get-current-organization';
export async function GET() {
const response = await getCurrentOrganization();
//
}
Using a user ID:
import getCurrentOrganization from '~/lib/server/organizations/get-current-organization';
export async function GET() {
const response = await getCurrentOrganization({
userId: '123'
});
}
Using an organization ID:
import getCurrentOrganization from '~/lib/server/organizations/get-current-organization';
export async function GET() {
const response = await getCurrentOrganization({
userId: '123',
organizationId: '456'
});
}