Build a SaaS with WeWeb + Supabase: Auth, Database, and Stripe

In WeWeb editor, click the plug icon in the left sidebar to open Plugins. Under 'Data sources', find 'Supabase' and click Add. Choose your connection method: 'Guided' uses OAuth to auto-connect to your Supabase account and lists all your projects for selection — the easiest option. 'Custom' requires you to manually paste your Supabase project URL and anon key from Supabase Dashboard → Project Settings → API → Project URL and anon public key. After connecting, configure your environments: set 'Production' to your live Supabase project and optionally 'Editor' to the same project or a separate staging project. WeWeb will use the Editor config when building in the editor and the Production config when your app is published. Click Save to complete the data source connection.

Open your Supabase Dashboard (outside WeWeb) → Table Editor. Create the core SaaS tables. Start with a `profiles` table that extends Supabase's built-in `auth.users`. Create the table with columns: `id` (uuid, primary key, references auth.users(id)), `full_name` (text), `avatar_url` (text), `plan` (text, default 'free'), `stripe_customer_id` (text), `created_at` (timestamptz, default now()). Next create a `projects` table: `id` (uuid, primary key, default gen_random_uuid()), `user_id` (uuid, references auth.users(id), not null), `name` (text, not null), `description` (text), `status` (text, default 'active'), `created_at` (timestamptz, default now()). Enable Row-Level Security on both tables immediately after creation — every table in a production SaaS should have RLS enabled.

1-- Injection point: Supabase Dashboard → SQL Editor
2-- Run this SQL to create the profiles and projects tables
3
4-- 1. Profiles table (extends auth.users)
5CREATE TABLE public.profiles (
6  id uuid REFERENCES auth.users(id) ON DELETE CASCADE PRIMARY KEY,
7  full_name text,
8  avatar_url text,
9  plan text DEFAULT 'free' NOT NULL,
10  stripe_customer_id text,
11  created_at timestamptz DEFAULT now() NOT NULL
12);
13
14-- Enable RLS immediately
15ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
16
17-- 2. Projects table (multi-tenant data)
18CREATE TABLE public.projects (
19  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
20  user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
21  name text NOT NULL,
22  description text,
23  status text DEFAULT 'active' NOT NULL,
24  created_at timestamptz DEFAULT now() NOT NULL
25);
26
27ALTER TABLE public.projects ENABLE ROW LEVEL SECURITY;
28
29-- 3. Auto-create profile on user signup (trigger)
30CREATE OR REPLACE FUNCTION public.handle_new_user()
31RETURNS trigger AS $$
32BEGIN
33  INSERT INTO public.profiles (id, full_name, avatar_url)
34  VALUES (
35    NEW.id,
36    NEW.raw_user_meta_data->>'full_name',
37    NEW.raw_user_meta_data->>'avatar_url'
38  );
39  RETURN NEW;
40END;
41$$ LANGUAGE plpgsql SECURITY DEFINER;
42
43CREATE TRIGGER on_auth_user_created
44  AFTER INSERT ON auth.users
45  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

RLS policies control which rows each authenticated user can access. Without them, every user can read every other user's data. In Supabase Dashboard → Authentication → Policies (or Database → Policies), add the following policies. For the `profiles` table: SELECT policy — users can only read their own profile; UPDATE policy — users can only update their own profile. For the `projects` table: SELECT policy — users can only see their own projects; INSERT policy — users can only create projects with their own user_id; UPDATE and DELETE policies scoped to the user's own rows. All policies use `(SELECT auth.uid()) = user_id` for performance — the subquery form is faster than the inline form `auth.uid() = user_id` in PostgreSQL.

1-- Injection point: Supabase Dashboard → SQL Editor
2-- RLS policies for profiles table
3
4CREATE POLICY "Users can view own profile"
5  ON public.profiles FOR SELECT
6  USING ((SELECT auth.uid()) = id);
7
8CREATE POLICY "Users can update own profile"
9  ON public.profiles FOR UPDATE
10  USING ((SELECT auth.uid()) = id)
11  WITH CHECK ((SELECT auth.uid()) = id);
12
13-- RLS policies for projects table
14
15CREATE POLICY "Users can view own projects"
16  ON public.projects FOR SELECT
17  USING ((SELECT auth.uid()) = user_id);
18
19CREATE POLICY "Users can create own projects"
20  ON public.projects FOR INSERT
21  WITH CHECK ((SELECT auth.uid()) = user_id);
22
23CREATE POLICY "Users can update own projects"
24  ON public.projects FOR UPDATE
25  USING ((SELECT auth.uid()) = user_id)
26  WITH CHECK ((SELECT auth.uid()) = user_id);
27
28CREATE POLICY "Users can delete own projects"
29  ON public.projects FOR DELETE
30  USING ((SELECT auth.uid()) = user_id);

Back in WeWeb, open Plugins → Authentication → find 'Supabase Auth' and click Add. WeWeb will auto-detect your Supabase connection and link them. In the Supabase Auth plugin config, set the 'Unauthenticated redirect page' to your login page (this is the page WeWeb redirects to when an unauthorized user hits a protected page). Click 'Generate' — this creates a `roles` table and a `users_roles` join table in your Supabase project, which enables WeWeb's role-based page access control. Set the 'Sign-in page' to your login page. Under 'Social login', you can optionally enable Google OAuth — this requires configuring an OAuth provider in Supabase Dashboard → Authentication → Providers first. Configure SMTP for email confirmations in Supabase Dashboard → Authentication → SMTP Settings (use Resend, Postmark, or SendGrid).

