Makerkit provides some utilities to retrieve the current organization's subscription: you can use these utilities to allow or gate access to specific features, pages, or to perform certain actions.
- On the client side, we can use the hook
useIsSubscriptionActive
- On the server-side, we can use the functions
isOrganizationSubscriptionActive
andgetOrganizationSubscription
Client Side Gating
Let's assume we want to allow only users who belong to paying organizations to perform a certain action:
function isAdmin(
role: MembershipRole
) {
return role === MembershipRole.Admin;
}
Now, combine this function with other conditions:
export function useCreateNewThing(
userRole: MembershipRole,
) {
const isPayingUser = useIsSubscriptionActive();
return isPayingUser && isAdmin(userRole);
}
As you may know, I recommend adding all the permissions logic to the file
permissions.ts
(or similar files), and never inline it: this makes it easy to
store logic in one single place rather than scattered across the
application.
Inlining logic in our code will make it hard to track logic down and debugging it.
Once defined out logic functions in permissions.ts
, we can then use these
in our components to hide the sections that users do
not have access to:
function Feature() {
const userRole = useCurrentUserRole();
const canCreateThing = useCreateNewThing(userRole);
if (!canCreateThing) {
return <div>Sorry, you do not have access to this feature. Subscribe?</div>
}
return <FeatureContainer />;
}
Server Side Gating
When gating access on the server side, we can use two utilities that allow us to get the organization's subscription by its ID.
Using permissions utilities
When you need to check the user's subscription in your API functions, you can
use the functions isOrganizationSubscriptionActive
and
getOrganizationSubscription
exported from
src/lib/server/organizations/memberships.ts
.
For example, let's assume we have an API handler that performs an action:
export default async function action({ request }) {
const organization = await parseOrganizationCookie(request);
const isSubscriptionActive =
await isOrganizationSubscriptionActive(organization);
if (!isSubscriptionActive) {
return throwForbiddenError();
}
// all good! perform action
}