​
Overview

In this tutorial, you’ll learn how to create a new SaaS application using Vite, Supabase for database & auth, and Stripe for payments. Follow these steps to get your app up and running in minutes.

​
Video Tutorial

​
Building a SaaS App with Supabase and Stripe Using Tempo

This comprehensive guide walks you through creating a complete SaaS application using Tempo’s integration platform, with Supabase handling database and authentication functionality, and Stripe managing payment processing.

​
Prerequisites

  • A Tempo account (sign up at tempo.build if needed)
  • A Supabase account (free tier works for development)
  • A Stripe account (we’ll use Test Mode for development)
  • Basic understanding of web development concepts

​
1. Generate an App in Tempo

Tempo streamlines the creation of fully-functional SaaS applications by automating the integration of various services.
  1. Log in to your Tempo dashboard and click Generate an App.
  2. From the available framework options, select your preferred frontend framework:
    • Next.js, Vite, React, or other options may be available
    • Each framework offers different advantages for SaaS development
    • The rest of this guide works with any of the framework options
  3. Under Database & Auth, select Supabase.
    • Supabase provides PostgreSQL database functionality with built-in authentication
    • Includes row-level security policies for data protection
    • Offers real-time subscriptions and edge functions
  4. Under Payments, select Stripe.
    • Stripe handles payment processing, subscription management, and invoicing
    • The integration sets up webhooks for event handling
    • Test mode allows you to simulate transactions without real money
  5. Click Setup Integrations to proceed to the next step.
    • This initiates the project configuration process
    • You’ll need to provide API keys for each service in the following steps
Note: The specific framework options may vary based on Tempo’s current offerings. The integration process remains similar regardless of which frontend framework you choose.

​
2. Connect Supabase

Supabase serves as both your database and authentication provider, offering a PostgreSQL database with built-in auth functionality.

​
Create a Supabase Project

  1. Go to Supabase.com and create an account if you haven’t already:
    • You can sign up with GitHub, GitLab, or email
    • The free tier includes generous limits for development purposes
  2. Create a new organization (if you’re new to Supabase):
    • Click “New organization” in the dashboard
    • 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., “Test SAS”)
    • Create a secure database password (store this safely)
    • Choose a region closest to your target users
    • Select the free plan for development
    • Click “Create new project”
    • Wait for provisioning (usually takes 1-2 minutes)

​
Connect Supabase to Tempo

  1. Return to Tempo and click Connect Supabase:
    • This opens an authorization window
    • Click “Authorize” to allow Tempo to access your Supabase organization
    • This permission is necessary for Tempo to set up tables and deploy functions
  2. After authorization, select your newly created project from the dropdown and click Connect.
    • Tempo will verify the connection
    • You’ll see a success message when the connection is established
Important: The integration requires Tempo to have access to your Supabase project to create database tables, authentication settings, and storage buckets. All access is used solely for setting up your application.

​
3. Configure Stripe

Stripe provides payment processing for your application. Using Test Mode lets you simulate the entire payment flow without real transactions.

​
Access Stripe Dashboard

  1. Go to Stripe.com and create an account or log in to your existing account.
  2. Ensure Test Mode is enabled:
    • Look for the toggle in the top-right corner of your Stripe Dashboard
    • It should display “Test Mode” with a purple background
    • This ensures all transactions are simulated without real money

​
Obtain API Keys

  1. In your Stripe Dashboard, navigate to Developers → API keys:
    • You’ll see your Publishable Key (starts with pk_test_)
    • You’ll also see your Secret Key (starts with sk_test_)
    • Copy each key and paste them into the corresponding fields in Tempo
    • The publishable key is safe for client-side code
    • The secret key must be kept confidential and used only in server-side code

​
Set Up 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 development, select all events for simplicity
      • 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
    • 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 Products and Prices

  1. To set up subscription products for your SaaS:
    • In Stripe, navigate to Products → Add product
    • Create at least one product with:
      • A descriptive name (e.g., “Premium Plan”)
      • A description of features
      • A recurring price (e.g., $9.99/month)
    • Click Save product to create it
  2. Return to Tempo and click Refresh Products to verify Stripe products are recognized:
    • Tempo should display any products you’ve created
    • If they don’t appear immediately, wait a moment and try refreshing again
Note: Creating products in Stripe is optional at this stage. You can also create them later directly from your application’s admin interface once it’s set up.

​
4. Generate Your SaaS Application

Now that you’ve configured both Supabase and Stripe, you’re ready to generate your application.
  1. Review your configurations in Tempo and click Setup Integrations.
  2. Prompt what you want the AI to build and hit Next, Tempo will now automatically set up your project
  3. Monitor the build process as Tempo automatically:
    • Runs 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 Stripe products
      • Any other tables specific to your chosen template
    • Deploys Edge Functions to handle:
      • Webhook processing for Stripe events
      • Subscription management logic
      • User provisioning and role assignment
    • Generates application code with all integrations pre-configured:
      • Authentication flows (sign up, sign in, password reset)
      • Subscription management UI
      • Admin dashboard (if included in your template)
      • Customer-facing features based on your template
  4. The build process typically takes 3-5 minutes to complete:
    • You can follow the progress in the console log
    • Tempo will notify you when the build is complete
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 deployed, it’s essential to test the complete user journey to ensure everything works correctly.

