Supabase tutorial: eerste tabel, beveiliging en app-integratie

👁 118 keer gelezen

Supabase geeft je een kant-en-klare backend voor je applicatie: database, gebruikersauthenticatie, bestandsopslag en automatische API. Je eerste tabel, waar je app data uit leest, staat er in een kwartier. In deze tutorial lopen we stap voor stap van een leeg project naar data die in je applicatie verschijnen, met één cruciale stap die je niet mag overslaan: het beveiligen van je tabel.

De stappen zijn gebaseerd op de officiële Supabase-handleidingen. Wat het platform precies is en waarom het zo vaak gekozen wordt door mensen die met AI bouwen, hebben we beschreven in onze Supabase-gids.

Voordat je begint: plan je data

Voordat je je eerste tabel aanmaakt, schrijf je op papier welke data je app opslaat en wie die mag zien. Bijvoorbeeld: lessen zijn voor iedereen zichtbaar, een reservering ziet alleen de persoon die hem gemaakt heeft en de docent. Uit zo’n notitie volgen direct de toegangsregels die je straks invoert in Row Level Security. Als je de regels pas plant nadat je de app gebouwd hebt, blijven er meestal tabellen zonder beveiliging over.

Stap 1. Project aanmaken

Na het aanmaken van je account maak je een nieuw project aan in het dashboard van je organisatie. Je geeft een naam op, een wachtwoord voor de database en een regio. Bewaar het wachtwoord meteen in je wachtwoordmanager, want je hebt het nodig bij directe verbindingen met de database. Kies de regio zo dicht mogelijk bij je gebruikers, voor Nederland en België is dat een Europese regio.

Na een paar minuten is je project klaar, en onder de motorkap draait gewoon PostgreSQL, dat je bij een eventuele verhuizing overal mee naartoe kunt nemen.

Stap 2. Eerste tabel

Je kunt een tabel aanmaken in de tabeleditor door te klikken zoals in een spreadsheet, of in de SQL-editor. De officiële handleiding toont de versie met de SQL Editor: je maakt een eenvoudige tabel aan, bijvoorbeeld een lijst met instrumenten met een ID en naam, en voegt een paar voorbeeldrijen toe. Zelfs als je geen SQL kent, kun je de commando’s uit de handleiding gewoon kopiëren en uitvoeren.

Stap 3. Tabel beveiligen met Row Level Security

Dit is de stap waarvan de veiligheid van je data afhangt. Row Level Security zijn regels die bepalen wie welke rijen mag lezen en wijzigen. De officiële handleiding schakelt het in voor de tabel en voegt een regel toe die iedereen alleen de lijst met instrumenten laat lezen. Voor een openbare lijst is dat prima. Voor klantgegevens moet de regel ervoor zorgen dat iedereen alleen zijn eigen rijen ziet.

Een tabel zonder deze regels, beschikbaar via de API, is de meest voorkomende oorzaak van datalekken in snel gebouwde applicaties. We schreven daar uitgebreider over in onze gids. De regel is simpel: geen enkele tabel met gebruikersdata gaat de app in zonder ingeschakelde toegangsregels.

Stap 4. Projectadres en publieke sleutel

Je app heeft twee dingen nodig die je vindt in het Connect-paneel van je project: het projectadres en de publieke sleutel. Je plakt ze in het configuratiebestand van je applicatie. De publieke sleutel mag naar de browser, want de toegang tot data wordt bepaald door de regels uit de vorige stap.

Als je app de data niet ziet, controleer dan of in de integratie-instellingen de Data API is ingeschakeld.

Stap 5. Verbinding met je app

Supabase heeft kant-en-klare handleidingen voor tientallen technologieën, van Next.js, React en Vue tot Flutter, Python en Laravel. Bij Next.js komt de hele start neer op één commando dat een app met kant-en-klare verbinding aanmaakt, het plakken van het adres en de sleutel, en daarna het schrijven van een pagina die data uit de tabel ophaalt. Na het starten van de app zie je op de pagina de rijen die je in stap twee hebt toegevoegd.

Als je bouwt in Lovable of een vergelijkbare tool, voert die de meeste van deze stappen voor je uit, maar het controleren van de toegangsregels blijft jouw verantwoordelijkheid.

Stap 6. Authenticatie en bestanden

Als de tabel werkt, voeg je de volgende elementen op dezelfde manier toe. Gebruikersauthenticatie schakel je in bij de authenticatiesectie, waar je methoden kiest, bijvoorbeeld e-mail of een Google-account. Bestanden, zoals profielfoto’s of bijlagen, bewaar je in de bestandsopslag, die ook eigen toegangsregels heeft. Voor complexere logica zijn er functies die aan de serverkant draaien.

Meest voorkomende fouten bij de start

• Tabel zonder toegangsregels beschikbaar gemaakt in de applicatie.
• Service-sleutel in browsercode in plaats van de publieke sleutel.
• Regio aan de andere kant van de wereld, waardoor elke query langer duurt.
• Geen backup voor grotere wijzigingen in de databasestructuur.

Wanneer overstappen op het Pro-abonnement

Het gratis abonnement is voldoende voor leren en prototypes, maar ongebruikte projecten worden erop gepauzeerd. Wanneer je app echte gebruikers heeft, mag het project niet in slaapstand gaan, en dan wordt het Pro-abonnement geen optie meer.

Hoe controleer je of je data veilig is

Nadat je de app hebt aangesloten, log je in als twee verschillende personen en controleer je of ieder alleen zijn eigen data ziet. Dit is de eenvoudigste test die de gevaarlijkste fouten opspoort. Bekijk ook in het dashboard de lijst met tabellen en zorg ervoor dat elke tabel die via de API beschikbaar is, toegangsregels heeft ingeschakeld. Supabase waarschuwt in het dashboard voor tabellen zonder deze regels, dus negeer die waarschuwingen niet.

// lees verderMagic Patterns tutorial: van beschrijving naar prototype en codeHandleidingenResend stap voor stap: API-key, domeinverificatie en eerste mailHandleidingenGPT-6 Cyber en Firefox: 81 ernstige beveiligingslekken gevondenNieuws

Kinetyra