Steg 1: Sätt upp ditt Supabase-projekt

Gå till supabase.com och skapa ett nytt projekt. Välj en region nära dina användare (EU West för europeiska appar — viktigt för GDPR-efterlevnad, US East för amerikanska appar).

Skapa din första tabell i Supabase Table Editor. För en uppgiftshanteringsapp: 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() );

Aktivera 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);

Med EU-regionen valt är din data lagrad i Europa och uppfyller kraven i GDPR och Schrems II — en grundförutsättning för de flesta svenska och europeiska B2B-kunder.

Steg 2: Anslut Supabase till WeWeb

I WeWeb, gå till Plugins → Data Sources → Supabase. Ange din Supabase URL och anon-nyckel (båda finns i dina Supabase-projektinställningar → API).

WeWeb kommer automatiskt att identifiera dina tabeller och generera typade datakällor. Du ser en "tasks"-samling i din WeWebs datapanel — redo att bindas till UI-komponenter.

Detta är ett av de mest imponerande ögonblicken med WeWeb + Supabase: du går från "tom databas" till "fullt typade datakällor tillgängliga i frontendbuildern" på under 5 minuter, utan att skriva en rad kod.

Steg 3: Bygg autentiseringsflödet

I WeWeb skapar du en inloggningssida med ett e-post- och lösenordsinmatningsfält, kopplat till WeWebs Supabase Auth-plugin. Använd åtgärden "Sign in with email/password" på inloggningsknappen.

Skydda dina appsidor med WeWebs sidåtkomstvillkor: "Omdirigera till /login om användaren inte är autentiserad." Denna klientkontroll + Supabase RLS ger dig djupförsvar.

För svenska appar som kräver BankID: du kan lägga till BankID som ett extra autentiseringssteg efter e-post/lösenord-inloggning via ett Xano-mellanlager som integrerar med en BankID-API-leverantör (t.ex. Freja eID eller Signicat). Detta är ett krav för många svenska fintech- och hälsoapplikationer.

Steg 4: Bind data till UI-komponenter

Skapa en listkomponent i WeWeb och bind den till din tasks-samling. Ställ in samlingsfiltret för att automatiskt skicka den nuvarande användarens JWT — WeWebs Supabase-plugin hanterar detta automatiskt.

För varje listobjekt, bind uppgiftens titel till ett textelement och statusen till ett märke med villkorlig färgstil: grönt för "klar", blått för "pågående", grått för "att göra".

WeWebs databindning är visuell och omedelbart uppdaterad — ändra ett värde i Supabase och se det reflekteras i din WeWeb-förhandsvisning i realtid. Det gör felsökning och iterering dramatiskt snabbare jämfört med traditionell webbutveckling.

Steg 5: Skapa-, uppdaterings- och raderingsoperationer

WeWebs Supabase-plugin exponerar infoga-, uppdaterings- och raderingsåtgärder. Koppla dem till: - En "Ny uppgift"-knapp som öppnar ett modalt formulär, anropar infoga vid skickning - En inline statusrullgardinsmeny som anropar uppdatera vid ändring - En raderingsknapp som anropar ta bort efter en bekräftelsedialog

Alla operationer respekterar RLS — användare kan bara ändra sina egna rader. Prova att koppla in felhantering direkt i WeWebs åtgärdsflöde: vid ett Supabase-fel, visa ett notisbanner med ett vänligt felmeddelande på svenska.

Steg 6: Realtidsuppdateringar

Aktivera Supabase Realtime i dina projektinställningar. I WeWeb, lägg till en Realtime-prenumeration på din tasks-samling. Nu när en uppgift ändras (från vilken enhet eller flik som helst) uppdateras din WeWeb-UI automatiskt.

Detta är kraftfullt för samarbetsverktyg — du får live-samarbete utan en enda rad anpassad WebSocket-kod.

Steg 7: Driftsätt till produktion

I WeWeb, klicka på "Publish" → ange din anpassade domän. WeWeb driftsätter din app till ett globalt CDN med HTTPS. Uppdatera din domäns DNS-poster för att peka på WeWebs CDN-edge.

Din Supabase-databas är redan produktionshostad. Du har nu en komplett, skalbar fullstack-app — med en anpassad domän, auth, realtidsdata och noll serverhantering.

För svenska bolag: registrera en .se-domän via en svensk registrar (t.ex. Loopia eller one.com) och konfigurera DNSSEC för extra säkerhet. Det tar 15 minuter och gör ett professionellt intryck på svenska kunder.