​
Access Your Application

  1. When the build process completes, click the Play button (Preview) to open your application in a new browser tab.
    • This launches your application at a temporary URL provided by Tempo

​
Test User Authentication

  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
    • Check your email inbox for a confirmation message from Supabase
    • Click the link in the email to verify your account
  2. Sign In with your new credentials:
    • Return to the application
    • Click the “Sign In” or “Login” button
    • Enter your email and password
    • Click to sign in
    • You should be redirected to the dashboard or main application screen

​
Test Payment Processing

  1. Find the subscription or pricing section:
    • This might be accessible from the dashboard
    • Look for a “Pricing,” “Plans,” or “Subscribe” button
    • Review the available plans (these should match what you created in Stripe)
  2. Subscribe to a plan:
    • Select a plan that suits your testing needs
    • Click “Subscribe” or “Get Started”
    • You’ll be redirected to a Stripe checkout page
  3. Complete the test 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
    • Enter any name and billing address
    • Click “Pay” or “Subscribe” to process the payment
  4. Verify successful subscription:
    • You should be redirected back to your application
    • You should now have access to premium features
    • The UI should update to reflect your subscription status

​
Verify Data in Supabase

After completing the payment, check your Supabase database to confirm everything was recorded correctly:
  1. Go to your Supabase Dashboard and navigate to Table Editor.
  2. Check the following tables:
    • Subscriptions:
      • You should see a new record with your user ID
      • The status should be “active”
      • It should reference the Stripe product you subscribed to
      • Start and end dates should be properly set
    • Users:
      • Your user record should include basic profile information
      • Email verification status should be true
    • Webhook Events (if your template records these):
      • You might see recent events related to your subscription
Troubleshooting: If your subscription isn’t appearing, check the Stripe webhook configuration. You can view webhook delivery attempts in the Stripe dashboard under Developers → Webhooks → Events.

​
6. What’s Next? Customization and Development

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

​
Explore Your Application

  1. Review the generated code:
    • In Tempo, look for options to view or edit your code
    • Familiarize yourself with the project structure
    • Understand how authentication, database, and payment integrations are implemented
  2. Examine the database structure:
    • In Supabase’s Table Editor, review all tables and their relationships
    • Understand the data model and how it supports your application features
  3. Test the full user journey:
    • Create multiple test accounts
    • Subscribe to different plans
    • Test upgrading and downgrading subscriptions
    • Test cancellations and renewals

​
Customize Your Application

  1. Brand identity:
    • Update logos, colors, and typography
    • Modify landing page content and marketing messages
    • Customize email templates for user communications
  2. Product features:
    • Add or modify features based on your business requirements
    • Implement tier-specific functionality for different subscription levels
    • Create admin dashboards for monitoring and management
  3. User experience:
    • Improve navigation and information architecture
    • Optimize the onboarding flow for new users
    • Add help documentation or contextual guidance

​
Prepare for Production

When you’re ready to launch your application:
  1. Move to production environment:
    • Switch Stripe from test mode to live mode
    • Update API keys with production credentials
    • Configure a new webhook endpoint for live Stripe events
  2. Set up a custom domain:
    • Purchase and configure a domain name
    • Set up DNS records to point to your application
    • Configure SSL certificates for secure connections
  3. Implement monitoring and analytics:
    • Add error tracking with a service like Sentry
    • Set up usage analytics to understand user behavior
    • Monitor performance and optimize as needed
  4. Create a marketing strategy:
    • Develop content to attract users to your SaaS
    • Set up social media accounts and campaigns
    • Consider implementing referral programs

​
Advanced Development

  1. Extend the application:
    • Integrate additional third-party services as needed
    • Implement more complex business logic
    • Add advanced features like file uploads, real-time collaboration, etc.
  2. Optimize for scale:
    • Implement caching strategies for better performance
    • Set up database indexes for frequently accessed data
    • Consider serverless functions for computation-heavy tasks
  3. Mobile optimization:
    • Ensure responsive design works well on all devices
    • Consider developing native mobile apps if needed
    • Implement progressive web app features

​
Summary

You’ve successfully built a complete SaaS application with:
  • A modern frontend framework
  • Supabase for authentication and database functionality
  • Stripe for subscription billing and payment processing
This integrated stack provides everything you need for a modern SaaS application:
  • User authentication and account management
  • Secure database operations with row-level security
  • Subscription billing and management
  • Webhook processing for payment events
  • A responsive UI with modern design patterns
By using Tempo to orchestrate these services, you’ve saved countless hours of integration work. Instead of spending weeks connecting these services manually, you can now focus on building the unique features that make your SaaS valuable to users.

​
Additional Resources

Good luck with your SaaS project!
Was this page helpful? Yes | No