Supabase-opas vibekoodaajalle – tietokanta, autentikointi ja storage yhdellä palvelulla

Rakennat sovellusta vibekoodauksella. Käyttöliittymä on valmis ja näyttää hyvältä. Sitten tulee se hetki: "Mihin tämä data oikeastaan tallennetaan?"

Perinteisesti vastaus olisi: pystytät palvelimen, asennat tietokannan, rakennat API:n, konfiguroit autentikoinnin ja kirjoitat satoja rivejä backend-koodia. Vibekoodaajalle tämä on painajainen.

Supabase ratkaisee tämän ongelman. Se antaa sinulle tietokannan, autentikoinnin, tiedostotallennuksen ja reaaliaikaisen datan – kaikki yhdestä paikasta, ilman palvelimen pystyttämistä.

Mikä Supabase oikeastaan on?

Supabase on avoimen lähdekoodin backend-as-a-service (BaaS). Jos tuo termi ei sano mitään, ajattele sitä näin: Supabase on palvelu, joka hoitaa kaiken sen teknisen infrastruktuurin, jota sovelluksesi tarvitsee taustalle.

Se koostuu neljästä ydinosasta:

1. PostgreSQL-tietokanta

Supabasen sydän on PostgreSQL – maailman suosituin avoimen lähdekoodin tietokanta. Se ei ole mikään leikkiversio, vaan täysiverinen relaatiotietokanta, jota käyttävät myös suuryritykset.

Käytännössä tämä tarkoittaa: voit tallentaa käyttäjätiedot, tuotteet, tilaukset, blogipotaukset – mitä tahansa dataa sovelluksesi tarvitsee. Supabase tarjoaa myös visuaalisen Table Editorin, jolla hallitset tietokantaa ilman SQL-osaamista.

2. Autentikointi (Auth)

Kirjautuminen on yksi monimutkaisimmista asioista rakentaa itse. Supabase Auth hoitaa sen puolestasi:

• Sähköposti + salasana
• Magic link (kirjautumislinkki sähköpostiin)
• OAuth-kirjautuminen (Google, GitHub, Apple, Discord ja muut)
• Puhelinnumero + SMS-koodi

Sinun ei tarvitse miettiä salasanojen hashausta, session hallintaa tai tokenien vanhenemista. Supabase hoitaa kaiken.

3. Storage (tiedostojen tallennus)

Käyttäjien profiilikuvat, tuotekuvat, PDF-tiedostot, videot – Storage tarjoaa paikan kaikelle. Se toimii kuin S3, mutta integroituu suoraan tietokantaan ja autentikointiin.

Voit määrittää, kuka saa ladata tiedostoja ja kuka näkee ne. Esimerkiksi: "Käyttäjä voi ladata vain omaan kansioonsa" tai "Profiilkuvat ovat julkisia, mutta dokumentit yksityisiä."

4. Realtime (reaaliaikainen data)

Supabase voi lähettää tietokannan muutokset suoraan selaimeen reaaliaikaisesti. Kun joku lisää rivin tietokantaan, kaikki yhdistetyt selaimet saavat päivityksen välittömästi.

Tämä on hyödyllistä chat-sovelluksissa, live-dashboardeissa ja kaikessa, missä data muuttuu ja käyttäjän pitää nähdä muutokset heti.

Miksi vibekoodaajat rakastavat Supabasea?

Supabase on noussut vibekoodauksen suosikkityökaluksi backend-puolella, ja syyt ovat konkreettisia:

Tekoäly osaa sen. Claude, ChatGPT ja muut mallit ovat nähneet valtavasti Supabase-koodia koulutuksessaan. Kun promptaat "lisää Supabase-autentikointi", saat yleensä toimivaa koodia ensi yrittämällä.

JavaScript-kirjasto on yksinkertainen. Supabasen client library on suunniteltu helppokäyttöiseksi:

// Hae kaikki tuotteet
const { data, error } = await supabase
  .from('products')
  .select('*')

// Lisää uusi tuote
const { data, error } = await supabase
  .from('products')
  .insert({ name: 'T-paita', price: 29.99 })

Vertaa tätä perinteiseen REST API -rakentamiseen, ja ymmärrät miksi tämä on suosittua.

Dashboard korvaa SQL:n. Supabasen web-dashboard antaa sinulle visuaalisen näkymän tietokantaan. Voit luoda tauluja, lisätä rivejä, muokata dataa ja tarkastella relaatioita – kaikki ilman, että kirjoitat yhtään SQL-komentoa.

Ilmainen taso riittää. 500 MB tietokantaa, 1 GB storagea, 50 000 auth-pyyntöä kuukaudessa. Se riittää lähes kaikkiin opettelu- ja prototyyppiprojekteihin.

Projektin pystytys askel askeleelta

1. Luo Supabase-projekti

Mene supabase.com ja luo tili. Klikkaa "New Project", anna sille nimi ja valitse region (EU West on hyvä valinta Suomesta).

Projektin luominen kestää noin minuutin. Sen jälkeen saat:

• Project URL: https://xxxxxxxx.supabase.co
• Anon Key: Julkinen avain client-käyttöön
• Service Role Key: Salainen avain server-käyttöön (älä koskaan laita frontendiin!)

2. Yhdistä Next.js-projektiin

Asenna Supabase-kirjasto:

npm install @supabase/supabase-js

Lisää ympäristömuuttujat .env.local-tiedostoon:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

Luo Supabase-client:

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

3. Luo tietokantataulu

Voit tehdä tämän dashboardissa tai SQL-editorissa. Tässä esimerkki yksinkertaisesta tehtävälistasta:

