​
Overview

This tutorial walks you through creating a SaaS application using Vite for the frontend, Clerk + Convex for authentication/database logic, and Polar for payment processing. Follow these steps for a seamless setup.

​
Video Tutorial

​
Building a Vite SaaS App with Clerk, Convex, and Polar Using Tempo

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

​
Prerequisites

  • A Tempo account (sign up at tempo.new if needed)
  • A Clerk account for authentication (free tier works for development)
  • A Convex account for database functionality
  • A Polar sandbox account for test payments
  • Basic understanding of web development concepts

​
1. Generate Your App in Tempo

Tempo streamlines the creation of complex applications by automating service integrations and boilerplate setup.

  1. Log in to your Tempo dashboard and click Generate an App.
  2. Select Vite from the frontend framework options.
    • Vite is a modern build tool that provides an extremely fast development experience
    • It’s optimized for React applications with hot module replacement
    • This will be selected by default if it appears first in the options
  3. Under Auth & Database, select Clerk + Convex.
    • Clerk provides user authentication, session management, and user profiles
    • Convex is a backend-as-a-service with real-time database capabilities
    • This combination gives you powerful user management with real-time data synchronization
  4. Under Payments, choose Polar.
    • Polar provides subscription management and payment processing
    • The sandbox mode allows for testing the complete payment flow without real transactions
  5. Click Setup Integrations to begin configuring each service.
    • This starts the app generation process but doesn’t complete it until all keys are provided
    • Tempo will guide you through setting up each integration

Note: Before proceeding, you’ll need to create accounts with each service if you don’t already have them. The following steps will walk you through setting up each one.

​
2. Configure Clerk

Clerk provides authentication, user management, and session handling for your application with minimal setup.

​
Create a Clerk Application

  1. Navigate to Clerk and create an account or sign in with an existing one.
    • You can use GitHub, Google, or email to create your account
    • The free tier includes generous usage limits for development
  2. From your Clerk dashboard, click Add Application.
    • Name your application (e.g., “Vite Polar Project”)
    • Select your preferred authentication methods:
      • Email/password is recommended as a baseline
      • Adding social providers like Google or GitHub enhances user experience
      • Choose providers that align with your target audience
    • Select your development environment (Development or Production)
    • Click “Create Application”

​
Get Your API Keys

  1. After creating your application, you’ll be taken to the setup guide. Look for the React setup option:
    • In the code snippet provided, locate your publishable key (starts with pk_test_ for development)
    • Copy only the key value after the = sign, not the variable name or quotation marks
    • Paste this key into the corresponding field in Tempo

​
Create a JWT Template for Convex

  1. In the Clerk dashboard, navigate to JWT Templates:
    • Click on Configure in the top navbar
    • Select JWT Templates
    • Click New Template
    • Click on the Convex template
    • Leave all default settings as is (the default template works fine with Convex)
    • Click Save to create the template
    • Keep this page open, as you’ll need the Issuer URL in the next section

Important: The JWT template you select NEEDs to be Convex, as this is what the integration expects.

​
3. Configure Convex

Convex is a backend-as-a-service that provides a real-time database with automatic synchronization between clients.

​
Create a Convex Project

  1. Go to the Convex Dashboard and sign in or create an account.
    • You can use GitHub, Google, or email for authentication
    • New accounts include a free tier with sufficient resources for development
  2. Click New Project to create a project:
    • Name your project (e.g., “Vite Polar Project”)
    • Select your deployment region (choose the one closest to your target users)
    • Click “Create Project”

​
Obtain and Configure Keys

  1. Once your project is created, navigate to Settings → URL & Deploy Key:
    • Copy the Deployment URL (it looks like )
    • Paste this URL into Tempo in the corresponding field
    • Click + Generate Development Deploy Key
    • Give your key a name (e.g., “V” or “Tempo Integration”)
    • Copy the generated key
    • Paste it into Tempo in the Convex Deploy Key field

​
Configure Clerk Authentication in Convex

  1. Set the Clerk Issuer in Convex to enable authentication:

    • Return to your Clerk dashboard, find the JWT template you created earlier

    • Copy the Issuer URL (looks like )

    • In Convex → Settings → Environment Variables:

    • Add a new environment variable:

      CLERK_SIGNING_KEY=<Issuer URL from Clerk>

    • Click Save to store the environment variable

Note: The environment variables in Convex are not immediately active. They will be applied the next time your functions are deployed, which Tempo will handle automatically.

​
4. Configure Polar (Sandbox)

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

​
Create a Polar Sandbox Account

  1. Visit sandbox.polar.sh to access the test environment.
    • This is separate from the production Polar environment
    • All data and transactions here are simulated
  2. Create an Account or Log In:
    • You can use GitHub, Google, or email for authentication
    • The sandbox environment is free to use for development
  3. After logging in, Create a New Organization:
    • Click on “Create an organization”
    • Enter a name for your organization (e.g., “vpolarsas”)
    • Select “Sandbox” as the account type
    • Click “Create organization”

​
Configure Polar Keys in Convex

  1. Configure your Polar organization in Convex:

    • In Polar, go to Settings → Organization

    • Copy your Organization Identifier (an alphanumeric string)

    • In Convex → Settings → Environment Variables, add:

      POLAR_ORGANIZATION_ID=<Your Org ID>
  2. Generate and configure a Polar access token:

    • In Polar, navigate to Settings → Developers → Access Tokens

    • Click New Token

    • Give it a name (e.g., “V” or “Convex Integration”)

    • Set it to No Expiration to avoid disruptions

    • Select All scopes to ensure full functionality

    • Click Create

    • Copy the generated token (you won’t be able to see it again!)

    • In Convex, add another environment variable:

      POLAR_ACCESS_TOKEN=<Your token>

    • Click Save

