Next.js + Supabase + Stripe

Step-by-step guide to creating a SaaS app with Next.js, Supabase for database/auth, and Stripe for payments.

Overview

In this tutorial, you’ll learn how to create a SaaS application using Next.js for the framework, Supabase for database/auth, and Stripe for payment processing. Follow the steps below and you’ll have your app up and running quickly.

Video Tutorial

---

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

This guide walks you through creating a full-stack SaaS application with Next.js, Supabase for authentication and database functionality, and Stripe for payment processing—all using Tempo’s automation platform.

Prerequisites

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

• A Supabase account (free tier is sufficient)

• A Stripe account (we’ll use Test Mode for development)

• Basic understanding of web development concepts

1. Generate Your App in Tempo

Tempo provides a streamlined way to create production-ready applications with integrated services.

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

2. Select Next.js as your framework.

   • Next.js offers server-side rendering, static site generation, and API routes

   • Tempo uses the latest stable version with TypeScript configured

   • The project includes optimized routing and component structure

3. Under Database & Auth, select Supabase.

   • This provides PostgreSQL database functionality

   • Includes pre-built authentication flows and user management

   • Automatically handles session management and security

4. Choose Stripe under Payments.

   • Stripe handles subscription billing, payment processing, and invoicing

   • Test mode allows you to simulate the full payment flow

   • Includes webhook integration for event handling

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

   • This initiates the project scaffolding process

   • No code is generated yet until all integrations are properly configured

Tip: Take note of any additional integration options that might be relevant for your specific project needs.

---

2. Connect Supabase

Supabase provides your application with database, authentication, and storage capabilities through a developer-friendly interface.

Create a Supabase Project

1. Go to Supabase.com and create an account if you haven’t already.

   • You can sign up with GitHub or Google for convenience

   • The free tier includes generous limits for development purposes

2. Create a New Organization:

   • Click the organization dropdown in the top-left corner

   • Select “New Organization”

   • Enter an organization name (e.g., “My SaaS Projects”)

   • Click “Create organization”

3. Create a New Project within your organization:

   • Click the “New project” button

   • Select your organization

   • Name your project (e.g., “SAS” or something descriptive)

   • Create a strong database password and save it securely

   • Select a region closest to your target users

   • Choose the free plan for now (you can upgrade later)

   • Click “Create new project”

   • Wait for the project to be provisioned (1-2 minutes)

Connect Supabase to Tempo

1. Return to the Tempo interface and click Connect Supabase.

   • This will open a new window for authorization

2. Authorize Tempo to access your Supabase organization:

   • Review the permissions requested

   • Click “Authorize” to continue

   • This grants Tempo the ability to manage your Supabase resources

3. Back in Tempo, select your newly created Supabase Project from the dropdown.

4. Click Connect to establish the integration.

   • Tempo will verify the connection

   • You’ll see a success message when complete

Note: Tempo needs these permissions to create database tables, set up authentication, and deploy edge functions that connect your app to Supabase.

---

3. Configure Stripe (Test Mode)

Stripe provides robust payment processing capabilities. For development, we’ll use Test Mode to simulate transactions without processing real payments.

Access Your Stripe Dashboard

1. Log in to your Stripe Dashboard.

2. Ensure you’re in Test Mode by checking the toggle in the top-right corner:

   • The toggle should display “Test Mode” with a purple background

   • This environment allows you to test all Stripe features without real transactions

   • Test data is completely separate from your live data

Set Up API Keys

1. Navigate to Developers → API Keys in the Stripe dashboard:

   • Under Standard keys, you’ll see your Publishable Key and Secret Key

   • The publishable key starts with pk_test_

   • The secret key starts with sk_test_

2. Copy each key and paste them into the corresponding fields in Tempo:

   • Stripe Publishable Key: Use for client-side code (safe to expose)

   • Stripe Secret Key: Used for server-side operations (keep this private)

Configure Stripe Webhook

Webhooks allow Stripe to notify your application about events like successful payments, subscription changes, or payment failures.

1. In Tempo, locate and copy the Stripe Webhook URL provided:

   • This URL is specifically generated for your application

   • It points to an edge function that will process webhook events

2. In your Stripe dashboard, go to Developers → Webhooks → Add endpoint:

   • Paste the Tempo-provided webhook URL into the “Endpoint URL” field

   • Under “Select events to listen to”:

     • For simplicity during development, select all events

     • For production, you might want to select only relevant events like:

       • customer.subscription.created

       • customer.subscription.updated

       • customer.subscription.deleted

       • invoice.payment_succeeded

       • invoice.payment_failed

       • checkout.session.completed

   • Click Add endpoint to create the webhook

3. After creating the webhook:

   • Click on the newly created endpoint

   • Scroll down to “Signing secret” and click Reveal

   • Copy this secret and paste it into Tempo as your Stripe Webhook Secret

   • This secret ensures that webhook requests genuinely come from Stripe

