Vite + Supabase + Polar

Step-by-step guide to creating a SaaS app with Vite for the frontend, Supabase for database/auth, and Polar for payments.

Overview

In this tutorial, you’ll learn how to create a SaaS application using Vite for the frontend, Supabase for database/auth, and Polar for payment processing. Follow these steps to get your app up and running quickly.

Video Tutorial

---

Building a Vite SaaS App with Supabase and Polar Using Tempo

This comprehensive guide walks you through creating a full-stack SaaS application using Vite as the frontend framework, Supabase for authentication and database functionality, and Polar for payment processing—all orchestrated through Tempo’s app generation platform.

Prerequisites

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

• A Supabase account (free tier works fine for development)

• A Polar sandbox account for test payments

• Basic understanding of web development concepts

1. Generate an 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 Vite as your framework.

   • Vite offers extremely fast development with instant hot module replacement

   • It’s optimized for modern JavaScript/TypeScript applications

   • Provides a leaner, more performant alternative to Create React App

3. Under Auth & Database, choose Supabase.

   • Supabase combines PostgreSQL database functionality with authentication

   • Includes row-level security and real-time data subscriptions

   • Provides storage capabilities and serverless functions

4. Under Payments, choose Polar.

   • Polar offers subscription management and payment processing

   • The sandbox environment lets you test without real transactions

   • Includes webhook support for event-driven functionality

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

   • This initiates the project scaffolding process

   • You’ll now need to configure each service integration

Note: Before proceeding, ensure you have accounts for each service or be prepared to create them in the following steps.

---

2. Connect Supabase

Supabase serves as both your authentication provider and database, 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 an Organization if you’re new to Supabase:

   • Click on “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., “SAS Polar”)

   • 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 account

   • This permission is necessary for Tempo to set up tables and deploy functions

2. After authorization, select your newly created project from the dropdown menu and click Connect.

   • Tempo will verify the connection

   • Once verified, you’ll see a success message

Note: This connection allows Tempo to create the necessary database tables, set up authentication rules, and deploy edge functions to handle various aspects of your application.

---

3. Configure Polar (Test Environment)

Polar provides subscription management and payment processing. The sandbox environment allows you to test the complete payment flow without processing real transactions.

Create a Polar Sandbox Account

1. Go to sandbox.polar.sh to access the test environment.

   • The sandbox is completely separate from the production environment

   • All transactions here are simulated

2. Create an Account if you don’t have one:

   • Sign up with GitHub, Google, or email

   • The sandbox is free to use for development and testing

3. After logging in, Create a New Organization:

   • Click on “Create organization”

   • Enter a name for your organization (e.g., “vPolar”)

   • Choose “Sandbox” as the account type

   • Click “Create organization”

4. Find your organization identifier:

   • Navigate to Settings → Organization

   • Copy your Organization Identifier (an alphanumeric string)

   • Return to Tempo and paste it in the Polar Organization ID field

Generate a Polar Access Token

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

1. In Polar, navigate to Settings → Developers → Access Tokens:

   • Click New Token

   • Give it a descriptive name (e.g., “test token”)

   • Set No Expiration to avoid token renewal issues

   • Select All scopes to ensure full functionality

   • Click Create

2. Copy the generated token (you won’t be able to view it again):

   • Return to Tempo

   • Paste the token into the Polar Access Token field

Set Up Polar Webhook

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

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

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

   • Click Add Endpoint

   • Paste the webhook URL from Tempo

   • Set the Format to RAW (important for correct data processing)

   • Select All events to receive all notifications

   • Click Generate to create a webhook secret

3. Copy the generated secret key:

   • Return to Tempo

   • Paste it into the Polar Webhook Secret field

   • Click Create in Polar to finalize the webhook setup

Create a Polar Product

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

1. In Polar, navigate to Products:

   • Click New Product

   • Enter a name (e.g., “Test Subscription” or “Premium Plan”)

   • Add a description explaining the features

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

   • Configure any trial periods if desired

   • Click Create to save your product

2. Return to Tempo and click Refresh:

   • Your newly created product should appear in the list

   • This confirms that the Polar integration is working correctly

Tip: Create multiple products with different price points to test tiered subscription options in your application.

---

4. Run and Build Your App

Now that you’ve configured both Supabase and Polar, 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

3. Tempo will now automatically set up your project infrastructure:

   • Database setup:

     • Runs Supabase migrations to create necessary tables

     • Sets up authentication tables and policies

     • Creates schema for users, profiles, and subscriptions

   • Edge Functions deployment:

     • Deploys serverless functions to handle Polar webhooks

     • Sets up subscription management logic

     • Creates user provisioning workflows

   • Application generation:

     • Builds the Vite application with all integrations

     • Configures environment variables and API connections

     • Sets up authentication flows and protected routes

4. 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 for troubleshooting

Verify in Supabase

While Tempo is building your application, you can verify the changes in your Supabase project:

1. Go to your Supabase Dashboard and open your project.

2. Navigate to Table Editor:

   • You should see several new tables created:

     • auth.users for authentication

     • public.profiles for user information

     • public.subscriptions for subscription tracking

     • Other tables specific to your selected template

3. Check Edge Functions under the “Functions” tab:

   • You should see functions deployed moments ago

   • These functions handle webhooks, user provisioning, and payment processing

Note: If you don’t see these changes immediately, wait a few minutes as Tempo might still be applying the migrations.

---

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 View button in Tempo 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. Access subscription options:

   • Navigate to a “Pricing” or “Subscription” page

   • Alternatively, try accessing a premium feature, which should prompt you to subscribe

2. Subscribe to your test product:

   • Select the plan you created in Polar

   • Click “Subscribe” or “Get Started”

   • You’ll be redirected to a checkout page

3. Complete the test payment:

   • Use a test credit card number: 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. Return to your Supabase Dashboard and navigate to Table Editor.

2. Check the Subscriptions table:

   • You should see a new record with your user ID

   • The status should be “active”

   • It should reference the Polar product you subscribed to

   • Start and end dates should be properly set

3. Look for webhook events in a related table (if your template records these):

   • These events track the subscription lifecycle

   • You might see events like “subscription.created”

Troubleshooting: If your subscription isn’t appearing, check the Polar webhook configuration. You can view webhook delivery attempts in Polar’s dashboard under Settings → Developers → Webhooks.

---

Summary

You’ve successfully built a complete SaaS application with:

• Vite for a modern, fast frontend experience

• Supabase for authentication and database functionality

• Polar 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

• Vite Documentation

• Supabase Documentation

• Polar API Reference

Good luck with your SaaS project!

Was this page helpful? Yes | No