Whop SaaS Template

This is a Next.js project created using the whop-next-template

Getting Started

First, set the required environment variables:

NEXT_PUBLIC_WHOP_CLIENT_ID="WHOP CLIENT ID"
WHOP_CLIENT_SECRET="WHOP CLIENT SECRET"
WHOP_API_KEY="WHOP API KEY"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="NEXTAUTH SECRET"
NEXT_PUBLIC_RECOMMENDED_PLAN_ID="PLAN ID"
NEXT_PUBLIC_REQUIRED_PRODUCT="PRODUCT ID"

Many of the environment variables can be found here

Run locally

Pull your reposity

Then, install node modules:

pnpm i

Then, run the development server:

pnpm run dev

Open http://localhost:3000 with your browser to see the result.

This template offers examples on how to utilize next.js patterns in conjuction with @whop-sdk/core to easily gate certain parts of your website.

Included exmples:

/pages (Server-side rendered):

The examples in this list show how to use getServerSideProps in the pages directoy

• pages/ssr/index.tsx - Adds the whop User to the page props. It renders a login button for logged-out users and a logout button for logged-in users
• pages/ssr/logged-in.tsx - Only displays a page to logged-in users. If a logged-out user tries to access this page they will be redirected to /ssr where they can log in
• pages/ssr/product-gated.tsx - Check if a user owns a specific Product and only shows the page content if they do. If the user does not own the product a button directing the user to the whop.com checkout page where they can buy a plan that unlocks the page.

/pages (Statically rendered):

• pages/ssg/product-gated.tsx - This example shows how to use middleware to prevent users without access to a certain Product to visit this page. If a user that does not have access tries to request this page the middleware will redirect them to the whop.com checkout page where they can buy a plan that unlocks the page.

/app:

The examples in this list show how to use @whop-sdk/core in the new app directory added in next@13.0.0

• app/app/ssr/page.tsx: This page shows how to obtain a user-scoped instaince of the WhopSDK UserService. If its able to obtain the sdk (the user is logged-in) it shows a logout button, if not it shows a login button
• app/app/ssr/product-gated/layout.tsx: This layout shows how to lock a layout (and its children) for users that don't own a specific product. If no product is owned it renders a button that allows the user to purchase a product unlocking the layout on whop.com
• app/app/ssr/product-gated/page.tsx: This page is product-gated without any extra setup as its parent layout(app/app/ssr/product-gated/layout.tsx) is already product-gated
• app/app/ssg/product-gated/page.tsx: This page is protected by middleware, conceptually similar to pages/ssg/product-gated.tsx

/api:

• pages/api/product-gated.ts: This api route uses the user session to obtain a user-scoped instance of the WhopSDK UserService and then uses that to check if the authorised used owns a certain product.

Learn More

To learn more about Next.js, take a look at the following resources:

• WhopSDK Documentation - learn about Whop API features and how to use the SDK.
• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out this templates' GitHub repository - your feedback and contributions are welcome!