Funktionierender supabase-js-v2-Code für E-Mail und Passwort, Magic Links, OAuth-Anmeldung, Session-Listener und Abmelden, dazu Row-Level-Security-Policies, die auth.uid() nutzen.
Supabase Auth meldet Menschen mit E-Mail und Passwort, einmaligen Magic Links, Telefoncodes oder OAuth-Anbietern wie GitHub an, alles über das Objekt supabase.auth in supabase-js. Jede Anmeldung erzeugt eine Session, deren Token deine Datenbank erreicht, wo Row-Level-Security-Policies auth.uid() mit einer user_id-Spalte vergleichen, um zu entscheiden, was diese Person lesen darf.
Anmeldemethoden und der passende Aufruf
Methode
Aufruf in supabase-js v2
Gut für
E-Mail und Passwort
auth.signUp / auth.signInWithPassword
Klassische Konten
Magic Link
auth.signInWithOtp({ email })
Keine Passwörter, die man vergessen kann
Code per SMS oder WhatsApp
auth.signInWithOtp({ phone })
Mobile-First-Produkte
OAuth-Anbieter
auth.signInWithOAuth({ provider })
Anmeldung mit einem Klick über ein bestehendes Konto
Abmelden
auth.signOut()
Die Session beenden
Auth ist der Teil eines Supabase-Projekts, der am häufigsten falsch verdrahtet wird: Die Anmeldung funktioniert, aber die Daten stehen weit offen, oder der Server vertraut einem Cookie, dem er nicht vertrauen sollte. Wähle unten eine Methode, um ihren Code zu erhalten, und folge dann dem Abschnitt zu Policies, damit jede Person nur ihre eigenen Zeilen sieht.
Wähle im Code-Auswahlfeld eine Anmeldemethode und kopiere das Snippet in deine App.
Aktiviere den passenden Anbieter im Supabase-Dashboard und füge die Adresse deiner Website zu den erlaubten Redirect-URLs hinzu.
Hör auf Auth-Ereignisse, damit sich deine Oberfläche aktualisiert, wenn sich jemand an- oder abmeldet.
Aktiviere Row Level Security für jede Tabelle mit personenbezogenen Daten und füge Policies hinzu, die auth.uid() nutzen.
Ist die E-Mail-Bestätigung aktiv, gibt signUp einen Nutzer, aber eine null-Session zurück, bis der Link angeklickt wird, zeig also eine Hinweisseite zum Posteingang statt eines Dashboards.
Schreib die Funktion in Policies als (select auth.uid()). Postgres kann sie dann einmal pro Statement statt einmal pro Zeile auswerten.
auth.uid() ist bei Anfragen ohne angemeldeten Nutzer null, eine Policy, die es mit user_id vergleicht, trifft für anonyme Besucher also einfach nichts.
Vertraue auf dem Server nicht getSession() aus Cookies; ruf getUser() oder getClaims() auf, um zu prüfen, wer anfragt.
Der publishable (anon) Key ist im Browser sicher, weil Policies ihn einschränken. Ein secret oder service role Key umgeht Row Level Security und muss auf dem Server bleiben.
Häufige Fragen
Ist ein Supabase Magic Link dasselbe wie OTP?
Beide starten mit signInWithOtp. Bei E-Mail enthält die Nachricht einen Link, wenn die Vorlage die Bestätigungs-URL nutzt, und einen Code, wenn sie das Token nutzt. Die Anmeldung per Telefon unterstützt nur Codes, per SMS oder WhatsApp.
Wie füge ich die Anmeldung mit Google oder GitHub hinzu?
Aktiviere den Anbieter im Dashboard mit Client-ID und Secret dieses Anbieters und ruf dann signInWithOAuth mit seinem Namen und optional einer redirectTo-Adresse auf. Die Person kehrt bereits angemeldet auf deine Website zurück.
Wie erfahre ich, wann sich ein Nutzer an- oder abmeldet?
Registriere onAuthStateChange. Es meldet Ereignisse wie INITIAL_SESSION, SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED und PASSWORD_RECOVERY und gibt ein Abonnement zurück, das du beim Unmount der Komponente kündigst.
Warum sehen angemeldete Nutzer nichts mehr, seit ich RLS aktiviert habe?
Sobald Row Level Security aktiv ist, verweigert eine Tabelle alles, bis eine Policy es erlaubt. Füge eine select-Policy für die Rolle authenticated hinzu, die (select auth.uid()) mit der Besitzerspalte vergleicht.
Soll ich Supabase Auth oder Firebase Auth nutzen?
Beide decken die gängigen Methoden ab. Der größere Unterschied ist die Datenbank darunter; unser Vergleich Supabase vs Firebase geht diese Entscheidung im Detail durch.
Sessions und Tokens
Nach der Anmeldung speichert supabase-js ein kurzlebiges Access Token und ein Refresh Token und erneuert das Access Token automatisch. Jede Abfrage über denselben Client sendet das Access Token mit, so erfährt Postgres die ID des Nutzers.
In serverseitig gerenderten Apps liegt die Session stattdessen in Cookies. Die Next.js-Anleitung zur Authentifizierung auf dieser Website behandelt diese Verdrahtung, daher bleibt diese Seite bei der Client-Bibliothek und den Datenbankregeln.
Row Level Security ist das echte Schloss
Einen Button in der Oberfläche auszublenden schützt keine Daten, denn jeder kann deine API mit dem öffentlichen Key aufrufen. Policies laufen bei jeder Anfrage in Postgres und sind daher der Ort, an dem Besitzrechte durchgesetzt werden.
Schreib eine Policy pro Aktion. Eine select-Policy nutzt using, insert braucht with check, damit niemand Zeilen anlegen kann, die jemand anderem gehören, und update braucht meist beides.
Policies mit auth.uid()
Jede Person liest und schreibt nur ihre eigenen Notizen
Im SQL-Editor ausführen. Der Standardwert füllt user_id aus dem Token, und with check verhindert, dass jemand Zeilen für einen anderen Nutzer einfügt.
E-Mail und Passwort
Konto anlegen, dann anmelden. Bei aktiver Bestätigung ist data.session null, bis der Link in der E-Mail angeklickt wird.
Magic Link
Sendet eine E-Mail, deren Link die Person anmeldet und auf die Redirect-Adresse führt.
OAuth (GitHub)
Leitet zum Anbieter und zurück. Aktiviere zuerst den Anbieter und hinterlege seine Keys im Dashboard.
Session-Listener und Abmelden
Hält die Oberfläche im Einklang mit der Session und räumt den Listener auf, wenn du fertig bist.