• 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

Guarding Pages | Next.js Supabase SaaS Kit

Learn how to guard pages in your Next.js Supabase application

As a server-side rendered application, Next.js Supabase will always render the page on the server before sending it to the client.

We assume you are in the context of a specific organization, as it is the primary use case for the Starter Kit.

We can use the function loadAppData to get data required to load the main layout of the app located at app/dashboard/[organization].

NB: you can call loadAppData multiple times because it uses caching.

In the following example, we are loading the user role within the organization that is currently selected.

tsx
import { redirect } from "next/navigation";
import loadAppData from '~/lib/server/loaders/load-app-data';
import MembershipRole from '~/lib/organizations/types/membership-role';
async function OnlyOwnersPage() {
const data = await loadAppData();
const userRole = data.role;
// if the user is not an owner, redirect them to the home page
if (userRole !== MembershipRole.Owner) {
redirect('/');
}
// render the page
}

As you can see above:

  1. We are loading the data required to render the page
  2. We are checking the user role within the organization
  3. If the user is not an owner, we redirect them to the home page (but feel free to change this)

Guarding Application Pages with Organization Subscriptions

In this example, we want to make sure the Organization is subscribed to a plan before allowing the user to access the page.

To do so, we check the subscription property of the Organization object and redirect the user to the dashboard if the subscription is active or trialing.

tsx
import { redirect } from "next/navigation";
import loadAppData from '~/lib/server/loaders/load-app-data';
async function OnlySubscribersPage() {
const data = await loadAppData();
const status = data.organization.subscription?.data?.status;
// if the subscription is not active, redirect the user to the dashboard
if (!isSubscriptionActive(status)) {
redirect('/');
}
// render the page
}
function isSubscriptionActive(status: string | undefined) {
return ['trialing', 'active'].includes(status);
}
On this page
  1. Guarding Application Pages with Organization Subscriptions