Create a new page named 'Login' in WeWeb with a public access setting (Page settings → Access: Public). Add a Form Container element to the page. Inside it, add an Email input and a Password input and a Submit button. Select the Submit button → Workflows tab → On click workflow. Add a 'Supabase Auth - Sign in' action. Bind the email parameter to `formContainer.formData.email` and password to `formContainer.formData.password`. Add a Branching action after it — in the success branch add 'Navigate to page' pointing to your dashboard. In the error branch, display an error message by setting a page variable. For signup: duplicate this page, change the workflow action to 'Supabase Auth - Sign up', and pass `data` with full_name from the form. The trigger will auto-create the Supabase profile via the database trigger set up in Step 2.

Open the Data panel (database icon in left sidebar) and click '+ New'. Select 'Supabase' as the source. You will see your Supabase tables listed. Select the 'projects' table. Configure the collection: choose 'Select' as the operation, leave the filter empty (RLS handles user-scoping automatically — each user only sees their own rows). Name the collection 'user-projects'. Set the fetch mode to 'On page load' so it populates when the dashboard opens. Click Save. Back on your dashboard page, add a Container element. In its Settings tab, bind 'Repeat items' to `collections['user-projects'].data`. Inside the container add a Text element bound to `item.name` and another bound to `item.status`. Add a delete button with a workflow: 'Supabase DB - Delete' action on the projects table, filter by `id = item.id`, then 'Fetch collection' to refresh the list.

Install the Stripe plugin in WeWeb: Plugins → Extensions → Stripe → Add. Enter your Stripe Test Secret Key and Test Publishable Key. However, Stripe Checkout Sessions (for subscriptions) must be created server-side — never client-side. Create a Supabase Edge Function outside WeWeb: in your terminal, run `supabase functions new create-checkout-session`. Write the function to create a Stripe Checkout Session using the Stripe Node.js SDK, passing the user's email, a success URL, and a cancel URL. Deploy with `supabase functions deploy create-checkout-session`. Back in WeWeb, add an upgrade button with workflow: 'Supabase - Invoke Edge Function' action pointing to `create-checkout-session`, pass the user's email and desired plan. In the success branch, navigate to the Stripe checkout URL returned by the function. For webhook handling: create another Edge Function `stripe-webhook` that receives Stripe payment events and updates the `profiles.plan` column accordingly.

1// Injection point: Supabase Edge Function (outside WeWeb)
2// File: supabase/functions/create-checkout-session/index.ts
3// Deploy: supabase functions deploy create-checkout-session
4
5import { serve } from 'https://deno.land/std@0.177.0/http/server.ts';
6import Stripe from 'https://esm.sh/stripe@14.21.0?target=deno';
7import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
8
9const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY') ?? '', {
10  apiVersion: '2024-04-10',
11  httpClient: Stripe.createFetchHttpClient()
12});
13
14serve(async (req: Request) => {
15  const corsHeaders = {
16    'Access-Control-Allow-Origin': '*',
17    'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type'
18  };
19
20  if (req.method === 'OPTIONS') {
21    return new Response('ok', { headers: corsHeaders });
22  }
23
24  // Verify user is authenticated
25  const authHeader = req.headers.get('Authorization');
26  if (!authHeader) {
27    return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 });
28  }
29
30  const supabase = createClient(
31    Deno.env.get('SUPABASE_URL') ?? '',
32    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
33    { global: { headers: { Authorization: authHeader } } }
34  );
35
36  const { data: { user } } = await supabase.auth.getUser();
37  if (!user) {
38    return new Response(JSON.stringify({ error: 'User not found' }), { status: 401 });
39  }
40
41  const { priceId, successUrl, cancelUrl } = await req.json();
42
43  const session = await stripe.checkout.sessions.create({
44    customer_email: user.email,
45    line_items: [{ price: priceId, quantity: 1 }],
46    mode: 'subscription',
47    success_url: successUrl + '?session_id={CHECKOUT_SESSION_ID}',
48    cancel_url: cancelUrl,
49    metadata: { user_id: user.id }
50  });
51
52  return new Response(JSON.stringify({ url: session.url }), {
53    headers: { ...corsHeaders, 'Content-Type': 'application/json' }
54  });
55});

Supabase Realtime lets WeWeb react to database changes instantly without polling. First, enable Realtime on your tables: in Supabase Dashboard → Database → Replication, toggle on INSERT/UPDATE/DELETE for the tables you want. In WeWeb, go to your Supabase data source plugin config → find the tables list → enable Realtime for 'projects'. Now add a workflow in WeWeb with trigger 'On realtime - database change'. Configure it to listen to the 'projects' table for INSERT events. Add a 'Fetch collection' action to refresh the user-projects collection when a new project is inserted. For more targeted updates, use 'Change variable value' to prepend the new item to your existing collection array without refetching. This gives your SaaS app live updates — when any change happens in the database, users see it immediately.