Create a Test Product and Price

Creating at least one product ensures your application has subscription options to display.

1. In Stripe, navigate to Products → Add product:

   • Enter a Name (e.g., “SaaS Review” or “Premium Plan”)

   • Add a Description explaining the features of this plan

   • Optionally, add an image for your product

   • Under Pricing information:

     • Select “Recurring” for subscription billing

     • Enter the price (e.g., $8)

     • Set the billing period to “Monthly”

     • You can also set up a trial period if desired

   • Click Save product to create it

2. Return to Tempo and click Refresh Products to verify Stripe products are recognized:

   • Tempo should display the product you just created

   • If it doesn’t appear immediately, wait a moment and try refreshing again

Testing tip: Create multiple products with different price points to test tiered subscription functionality in your application.

---

4. Run Your Project

Now that you’ve configured both Supabase and Stripe, you’re ready to generate your application.

1. Review your configurations and click Setup Integrations in Tempo.

2. Prompt what you want the AI to build and hit Next, Tempo will now automatically set up your project:

   • Database setup:

     • Runs Supabase migrations to create necessary tables

     • Sets up authentication tables and policies

     • Creates schema for user profiles and subscriptions

   • Edge Functions deployment:

     • Deploys serverless functions to handle Stripe webhooks

     • Sets up subscription management logic

     • Creates user provisioning workflows

   • Application generation:

     • Builds the Next.js application with all integrations

     • Configures environment variables and API connections

     • Sets up authentication flows and protected routes

3. Monitor the build process in the Tempo logs:

   • You’ll see real-time updates as each step completes

   • The process typically takes 3-5 minutes

   • If any errors occur, the logs will provide details to help troubleshoot

Note: During this process, Tempo is not only generating code but also provisioning the necessary infrastructure and configuring the services to work together seamlessly.

---

5. Test Your Application

Once your application is generated, it’s important to test the full user journey to ensure everything is working properly.

Accessing Your Application

1. When the build process completes, click the View (Play) button on the top right to open your application in a new browser tab.

   • This opens your app running on a Tempo-provided preview URL

   • Your application includes a landing page, authentication flows, and payment integration

User Authentication Flow

1. Sign Up for a new account:

   • Click the “Sign Up” or “Register” button on the landing page

   • Enter your name, email address, and create a password

   • Submit the form to create your account

   • You’ll receive a confirmation email from Supabase

2. Email Verification:

   • Check your inbox for an email titled “Confirm your email”

   • Click the verification link in the email

   • You should be redirected to the application with a success message

   • This verification step is important for security and preventing spam accounts

3. Sign In:

   • Return to the application and click “Sign In” or “Login”

   • Enter your email and password

   • Click the sign-in button

   • Upon successful authentication, you’ll be redirected to the dashboard

Testing the Payment Flow

1. Subscribe to a Plan:

   • Navigate to the pricing or subscription page in your app

   • Review the available plans (including the one you created in Stripe)

   • Select a plan and click “Subscribe” or “Get Started”

   • You’ll be redirected to a Stripe Checkout page

2. Complete the Payment:

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

   • Enter any future expiration date (e.g., 12/29)

   • Use any three-digit CVC code

   • Enter a name and valid email format

   • For the address, you can use any values

   • Click “Subscribe” or “Pay” to complete the process

3. Verify Subscription Activation:

   • After payment, you’ll be redirected back to your application

   • You should now have access to the premium features

   • The UI should update to show your active subscription

Verify Data in Supabase

To confirm that everything is working properly behind the scenes:

1. Return to the Supabase Dashboard and open your project.

2. Navigate to Table Editor and check the following tables:

   • Users table:

     • You should see your newly created user

     • Email verification status should be true

     • The created_at timestamp should match when you signed up

   • Subscriptions table:

     • Look for a record with your user ID

     • Status should be “active” or “trialing” if you set up a trial

     • The subscription should reference the Stripe Product ID you subscribed to

     • Start and end dates should be properly set

Troubleshooting tip: If your subscription doesn’t appear in Supabase, check the Stripe webhook configuration. You can view webhook delivery attempts in the Stripe dashboard under Developers → Webhooks → Endpoint → Events.

---

Now that you have a functioning application, you can begin customizing it to meet your specific needs.

Summary

You’ve successfully built a Next.js application with Supabase for database and authentication, and Stripe for payment processing. The key components of your new SaaS application include:

• User authentication with email verification

• Database storage for user data and application state

• Subscription management through Stripe

• Webhook processing for payment events

• Responsive UI with modern design patterns

By using Tempo to automate the integration process, you’ve saved countless hours of setup and configuration work. Instead of spending weeks on boilerplate code and service connections, you can now focus on building the unique features that make your SaaS valuable to users.

Resources for Further Development

• Next.js Documentation

• Supabase Documentation

• Stripe API Reference

• Tempo Documentation

Good luck with your SaaS project!

Was this page helpful? Yes | No