Next.js + Supabase + Polar

A guide to creating a SaaS app with Next.js (framework), Supabase (database & auth), and Polar (payments).

Overview

This tutorial walks you through creating a SaaS application using Next.js for the framework, Supabase for database and authentication, and Polar for payment processing. Follow these steps to get your app up and running quickly.

Video Tutorial

---

Building a Next.js SaaS App with Supabase and Polar Using Tempo

This guide walks you through creating a full-stack SaaS application with Next.js, Supabase authentication/database, and Polar payment processing using Tempo’s integration platform.

Prerequisites

• A Tempo account (sign up at tempo.new)

• A Supabase account (free tier works fine)

• A Polar sandbox account for testing payments

1. Generate an App in Tempo

Tempo allows you to generate fully-functional applications with just a few clicks, saving hours of boilerplate setup.

1. Log in to your Tempo dashboard and click Generate an App.

2. Select Next.js as your framework.

   • Next.js is a React framework that enables server-side rendering, static site generation, and API routes

   • Tempo will set up the app router version with TypeScript enabled by default

3. Under Auth & DB, choose Supabase.

   • This integration provides authentication, user management, and database functionality

   • Includes pre-built user flows (login, signup, password reset)

4. Under Payments, select Polar.

   • Polar provides subscription management, billing, and payment processing

   • Sandbox mode lets you test the full payment flow without real transactions

5. Click Setup Integrations to proceed to the next step.

   • At this point, Tempo will prepare the project scaffold but won’t start building until configurations are complete

Note: You can revisit the app configuration at any time from your Tempo dashboard.

2. Connect Supabase

Supabase provides your application with a PostgreSQL database, authentication, storage, and more.

Create a Supabase Project

1. Go to Supabase.com and create an account if you don’t already have one.

2. Create a New Organization (if you’re new):

   • Click on “New Organization” in the dropdown menu

   • Enter a name for your organization (e.g., “My SaaS Projects”)

   • Click “Create organization”

3. Create a New Project:

   • Click “New Project”

   • Select your organization

   • Name your project (e.g., “next-supabase-polar”)

   • Set a secure database password (store this safely)

   • Choose a region closest to your target users for best performance

   • Click “Create new project”

   • Wait for your project to be provisioned (usually takes 1-2 minutes)

Connect Supabase to Tempo

1. In Tempo, click Connect Supabase:

   • You’ll be redirected to Supabase to authorize the connection

   • Authorize Tempo Labs to access your Supabase organization

   • This grants Tempo permission to manage your project’s database, authentication, and functions

2. Select the project you just created and click Connect.

3. Tempo will verify the connection and display a success message when complete.

Troubleshooting: If you encounter any connection issues, ensure you’re logged into the same Supabase account where you created your project. You may need to clear your browser cache if you’re having persistent issues.

---

3. Configure Polar (Sandbox Mode)

Polar provides subscription management and payment processing for your SaaS. Using sandbox mode allows you to test the full payment flow without processing real transactions.

Create a Polar Sandbox Account

1. Visit sandbox.polar.sh to create an account or log in.

   • Note: The sandbox environment is completely separate from Polar’s production environment

   • All subscriptions and payments in sandbox mode are simulated

2. Create a New Organization:

   • Click “New Organization” after logging in

   • Enter a name (e.g., “Next Supabase Polar”)

   • Select “Sandbox” as the account type

   • Click “Create organization”

3. Find your Organization Identifier:

   • Navigate to Settings → General → Organization

   • Copy your Organization Identifier (a unique alphanumeric string)

   • Paste it into Tempo as the Polar Organization ID

Generate Polar Access Token

Access tokens allow your application to communicate securely with Polar’s API.

1. In Polar, go to Settings → General → Developers and click New Token.

2. Configure your token:

   • Select No Expiration to avoid token renewal issues

   • Select All scopes to ensure full functionality

   • Give it a descriptive name (e.g., “Tempo Integration - Next.js App”)

   • Click “Generate token”

3. Copy the token immediately (you won’t be able to see it again) and paste it into Tempo as your Polar Access Token.

Set Up Polar Webhook

Webhooks allow Polar to notify your application about events like new subscriptions, cancellations, and payment failures.

1. In Tempo, copy the Polar Webhook URL that’s displayed on the integration screen.

2. In Polar, navigate to Settings → Developers → Webhooks → Add Endpoint:

   • Paste the webhook URL provided by Tempo

   • Set Format to RAW (Tempo expects raw event data)

   • Select All events to receive all notifications

   • Click Generate to create a webhook secret

   • Click Create to save the webhook configuration

