Supabase voor Beginners: Database en Auth in 30 Minuten

Wat Supabase is en waarom we het kiezen

Supabase biedt vijf diensten in één:

**1. PostgreSQL-database**: Volledig beheerde PostgreSQL — de meest gebruikte relationele database ter wereld. Geen propriëtair schema, geen lock-in.

**2. Authenticatie**: E-mail/wachtwoord, Google, GitHub, Apple SSO — volledig geconfigureerd met één instelling.

**3. Bestandsopslag**: S3-compatibele opslag met toegangscontrolebeleid.

**4. Edge Functions**: Deno-gebaseerde serverloze functies voor bedrijfslogica en API-proxying.

**5. Realtime**: WebSocket-gebaseerde live data-subscriptions.

Waarom we Supabase kiezen boven Firebase: je data staat in standaard PostgreSQL (exporteerbaar, SQL-querybaar, overal te hosten), het is open-source (zelf te hosten als nodig), en EU-west (Frankfurt) regio voor AVG-compliance.

Stap 1: Project aanmaken

Ga naar supabase.com en maak een gratis account aan.

Klik "New project" en vul in: - **Organisatienaam**: je bedrijf of projektnaam - **Projectnaam**: je app-naam - **Wachtwoord**: genereer een sterk wachtwoord (bewaar het — je hebt het nodig voor directe database-verbindingen) - **Regio**: Kies **West EU (Frankfurt)** — cruciaal voor AVG-compliance

Het project wordt aangemaakt in ~2 minuten.

Na aanmaken vind je in het dashboard: - **Project URL**: `https://[project-ref].supabase.co` — dit is je API-basis-URL - **Anon key**: Openbare sleutel voor clientside gebruik (veilig voor gebruik in WeWeb/FlutterFlow) - **Service role key**: Privésleutel met volledige toegang — NOOIT in je frontend gebruiken

Stap 2: Database ontwerpen

Ga naar "Table Editor" in het Supabase-dashboard.

Maak je eerste tabel aan. Voor een eenvoudige takenapp:

**Table: todos** - `id` — bigserial (automatisch ingesteld) - `user_id` — uuid, NOT NULL, foreign key naar auth.users.id - `title` — text, NOT NULL - `is_complete` — boolean, DEFAULT false - `created_at` — timestamptz, DEFAULT now()

Klik "Save". Je tabel is aangemaakt.

Altijd in SQL doen? Gebruik de SQL-editor: ```sql create table todos ( id bigserial primary key, user_id uuid not null references auth.users(id), title text not null, is_complete boolean default false, created_at timestamptz default now() ); ```

Voeg indexen toe op veelgebruikte filterkolommen: ```sql create index on todos (user_id); create index on todos (created_at desc); ```

Stap 3: Row-Level Security instellen

Activeer RLS voor je todos-tabel. In de Table Editor: klik op de tabel → "RLS" tabblad → "Enable RLS".

Maak nu policies aan. In SQL:

```sql -- RLS activeren alter table todos enable row level security;

-- Gebruikers kunnen alleen hun eigen todos lezen create policy "users_own_todos" on todos for select using (user_id = auth.uid());

-- Gebruikers kunnen alleen todos voor zichzelf aanmaken create policy "users_insert_own_todos" on todos for insert with check (user_id = auth.uid());

-- Gebruikers kunnen alleen hun eigen todos bijwerken create policy "users_update_own_todos" on todos for update using (user_id = auth.uid());

-- Gebruikers kunnen alleen hun eigen todos verwijderen create policy "users_delete_own_todos" on todos for delete using (user_id = auth.uid()); ```

Test je RLS: maak twee testgebruikers aan via het Authentication-dashboard en verifieer dat ze elkaars todos niet kunnen zien.

Stap 4: Authenticatie configureren

Ga naar "Authentication" → "Providers" in het dashboard.

**E-mail/wachtwoord**: Standaard ingeschakeld. Configureer: - "Confirm email": Aanbevolen voor productie. Vereist e-mailbevestiging voor nieuwe accounts. - "Min password length": Stel in op minimaal 8 tekens

**Google OAuth**: 1. Maak een Google Cloud-project aan en activeer OAuth 2.0 2. Voeg `https://[project-ref].supabase.co/auth/v1/callback` toe als geautoriseerde redirect-URI 3. Plak client ID en secret in Supabase's Google-provider-instellingen 4. Schakel de Google-provider in

**E-mailsjablonen aanpassen**: Ga naar Authentication → Email Templates. Pas de welkomstmail en wachtwoord-reset-mail aan in het Nederlands voor een professionele uitstraling bij Nederlandse gebruikers.

Voor AVG: schakel "Leak protection" in (scant wachtwoorden via HaveIBeenPwned) en configureer een aangepaste SMTP-provider (zoals Brevo) zodat e-mails van je eigen domein komen.

Stap 5: Verbinden met WeWeb of FlutterFlow

**WeWeb**: 1. Voeg de Supabase-plugin toe in WeWeb 2. Plak je Project URL en Anon Key 3. Je tabellen zijn nu beschikbaar als databronnen in WeWeb-elementen 4. Gebruik "Collections" om Supabase-query's te definiëren die gebonden kunnen worden aan UI-componenten

**FlutterFlow**: 1. Ga naar Settings → Supabase in FlutterFlow 2. Plak je Project URL en Anon Key 3. FlutterFlow importeert automatisch je tabelschema 4. Gebruik de Supabase Query-actie in je FlutterFlow-widgets om data op te halen

Tip: test altijd je verbinding met een eenvoudige SELECT-query voordat je complex databinding opzet. Voeg een testgebruiker toe, log in via Supabase Auth, en verifieer dat de RLS-policies werken zoals verwacht.