WeWeb + Supabase: Building a Full-Stack App in 2025 (Step-by-Step)

WeWeb and Supabase are the most powerful no-code frontend + backend combination available today. Together, they give you pixel-perfect UIs, a production-grade PostgreSQL database, built-in auth, and real-time data — all without writing a single line of backend code. This is the complete tutorial.

Step 1: Set Up Your Supabase Project

Go to supabase.com and create a new project. Choose a region close to your users (EU West for European apps, US East for American apps).

Create your first table in the Supabase Table Editor. For a task management app:
CREATE TABLE tasks (
  id bigserial PRIMARY KEY,
  title text NOT NULL,
  status text DEFAULT 'todo',
  user_id uuid REFERENCES auth.users(id),
  created_at timestamptz DEFAULT now()
);

Enable Row-Level Security:
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can only see their own tasks" ON tasks
  FOR ALL USING (auth.uid() = user_id);

Step 2: Connect Supabase to WeWeb

In WeWeb, go to Plugins → Data Sources → Supabase. Enter your Supabase URL and anon key (both in your Supabase project settings → API).

WeWeb will automatically detect your tables and generate typed data sources. You'll see a "tasks" collection in your WeWeb data panel — ready to bind to UI components.

Step 3: Build the Authentication Flow

In WeWeb, create a login page with an email and password input, connected to WeWeb's Supabase Auth plugin. Use the "Sign in with email/password" action on the login button.

Protect your app pages with WeWeb's page access conditions: "Redirect to /login if user is not authenticated." This client-side check + Supabase RLS gives you defense in depth.

Step 4: Bind Data to UI Components

Create a list component in WeWeb and bind it to your tasks collection. Set the collection filter to automatically pass the current user's JWT — WeWeb's Supabase plugin handles this automatically.

For each list item, bind the task title to a text element, and the status to a badge with conditional color styling: green for "done", blue for "in-progress", gray for "todo".

Step 5: Create, Update, and Delete Operations

WeWeb's Supabase plugin exposes insert, update, and delete actions. Wire them to:
- A "New task" button that opens a modal form, calls insert on submit
- An inline status dropdown that calls update on change
- A delete button that calls delete after a confirmation dialog

All operations respect RLS — users can only modify their own rows.

Step 6: Real-Time Updates

Enable Supabase Realtime in your project settings. In WeWeb, add a Realtime subscription to your tasks collection. Now when any task changes (from any device or tab), your WeWeb UI updates automatically.

This is powerful for collaborative tools — you get live collaboration with zero custom WebSocket code.

Step 7: Deploy to Production

In WeWeb, click "Publish" → enter your custom domain. WeWeb deploys your app to a global CDN with HTTPS. Update your domain's DNS records to point to WeWeb's CDN edge.

Your Supabase database is already production-hosted. You now have a complete, scalable full-stack app — with a custom domain, auth, real-time data, and zero server management.