Vite + Clerk + Convex + Stripe

Step-by-step guide to configuring a SaaS app with Vite for the frontend, Clerk + Convex for auth/database, and Stripe for payments.

Overview

In this tutorial, we’ll create a SaaS application using Vite for the front end, Clerk + Convex for authentication and database logic, and Stripe for handling payments. Follow the steps below to get everything up and running.

Video Tutorial

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

This comprehensive guide walks you through creating a full-stack SaaS application using Vite for the frontend, Clerk for authentication, Convex for database functionality, and Stripe 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 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 complex applications by automating service integrations and boilerplate setup.

1. Log in to your Tempo dashboard and click Generate an App.
2. Select Vite as your frontend framework.
   • Vite offers an extremely fast development experience with instant server start
   • It’s optimized for modern JavaScript frameworks with hot module replacement
   • Includes built-in TypeScript support and other development features
3. Under Auth & Database, choose Clerk + Convex.
   • Clerk provides authentication, user management, and session handling
   • Convex offers a real-time database with serverless functions
   • This combination provides a complete backend solution with minimal configuration
4. Under Payments, select Stripe.
   • Stripe provides robust payment processing capabilities
   • Includes subscription management, invoicing, and payment handling
   • Test mode allows you to simulate the full payment flow without real transactions
5. Click Setup Integrations to begin configuring each service.
   • This initiates the app generation process
   • You’ll need to provide API keys for each service in the following steps

Note: You’ll need accounts with each service before proceeding. If you haven’t created these accounts yet, you’ll do so in the following steps.

---

2. Configure Clerk

Clerk provides authentication and user management with a developer-friendly interface and secure defaults.

Create a Clerk Application

1. Go to Clerk and create an account if you haven’t already.
   • You can sign up using GitHub, Google, or email
   • The free tier includes generous limits for development and testing
2. In the Clerk Dashboard, click Add Application:
   • Enter a name for your application (e.g., “Vite Application”)
   • Select your preferred authentication methods:
     • Email/password for traditional login
     • Social providers like Google, GitHub, or Discord for easier onboarding
     • Consider your target audience when selecting providers
   • Choose your development environment (typically “Development” for now)
   • Click “Create Application”

Obtain Your API Key

1. After creating your application, locate your API keys:
   • In your newly created application, find the “Set up your Clerk Keys” section
   • Look for the line with your Publishable Key (starts with pk_test_ for development)
   • Copy only the key value after the = sign, not including the variable name or quotes
   • Paste this key into Tempo when prompted

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 provides a real-time database with serverless functions that automatically sync data to all connected clients.

Create a Convex Project

1. Go to Convex Dashboard and log in or create an account.
   • You can authenticate with GitHub, Google, or email
   • New accounts include a free tier sufficient for development
2. Click New Project to create a new project:
   • Name your project (e.g., “Vite App”)
   • Select your preferred region (ideally close to your target users)
   • Click “Create Project”

Obtain API Keys and URLs

1. Once your project is created, go to Settings → URL & Deploy Key:
   • Copy the Deployment URL (looks like )
   • Paste this URL into Tempo in the appropriate 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 when prompted

Configure Clerk Authentication in Convex

1. To enable Clerk authentication with Convex:

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

   • Copy the Issuer URL (looks like )

   • Go back to Convex → Settings → Environment Variables

   • Add a new environment variable:

     CLERK_SIGNING_KEY=<Issuer URL from Clerk>
     

   • The variable name must be exactly “CLERK_SIGNING_KEY” (case-sensitive)

   • Click Save to store the environment variable

Note: Environment variables in Convex are not immediately active. They will take effect when your application is deployed, which Tempo will handle automatically.

---

4. Configure Stripe (Test Mode)

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 and create an account if you don’t have one.
2. Make sure 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. Navigate to Developers → API keys in your Stripe Dashboard:

   • Copy your Secret Key (starts with sk_test_)

   • In Convex → Settings → Environment Variables, add:

     STRIPE_SECRET_KEY=<Your Stripe Secret Key>
     

   • (Optional) If needed, also add your publishable key:

     STRIPE_PUBLISHABLE_KEY=<Your Stripe Publishable Key>
     

   • Click Save to store the variables

Set Up Stripe Webhook

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

1. Configure a webhook to receive Stripe events:
   • In Convex, under Settings → URL & Deploy Key, find your HTTP Actions URL
   • This URL ends with .site (e.g., )
   • Copy this URL
2. In Stripe, go to Developers → Webhooks → Add endpoint:
   • Paste your Convex HTTP Actions URL
   • Add /payments/webhook to the end of the URL (e.g., )
   • 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. Obtain and configure the webhook secret:

   • After creating the webhook, click on it to view details

   • Under “Signing secret”, click Reveal

   • Copy the signing secret

   • In Convex, add another environment variable:

     STRIPE_WEBHOOK_SECRET=<Your Webhook Signing Secret>
     

   • Click Save to store the variable