create table todos (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default now(),
  title text not null,
  completed boolean default false,
  user_id uuid references auth.users(id)
);

-- Ota RLS käyttöön
alter table todos enable row level security;

-- Käyttäjä näkee vain omat tehtävänsä
create policy "Users can view own todos"
  on todos for select
  using (auth.uid() = user_id);

-- Käyttäjä voi lisätä vain omia tehtäviään
create policy "Users can create own todos"
  on todos for insert
  with check (auth.uid() = user_id);

RLS (Row Level Security) on Supabasen supervoima: se varmistaa tietokantatasolla, että käyttäjä näkee vain oman datansa. Tämä on tärkeää, koska Supabase-client toimii selaimessa – ilman RLS:ää kuka tahansa voisi lukea kaiken datan.

Autentikoinnin lisääminen

Tässä esimerkki sähköposti + salasana -kirjautumisesta:

// Rekisteröinti
const { data, error } = await supabase.auth.signUp({
  email: 'kayttaja@esimerkki.fi',
  password: 'turvallinen-salasana'
})

// Kirjautuminen
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'kayttaja@esimerkki.fi',
  password: 'turvallinen-salasana'
})

// Uloskirjautuminen
await supabase.auth.signOut()

// Nykyinen käyttäjä
const { data: { user } } = await supabase.auth.getUser()

Google-kirjautuminen on yhtä helppoa:

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
})

Supabasen dashboard tarjoaa valmiit asetukset OAuth-providerien konfigurointiin. Tarvitset vain Client ID:n ja Client Secretin Googlesta (tai muusta palvelusta).

Tiedostojen tallennus Storagella

// Lataa tiedosto
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.png`, file)

// Hae julkinen URL
const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`)

Luo ensin bucket (säiliö) dashboardissa. Voit tehdä bucketista julkisen (kuvat, julkiset tiedostot) tai yksityisen (henkilökohtaiset dokumentit).

Supabase + Cursor / Claude Code

Tässä on prompti, jolla saat tekoälyn rakentamaan Supabase-integraation tehokkaasti:

Lisää Supabase-integraatio Next.js 15 -projektiini.

Tietokanta:
- Taulu "posts": id (uuid), title (text), content (text),
  author_id (uuid, viittaa auth.users), created_at (timestamp)
- RLS: käyttäjä näkee kaikki postaukset,
  mutta voi muokata vain omiaan

Auth:
- Sähköposti + salasana -rekisteröinti ja kirjautuminen
- Middleware, joka suojaa /dashboard-reitit

API:
- Server actions postauksien CRUD-operaatioille

Käytä @supabase/ssr-kirjastoa server-puolella.

Tärkeä huomio: Next.js 15:n server componentien kanssa kannattaa käyttää @supabase/ssr-kirjastoa pelkän @supabase/supabase-js:n sijaan. Se hoitaa cookiet ja session hallinnan oikein server-puolella.

Tyypilliset sudenkuopat

RLS unohtuu

Jos et ota Row Level Securitya käyttöön, kaikki data on kaikkien luettavissa. Tämä on Supabasen yleisin tietoturvavirhe. Ota RLS aina käyttöön ja luo policyt ennen kuin lisäät dataa.

Service Role Key frontendissä

Service Role Key ohittaa kaikki RLS-policyt. Jos se päätyy selaimeen, kuka tahansa voi lukea ja muokata kaiken datan. Käytä frontendissä aina Anon Key:tä.

Ympäristömuuttujat puuttuvat tuotannosta

Lokaali .env.local ei siirry automaattisesti Verceliin tai muuhun hostingiin. Muista lisätä ympäristömuuttujat myös tuotantoympäristöön.

Tyyppien puuttuminen

Supabase generoi TypeScript-tyypit automaattisesti tietokantaschemasta:

npx supabase gen types typescript --project-id PROJEKTI_ID > src/types/database.ts

Käytä näitä tyyppejä – ne estävät monta bugia ja tekevät tekoälyn generoiman koodin paremmaksi.

Supabase vs. muut vaihtoehdot

| Ominaisuus | Supabase | Firebase | PlanetScale | |-----------|----------|----------|-------------| | Tietokanta | PostgreSQL | NoSQL (Firestore) | MySQL | | Avoin lähdekoodi | Kyllä | Ei | Osittain | | Auth | Sisäänrakennettu | Sisäänrakennettu | Ei | | Storage | Sisäänrakennettu | Sisäänrakennettu | Ei | | Realtime | Kyllä | Kyllä | Ei | | SQL-tuki | Täysi | Ei | Täysi | | Ilmainen taso | Antelias | Antelias | Rajattu |

Vibekoodaajalle Supabase on useimmiten paras valinta, koska se yhdistää kaiken tarvittavan yhteen paikkaan ja tekoäly osaa generoida sille koodia erinomaisesti.

Yhteenveto: aloita tästä

1. Luo ilmainen Supabase-projekti
2. Yhdistä se Next.js-projektiisi
3. Luo ensimmäinen taulu ja ota RLS käyttöön
4. Lisää autentikointi
5. Rakenna sovellus sen päälle

Supabase poistaa backendin monimutkaisuuden ja antaa sinun keskittyä siihen, mikä on tärkeintä: sovelluksen rakentamiseen. Jos olet aloittamassa vibekoodausta, Supabase on yksi niistä työkaluista, jotka kannattaa opetella ensimmäisten joukossa.

Se ei ole täydellinen – mikään työkalu ei ole. Mutta se on riittävän hyvä, riittävän yksinkertainen ja riittävän ilmainen, että pääset alkuun tänään.