Setting Up Protected Pages

Protected pages are essential for granting users access to your product once they become paying customers. For a user to access these protected pages, they must be signed in and have an active plan.

How to Determine if a User Has an Active Plan

StartupBolt uses a credit-based system to manage access to your product. When a user buys a plan, they receive a certain number of credits. By default, the number of credits is 100, but you can customize this value to suit your needs.

If a user's credits are higher than 0, they will have access to the product. This approach offers several advantages:

• For AI apps or services, usage can be tied to credits, offering flexibility and control.
• For regular SaaS apps, you can use the system as a boolean-like mechanism:
  • 100 credits = access granted.
  • 0 credits = access denied.
• This makes the system suitable for both normal SaaS apps and AI/credit-based apps.

All these logics are handled by our payment systems, which currently support Stripe and LemonSqueezy for payments.

Please refer to the Credits Guide for more details on how to configure and manage credits.

Please refer to the Stripe Guide or LemonSqueezy Guide for more details on how to configure and manage payments.

How Protected Pages Work

We use a layout specifically for protected routes. This layout verifies user authentication and credit balance before rendering its children. All routes nested under /private are protected.

Changing the Base Protected Route

To change the base protected route, simply rename the "private" folder to your desired name (e.g., "dashboard", "protected", "product"), and update the URLS.protected value in settings.js to match the new base route name.

Detailed Instructions

For more detailed instructions, refer to the comments inside the layout located at app/private/layout.js.

NotACustomer Component

Currently, if a user has insufficient credits, we render the NotACustomer component. As an alternative, you can consider redirecting the user to a dedicated page using redirect('/url').

Here is the component displayed when a user has insufficient credits, prompting them to purchase a plan. Feel free to enhance this component as needed:

const NotACustomer = () => (
  <>
    <Navbar navigation={null} cta={null} />
    <main>
      <PricingTable
        heading="You do not have an active plan."
        description="Please purchase a plan to continue using our services."
      />
    </main>
  </>
);

Now you know how to set up protected pages for your product, ensuring access is granted only to paying customers.