Whop SaaS Template

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

Getting Started:

1. 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"
2. Run locally:
   • Pull your repository.
   • Install node modules: pnpm i.
   • Run the development server: pnpm run dev.
   • Open http://localhost:3000 with your browser to see the result.

Examples: This template offers examples on how to utilize Next.js patterns with @whop-sdk/core to gate certain parts of your website.

Server-side rendered (SSR) examples in /pages directory:

1. 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.
2. 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.
3. pages/ssr/product-gated.tsx: Checks 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 directs the user to the Whop.com checkout page to buy a plan that unlocks the page.

Statically rendered (SSG) example in /pages directory:

1. pages/ssg/product-gated.tsx: Uses middleware to prevent users without access to a certain Product from visiting this page. If a user without access tries to request this page, the middleware will redirect them to the Whop.com checkout page to buy a plan that unlocks the page.

Examples in /app directory:

1. app/app/ssr/page.tsx: Shows how to obtain a user-scoped instance of the WhopSDK UserService. It shows a logout button if the user is logged in and a login button if not.
2. app/app/ssr/product-gated/layout.tsx: Locks a layout and its children for users who don’t own a specific product. If no product is owned, it renders a button to purchase a product unlocking the layout on Whop.com.
3. 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.
4. app/app/ssg/product-gated/page.tsx: This page is protected by middleware, conceptually similar to pages/ssg/product-gated.tsx.

API route:

• 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 authorized user owns a certain product.

Learn More:

• 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 template’s GitHub repository – your feedback and contributions are welcome!