Werkende supabase-js v2-code voor e-mail en wachtwoord, magic links, inloggen met OAuth, session listeners en uitloggen, plus row level security-policies die auth.uid() gebruiken.
Supabase Auth laat mensen inloggen met e-mail en wachtwoord, eenmalige magic links, telefooncodes of OAuth-providers zoals GitHub, allemaal via het object supabase.auth in supabase-js. Elke login levert een sessie op waarvan het token uw database bereikt, waar row level security-policies auth.uid() vergelijken met een user_id-kolom om te bepalen wat die persoon mag lezen.
Inlogmethoden en de aanroep voor elk
Methode
Aanroep in supabase-js v2
Geschikt voor
E-mail en wachtwoord
auth.signUp / auth.signInWithPassword
Klassieke accounts
Magic link
auth.signInWithOtp({ email })
Geen wachtwoorden om te vergeten
Code via sms of WhatsApp
auth.signInWithOtp({ phone })
Producten die mobiel voorop zetten
OAuth-provider
auth.signInWithOAuth({ provider })
Inloggen met één klik via een bestaand account
Uitloggen
auth.signOut()
De sessie beëindigen
Auth is het deel van een Supabase-project dat mensen het vaakst verkeerd aansluiten: het inloggen werkt, maar de data staat wagenwijd open of de server vertrouwt een cookie die hij niet zou moeten vertrouwen. Kies hieronder een methode om de code te krijgen en volg daarna de sectie over policies, zodat iedereen alleen zijn eigen rijen ziet.
Kies een inlogmethode in de codekiezer en kopieer het fragment naar uw app.
Zet de bijbehorende provider aan in het Supabase-dashboard en voeg het adres van uw site toe aan de toegestane redirect-URL's.
Luister naar auth-events zodat uw interface bijwerkt als iemand in- of uitlogt.
Schakel row level security in op elke tabel met persoonsgegevens en voeg policies toe die auth.uid() gebruiken.
Met e-mailbevestiging aan retourneert signUp een gebruiker maar een null-sessie tot op de link is geklikt, dus toon een bericht om de inbox te controleren in plaats van een dashboard.
Schrijf de functie in policies als (select auth.uid()). Postgres kan hem dan één keer per statement evalueren in plaats van één keer per rij.
auth.uid() is null voor verzoeken zonder ingelogde gebruiker, dus een policy die hem vergelijkt met user_id levert voor anonieme bezoekers gewoon niets op.
Vertrouw op de server niet op getSession() uit cookies; roep getUser() of getClaims() aan om te verifiëren wie het vraagt.
De publishable (anon) key is veilig in browsers omdat policies hem beperken. Een secret of service role key slaat row level security over en moet op de server blijven.
Veelgestelde vragen
Is een magic link van Supabase hetzelfde als OTP?
Beide beginnen bij signInWithOtp. Bij e-mail bevat het bericht een link als de template de bevestigings-URL gebruikt, en een code als hij het token gebruikt. Inloggen met de telefoon ondersteunt alleen codes, via sms of WhatsApp.
Hoe voeg ik inloggen met Google of GitHub toe?
Schakel de provider in het dashboard in met de client ID en het secret van die provider, en roep dan signInWithOAuth aan met de naam en optioneel een redirectTo-adres. De persoon keert al ingelogd terug naar uw site.
Hoe weet ik wanneer een gebruiker in- of uitlogt?
Registreer onAuthStateChange. Die meldt events zoals INITIAL_SESSION, SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED en PASSWORD_RECOVERY, en retourneert een subscription die u opzegt als de component unmount.
Waarom zien ingelogde gebruikers niets meer nadat ik RLS heb ingeschakeld?
Zodra row level security aanstaat, weigert een tabel alles tot een policy het toestaat. Voeg een select-policy toe voor de rol authenticated die (select auth.uid()) vergelijkt met de eigenaarskolom.
Moet ik Supabase Auth of Firebase Auth gebruiken?
Beide dekken de gangbare methoden. Het grotere verschil is de database eronder; onze vergelijking van Supabase en Firebase behandelt die keuze in detail.
Sessies en tokens
Na het inloggen bewaart supabase-js een kortlevend access token en een refresh token, en vernieuwt het access token automatisch. Elke query die u via dezelfde client doet stuurt het access token mee, en zo leert Postgres het ID van de gebruiker kennen.
In apps die op de server renderen leeft de sessie in plaats daarvan in cookies. De gids over Next.js-authenticatie op deze site behandelt die koppeling, dus deze pagina blijft bij de clientbibliotheek en de databaseregels.
Row level security is het echte slot
Een knop verbergen in de interface beschermt geen data, want iedereen kan uw API aanroepen met de publieke key. Policies draaien bij elk verzoek binnen Postgres, en daarom is dat de plek waar eigendom wordt afgedwongen.
Schrijf één policy per actie. Een select-policy gebruikt using, terwijl insert with check nodig heeft zodat mensen geen rijen kunnen aanmaken die van iemand anders zijn, en update meestal beide nodig heeft.
Policies die auth.uid() gebruiken
Iedereen leest en schrijft alleen zijn eigen notities
Uitvoeren in de SQL-editor. De standaardwaarde vult user_id vanuit het token, en with check voorkomt dat iemand rijen invoegt voor een andere gebruiker.
E-mail en wachtwoord
Maak het account aan en log dan in. Met bevestiging aan is data.session null tot op de link in de e-mail is geklikt.
Magic link
Verstuurt een e-mail waarvan de link de persoon inlogt en op het redirect-adres laat landen.
OAuth (GitHub)
Stuurt door naar de provider en weer terug. Schakel eerst de provider in en stel de keys in het dashboard in.
Session listener en uitloggen
Houdt de interface in lijn met de sessie en ruimt de listener op als u klaar bent.