Fix your vibed code

Lovable: Authentication + Stripe backend template

This template contains backend building blocks for email and Google authentication with Supabase, and subscriptions management with Stripe.

Note that there is no UI. The idea is to provide a tested and ready-to-use backend, on top of which you can build whatever UI.

What's included

  • A Supabase migration to create a basic profiles table.
  • Signup, login, logout, reset password, get profile and update profile functions.
  • A function to sign in with Google.
  • Stripe edge functions to be deployed:
    • Get customer subscriptions.
    • Get subscription prices, based on "lookup keys".
    • Checkout.
    • Subscription management portal.

How it works

  1. Remix the template.
  2. Configure your integration accounts.
  3. Prompt the agent to re-use the backend building blocks.
  4. Build your UI on top.

Instructions

  1. Remix the template.
  2. Connect your Supabase project.
    Warning
    You will see a build error. This is expected. To fix it, go to the next step.
  3. Ask the agent to run the profiles migration.
    Example prompt for the agent
    I manually added the profiles migration in supabase/migrations. It hasn't been executed. To fix the errors, execute it.
    Warning
    1. There might be an error trying to edit a file without permmission. Ignore it.
    2. Double check that a profiles table was created in your Supabase dashboard.
  4. Configure Google authentication.
    Configure
    1. Turn on the Google sign-in in your Supabase dashboard.
    2. Go to: https://console.cloud.google.com/apis/credentials.
    3. Follow the video in: https://docs.lovable.dev/integrations/supabase#social-logins-e-g-google
  5. Add an UI for authentication.
    Example prompt for the agent
    Use the authentication building blocks in integrations/supabase to add a login, a signup page and a profile management page. Add Google authentication.
  6. Configure your Stripe subscriptions with "lookup keys".
    Configure
    1. Go to https://dashboard.stripe.com/
    2. Activate your test sandbox.
    3. Create products with a recurring price as your subscriptions.
    4. Important: When creating a subscription, add a "Lookup key".
    5. Open the developer panel and copy your "Secret key".
    6. When ready, deactivate the sandbox and move to production. Repeat these steps.
  7. Ask the agent to update the Supabase config.toml and deploy the Stripe functions.
    Example prompt for the agent
    I manually added the Stripe functions in supabase/functions. Update the config.toml and deploy them.
    Warning
    1. Double check that your Edge Functions were deployed in your Supabase dashboard.
    2. Add the STRIPE_SECRET_KEY to your Edge Function secrets.
  8. Add an UI for managing subscriptions.
    Example prompt for the agent
    Use the Stripe building blocks in supabase/functions to create a membership page. Let users pick a subscription if they don't have one or manage an existing subscription. Use the subscription keys: <PUT YOUR LOOKUP KEYS IN HERE>.
  9. Continue building your application.

Requests

Do you have a request for a backend template? I'll build it for free!