> ## Documentation Index
> Fetch the complete documentation index at: https://tempolabsinc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<iframe width="100%" height="100%" src="https://bzcxxroyylqcbnrgyxhx.supabase.co/storage/v1/object/public/TempoDocs/SaaS%20Templates/next-sp.mp4" title="Next.js + Supabase + Polar Setup" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{ aspectRatio: '16/9', display: 'block', borderRadius: '0.5rem' }} />

***

# 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](https://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](https://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](https://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](https://nextjs.org/docs)

* [Supabase Documentation](https://supabase.com/docs)

* [Polar API Reference](https://docs.polar.sh)

* [Tailwind CSS Documentation](https://tailwindcss.com/docs)

Good luck with your SaaS project!

<br />

Was this page helpful?
[Yes](#) | [No](#)