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.