3. Copy the webhook secret key and paste it into Tempo as your Polar Webhook Secret.

   • This secret ensures that webhook requests genuinely come from Polar

Create a Polar Product

Products define what your customers can subscribe to in your application.

1. In Polar, go to Products → New Product.

2. Configure your product:

   • Add a name (e.g., “Premium Plan”)

   • Write a detailed description of the features included

   • Set a price (e.g., $20/month)

   • Configure any trial periods if desired

   • Add feature bullets to highlight key benefits

   • Click Create

3. Return to Tempo and click Refresh to confirm your product is recognized.

   • Tempo should display your newly created product in the list

Tip: Create multiple products with different price points to offer tiered subscription options to your users.

---

4. Final Setup & Building

Now that you’ve configured both Supabase and Polar, you’re ready to finalize your application setup.

1. Click Setup Integrations in Tempo to proceed.

2. Prompt what you want the AI to build

3. Click Next to build your application.

4. Tempo will now perform several automated tasks:

   • Run Supabase migrations to create necessary database tables:

     • Users table for authentication

     • Profiles table for user details

     • Subscriptions table to track payment status

     • Products table to store your Polar products

   • Deploy Edge Functions to handle:

     • Webhook processing for Polar events

     • Subscription management logic

     • User provisioning and role assignment

   • Generate application code with all integrations pre-configured

   • Deploy your application to a temporary URL for testing

Monitor Supabase Setup

While Tempo is building your application, you can monitor the progress in your Supabase dashboard:

• In your Supabase Dashboard, go to Table Editor:

  • You’ll see new tables being created

  • Check the schema of each table to understand the data structure

• Check Edge Functions under the Functions tab:

  • You should see several functions deployed by Tempo

  • These handle various aspects of user management and payments

• Review the Authentication settings:

  • Tempo configures email authentication by default

  • You can add additional providers like Google or GitHub later

Note: The build process typically takes 3-5 minutes to complete. You’ll receive a notification in Tempo when it’s finished.

---

5. Test Your Application

Once the build is complete, it’s time to test your new application to ensure everything is working properly.

1. When Tempo displays the “Build Complete” message, click View to open your Next.js SaaS in a new browser tab.

   • You’ll see the landing page of your application with sign-up and login options

2. Sign Up for a test account:

   • Click the “Sign Up” button

   • Enter your name, email, and create a password

   • Submit the form

   • Check your inbox for a confirmation email from Supabase

   • Click the confirmation link to verify your email address

   • This process uses Supabase’s authentication system

3. Sign In with your newly created credentials:

   • Return to the application

   • Enter your email and password

   • Click “Sign In”

   • You should be redirected to the dashboard

4. Subscribe to a Polar Plan:

   • Navigate to the subscription or pricing page in your app

   • You’ll see the product(s) you created in Polar

   • Select a plan and click “Subscribe”

   • You’ll be redirected to Polar’s checkout page

   • For testing, use Stripe’s test card number: 4242 4242 4242 4242

   • Enter any future expiration date and any 3-digit CVC

   • Use any name and a valid email format

   • Complete the checkout process

   • You should be redirected back to your application with an active subscription

Verify Data in Supabase

After completing these steps, verify that everything was recorded correctly:

• Return to Supabase → Table Editor → Subscriptions:

  • You should see a new record with:

    • Your user ID

    • The product ID you subscribed to

    • Status marked as “active”

    • Start date and renewal date

    • Payment information

• Check the Users table:

  • Your user record should include:

    • Basic profile information

    • Email verification status (should be true)

    • Last sign-in timestamp

Troubleshooting: If your subscription doesn’t activate, check the Polar webhook configuration. You can test webhook delivery in the Polar dashboard and view webhook logs in Supabase functions.

Summary

You’ve successfully set up a Next.js application integrated with Supabase (database/auth) and Polar (payments) in sandbox mode. This foundation provides you with:

• User authentication and management

• Database storage for user data and application state

• Subscription billing and payment processing

• Webhook handling for payment events

• A responsive UI with modern design patterns

Instead of spending weeks building this infrastructure from scratch, you can now focus on adding your unique business logic and customizing the application to suit your specific needs.

Resources for Further Learning

• Next.js Documentation

• Supabase Documentation

• Polar API Reference

• Tailwind CSS Documentation

Good luck with your SaaS project!

Was this page helpful? Yes | No