Suparepos

The NextJS / Supabase / Stripe / Tailwind boilerplate with all you need to sell access to your GitHub repositories easily.

Features

Secure user management and GitHub authentication with Supabase
Powerful data access & management tooling on top of PostgreSQL with Supabase
Automatic syncing of pricing plans and payments statuses via Stripe webhooks
Automatic Pricing table generation
Integration with Stripe Checkout and the Stripe customer portal
Automatic GitHub repository invitation upon payment
Customer dashboard to check all previous purchases

Step-by-step setup

When deploying this template, the sequence of steps is important. Follow the steps below in order to get up and running.

Common Deployment activities

First of all, create a .env.local file, copied from .env.local.example

Configure Supabase

Create a Supabase account, and a new project if needed. In your project, navigate to the SQL editor and run the content of schema.sql file. If you already loaded the file in the past, you only need to run latest missing migrations from the supabase/migrations folder.

Configure Auth

In your Supabase project, navigate to auth > URL configuration and set your main production URL (e.g. https://your-deployment-url.vercel.app - http://localhost:3000 for local development) as the site url.

Set up GitHub OAuth provider

You must enable GitHub as third-party login provider. Refer to the docs to learn how to configure this for here. Once configured, disable the email login provider from here.

Then, enable the GitHub provider from here, and fill the Client ID and Client Secret values, taken from the OAuth App.

Finally, copy the Callback URL value and set in the Authorization callback URL of the GitHub OAuth App

Set up Supabase environment variables

Navigate to the API settings, go to the Project API keys section and:

copy the anon public value and paste into the NEXT_PUBLIC_SUPABASE_ANON_KEY
copy the service_role value and paste SUPABASE_SERVICE_ROLE_KEY
copy the Project URL and paste to NEXT_PUBLIC_SUPABASE_URL

Configure Stripe

Next, we'll need to configure Stripe to handle payments. If you don't already have a Stripe account, create one now.

Create a webhook (production only)

We need to create a webhook in the Developers section of Stripe.

Click the "Add Endpoint" button on the Endpoints page.
Enter your production deployment URL followed by /api/webhooks for the endpoint URL. (e.g. https://your-deployment-url.vercel.app/api/webhooks)
Click Select events under the Select events to listen to heading.
Click Select all events in the Select events to send section.
Copy Signing secret as we'll need that in the next step.
Fill env variables NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and the STRIPE_SECRET_KEY with the right values taken from here, and then add the webhook secret into STRIPE_WEBHOOK_SECRET env var.

Use the Stripe CLI to test webhooks (development only)

Install the Stripe CLI and link your Stripe account.

Next, start local webhook forwarding:

stripe listen --forward-to=localhost:3000/api/webhooks

Running this Stripe command will print a webhook secret (such as, whsec_***) to the console. Set STRIPE_WEBHOOK_SECRET to this value in your .env.local file.

Finally, fill env variables NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and the STRIPE_SECRET_KEY with the right values taken from here

Create product and pricing information

Your application's webhook listens for product updates on Stripe and automatically propagates them to your Supabase database. So with your webhook listener running, you can now create your product and pricing information in the Stripe Dashboard.

Suparepos supports both one-time payment and subscription-based pricing options.

For example, you can create business models with different pricing tiers, e.g.:

Product 1: My Awesome Repos 1
- Price 1: 100 USD one time for personal use
- Price 2: 300 USD one time for business use
Product 2: My Awesome Repos 2
- Price 1: 99 USD one time
Product 3: My Awesome Repos 3
- Price 1: 9.9 USD monthly
- Price 2: 99 USD yearly

Configure the Stripe customer portal

Set your custom branding in the settings
Configure the Customer Portal settings
Add the products and prices that you want
Set up the required business information and links

Configure the Github repositories to sell

First of all, create a Personal access tokens (classic) from here. You can flag all repo scopes and remeber to set no expiration date for the token. Once created, fill the GITHUB_TOKEN variable in the .env.local file.

Then, open suparepos.config.ts to setup the repository owner, the repositories to sell at every purchase and the access level.

Optionally, you can "override" settings for a specific product, in order to invite the buyer to a different set of repositories with other permissions or enable discounts.

The structure of the config file is this:

export const SupareposConfig: GlobalProductsConfig = {
  // Owner of the GitHub repository (organization or username) (e.g. 'stevereleasy')
  repositoriesOwner: 'stevereleasy',
  // Name of the GitHub repository (e.g. 'suparepos')
  repositories: ['suparepos'],
  // Permission to give the new collaborator on the repository (pull, triage, push, maintain, admin)
  // Only valid (and required) on organization-owned repositories, user-owned repositories are always given push access
  // Docs: https://docs.github.com/en/rest/collaborators/collaborators#add-a-repository-collaborator
  repositoriesPermission: 'pull',
  // optional product override
  products: [
    {
      id: 'prod_XYZ',
      repositoriesOwner: 'stevereleasy',
      repositories: ['suparepos'],
      repositoriesPermission: 'pull',
      discountedAmountCents: 10000,
      discountId: 'LAUNCH'
    }
  ]
};

(Optional) Configure EveryLog for receiving real time notifications

If you want to receive real time notifications on sales and GitHub invitation status, you must configure the 2 environment variables:

EVERYLOG_API_TOKEN=your-api-token
EVERYLOG_PROJECT=your-project-id

You can also change the sent notification message from the file @/utils/everylog.ts

EveryLog has a free plan that can be used to be notified easily without any other expenses

Deploy on Vercel

The easiest way to deploy the boilerplate (for free), is using the Vercel ecosystem.

You only need to create a new project, add Vercel permissions to access your GitHub repository and it will deploy automatically the main branch on every pushed commit.

Refer to this guide to see how to deploy on Vercel.

Develop locally

If you haven't already done so, clone your GitHub repository to your local machine. Then create a .env.local file, copied from .env.local.example

Setting up the env vars locally

Fill all variables, by taken values from the previous sections

Install dependencies and run the Suparepos Next.js boilerplate

In a separate terminal, run the following commands to install dependencies and start the development server:

docker compose up
# or
yarn
yarn dev
# or
bun install
bun dev
# or
npm install
npm run dev

Note that webhook forwarding and the development server must be running concurrently in two separate terminals for the application to work correctly.

Finally, navigate to http://localhost:3000 in your browser to see the application rendered.

A note on reliability

This boilerplate mirrors completed Stripe transactions to the Supabase database. This means that if the Supabase database is unavailable, the Stripe transaction will still succeed, but the Supabase database will not be updated, and the application will pass an error code back to Stripe. By default, Stripe will retry sending its response to the webhook for up to three days, or until the database update succeeds. This means that the Stripe transaction will eventually be reflected in the Supabase database as long as the database comes back online within three days. You may want to implement a process to automatically reconcile the Supabase database with Stripe in case of a prolonged outage.