​
Set Up Polar Webhook

Webhooks allow Polar to notify your application about events like new subscriptions or cancellations.

  1. Prepare your webhook endpoint:
    • In Convex → Settings → URL & Deploy Key, find your HTTP Actions URL
    • This URL ends with .site (e.g., )
    • You’ll need to append a specific path to this URL
  2. Configure the webhook in Polar:

    • In Polar, go to Settings → Developers → Webhooks

    • Click Add Endpoint

    • For the URL, enter your HTTP Actions URL plus /payments/webhook (e.g., )

    • Set Format to RAW (important for correct processing)

    • Select All events to receive all notifications

    • Click Generate to create a webhook secret

    • Copy this Webhook Secret

    • In Convex, add another environment variable:

      POLAR_WEBHOOK_SECRET=<Your secret>

    • Click Create in Polar to finalize the webhook setup

    • Click Save in Convex to store all your environment variables

​
Create a Polar Product

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

  1. Set up a test product in Polar:
    • Navigate to Products in the Polar dashboard
    • Click New Product
    • Enter a name (e.g., “Test Product” or “Premium Plan”)
    • Add a description explaining the features included
    • Set up pricing (e.g., $10/month)
    • Configure any trial periods if desired
    • Click Create to save your product
  2. Verify product integration in Tempo:
    • Return to Tempo and click Refresh under the Polar section
    • Your newly created product should appear in the list
    • If it doesn’t appear immediately, wait a moment and try refreshing again

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

​
5. Finalize and Connect in Tempo

Now that all services are configured, you can complete the application setup in Tempo.

  1. Review your configuration and click Setup Integrations in Tempo.
    • This confirms that all keys and integrations are properly set up
  2. Prompt what you want the AI to build and hit Next, Tempo will now automatically set up your project
  3. Authenticate with Convex:
    • Tempo will prompt you to Connect Convex
    • Click Open Convex Login
    • This opens a new tab where you’ll need to authenticate with Convex
    • After successful authentication, close that tab and return to Tempo
    • The integration will continue automatically
  4. Monitor the build process:
    • Tempo will now set up your application with all necessary code and configurations
    • This includes creating database tables in Convex, setting up authentication flows, and configuring payment handling
    • You can follow the progress in the console log

​
Configure Frontend URL in Convex

After your application is built and deployed, you need to add one final configuration:

  1. When your app is ready, click View in Tempo to open it in a new browser tab.
    • This opens your application at a temporary URL provided by Tempo
  2. Copy this URL from your browser’s address bar.
  3. Add it as an environment variable in Convex:

    • Go to your Convex dashboard → Settings → Environment Variables

    • Add a new variable:

      FRONTEND_URL=<Paste your app URL>

    • Make sure there’s no trailing slash at the end of the URL

    • Click Save to update the environment variables

​
Resolving Convex Synchronization Issues

If you encounter Convex errors in Tempo’s console during the build process:

  1. Click the Convex button in Tempo’s interface.
  2. Select Sync from the options.
  3. Then click Restart on the terminal to reinitialize the connection.
  4. This typically resolves minor synchronization issues between Tempo and Convex.

Note: Convex may take a few moments to apply your environment variables. If you encounter authentication issues, wait a minute and try again.

​
6. Test Your SaaS Application

Once your application is deployed, it’s essential to test the complete user journey to ensure everything works correctly.

​
Testing Authentication

  1. Open your app by clicking the “View” (Play) button on the top right in Tempo.
    • This launches your application in a new browser tab
  2. Sign up for an account:
    • Click the “Sign Up” or “Create Account” button
    • You can use your email or a social provider like Google
    • Complete the registration process
    • Clerk will handle email verification if you’ve enabled it
  3. After signing up, you should be logged in automatically:
    • Verify that your name or email appears in the navigation bar
    • Check that you can access user-only sections of the application

​
Testing Payment Processing

  1. Navigate to premium features:
    • Look for a section labeled “Premium” or “Upgrade”
    • Alternatively, try to access a feature marked as paid
    • You should be prompted to subscribe
  2. Initiate the subscription process:
    • Click on the subscription button
    • You should be redirected to Polar’s checkout page
    • Select the plan you created earlier
  3. Complete the test payment:
    • Use Polar’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 address
    • Click “Subscribe” or “Pay” to complete the payment
  4. Verify subscription activation:
    • After successful payment, you should be redirected back to your application
    • You should now have access to the premium features
    • The UI should update to indicate your subscription status

​
Verify Data in Convex

To confirm that your application is correctly storing data:

  1. Go to your Convex dashboard and click on the Data tab.
  2. Check the following tables:
    • Subscriptions:
      • You should see a new record with your user ID
      • The status should be “active”
      • The subscription should reference the Polar product you purchased
      • Start and end dates should be properly set
    • Users:
      • Your user record should include basic profile information
      • It might also have a reference to your subscription status

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

​
Preparing for Production

When you’re ready to launch your application:

  1. Move to production environments:
    • Create production versions of your Clerk, Convex, and Polar accounts
    • Update environment variables with production credentials
    • Ensure proper security measures are in place
  2. Set up a custom domain:
    • Configure DNS settings for your domain
    • Update authentication callback URLs in Clerk
    • Set up HTTPS certificates
  3. Implement monitoring and analytics:
    • Add error tracking with services like Sentry
    • Set up usage analytics to understand user behavior
    • Monitor performance metrics

​
Summary

You have successfully set up a complete SaaS application with:

  • Vite for a modern, fast frontend experience
  • Clerk for secure user authentication and management
  • Convex for real-time database functionality
  • Polar for subscription billing and payment processing

This integrated stack provides everything you need for a modern SaaS:

  • User authentication and account management
  • Real-time data synchronization
  • 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 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

Was this page helpful?