Create Test Products (Optional but Recommended)

1. Set up subscription products for testing:
   • In Stripe, navigate to Products → Add product
   • Create at least one product with:
     • A descriptive name (e.g., “Basic Plan”)
     • A description of features
     • A recurring price (e.g., $9.99/month)
   • These products will appear in your application when you refresh in Tempo

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

---

5. Final Setup in Tempo

Now that you’ve configured all the necessary services, you can finalize your application setup in Tempo.

Review and Confirm Environment Variables

1. Double-check that you’ve added all required environment variables correctly:
   • In Convex, verify these variables are present and correctly named:
     • CLERK_SIGNING_KEY
     • STRIPE_SECRET_KEY
     • STRIPE_WEBHOOK_SECRET
     • (Optional) STRIPE_PUBLISHABLE_KEY
   • Variable names are case-sensitive and must match exactly
2. In Tempo, click Setup Integrations to proceed.
3. Prompt what you want the AI to build and hit Next, Tempo will now automatically set up your project

Connect Convex (If Prompted)

1. If Tempo prompts you to connect your Convex project:
   • Click Open Convex Login
   • A new tab will open for authentication
   • Confirm the connection
   • Close that tab and return to Tempo
   • The integration will continue automatically
2. Monitor the build process:
   • Tempo will set up your application with the necessary code and configurations
   • This includes generating the frontend, setting up authentication flows, and configuring payment handling
   • You can follow the progress in the console log

Note: The build process typically takes 3-5 minutes to complete. Be patient while Tempo integrates all the services.

---

6. Test Your App

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

Access Your Application

1. When the build is complete, click the View or Play button to open your app in a new browser tab.
   • This launches your application at a temporary URL provided by Tempo

Test Authentication

1. Sign up for an account using Clerk’s authentication flow:
   • Click “Sign Up” or “Create Account”
   • You can use email or any social provider you enabled
   • Complete the sign-up process
   • Verify your email if required
2. After signing up, you should be logged in automatically:
   • Verify that your profile information appears in the navigation bar
   • Test navigation between different sections of the application

Test Payment Processing

1. Try accessing a paid feature in your application:
   • Look for a section labeled “Premium” or “Pro”
   • Alternatively, try to access a feature marked as requiring a subscription
   • You should be prompted to subscribe
2. Go through the payment process:
   • Select a subscription plan
   • You’ll be redirected to Stripe’s checkout page
   • 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 address information
   • Complete the checkout process
3. Verify subscription activation:
   • After payment, you should be redirected back to your application
   • You should now have access to the paid features
   • The UI should update to reflect your subscription status

Configure Frontend URL (If Needed)

1. In some cases, you may need to add your frontend URL to Convex:

   • Copy the URL of your Tempo-generated application from the browser

   • In Convex → Settings → Environment Variables, add:

     FRONTEND_URL=<Your app URL without trailing slash>
     

   • Click Save to store the variable

Tip: This step is particularly important if your application uses redirect URLs for authentication or payment flows.

---

7. Troubleshooting Tips

If you encounter issues during setup or testing, try these solutions:

Syncing Convex Code

If you see Convex errors in the console:

1. Open the developer console in your browser (Right-click → Inspect → Console)
2. In Tempo, click the Convex button
3. Choose Sync from the dropdown
4. Click Restart to reload your application
5. Check the console again to see if the errors are resolved

Environment Variable Issues

If authentication or payments aren’t working:

1. Check that all environment variable names are spelled exactly as specified:
   • CLERK_SIGNING_KEY
   • STRIPE_SECRET_KEY
   • STRIPE_WEBHOOK_SECRET
   • FRONTEND_URL (if needed)
2. Verify that the values are correct and not truncated
3. In Convex, click Save after any changes to ensure they take effect

Webhook Problems

If webhooks aren’t working properly:

1. In Stripe, go to Developers → Webhooks
2. Check the “Events” tab for your webhook endpoint
3. Verify that events are being sent and check for any errors
4. Ensure your webhook URL includes the correct path (/payments/webhook)

Authentication Flow Issues

If you’re having problems with Clerk authentication:

1. Verify that your JWT template in Clerk is named exactly “Convex”
2. Check that the CLERK_SIGNING_KEY in Convex matches the Issuer URL from Clerk
3. Try clearing your browser cookies and cache, then sign in again

Summary

You’ve successfully built a complete SaaS application with:

• Vite for a modern, fast frontend experience
• Clerk for secure user authentication and management
• Convex for real-time database and serverless functions
• Stripe 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

• Vite Documentation
• Clerk Documentation
• Convex Documentation
• Stripe API Reference

Good luck with your SaaS project!

Was this page helpful? Yes | No