Nutzer-Login in Next.js: Authentication mit Supabase leicht gemacht

Sobald dein Next.js Portfolio steht und du dich für Supabase als Backend entschieden hast, kommt unweigerlich die nächste große Hürde: Der Nutzer-Login.

Früher war Authentifizierung ein Albtraum. Man musste Passwörter sicher hashen, Sessions in Cookies verwalten, "Passwort vergessen"-Emails verschicken und Tokens validieren. Wer hier einen Fehler machte, öffnete Tür und Tor für Hacker.

Supabase Auth nimmt dir 95 % dieser Arbeit ab. In dieser Anleitung bauen wir ein komplettes Login-System für Next.js 15, das nicht nur sicher ist, sondern sich auch nahtlos in den modernen App Router einfügt. Wir gehen über die Basics hinaus und schauen uns an, wie du deine Datenbank wirklich absicherst.

Das Grundkonzept: Warum Supabase Auth?

Supabase Auth ist weit mehr als nur eine Datenbanktabelle für Nutzer. Es ist ein vollwertiger Identity Service. Wenn ein Nutzer sich anmeldet, erhält er ein JSON Web Token (JWT). Dieses Token ist wie ein digitaler Ausweis, den der Browser bei jeder Anfrage an Supabase mitschickt.

Der Clou bei der Kombination mit Next.js 15: Wir können diesen Ausweis sowohl im Browser (Client-Side) als auch direkt auf dem Server (Server-Side) prüfen. Das ermöglicht uns, private Routen wie /dashboard so zu schützen, dass nicht-eingeloggte Nutzer sie gar nicht erst zu Gesicht bekommen – ohne Lade-Spinner.

Schritt 1: Supabase Dashboard Setup

Bevor wir Code schreiben, müssen wir unser Projekt im Supabase Dashboard konfigurieren.

1. Erstelle ein neues Projekt auf Supabase.com.
2. Gehe zu Authentication > Providers.
3. Stelle sicher, dass "Email" aktiviert ist.
4. Profi-Tipp: Deaktiviere für die lokale Entwicklung kurzzeitig "Confirm Email", damit du dich sofort einloggen kannst, ohne ständig Test-Emails zu checken. Aber vergiss nicht, es vor dem Live-Gang wieder einzuschalten!

Kopiere dir deine Project URL und deinen Anon Key aus den API-Settings. Diese gehören in deine .env.local Datei:

NEXT_PUBLIC_SUPABASE_URL=https://dein-projekt.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=dein-anon-key

Schritt 2: Die Infrastruktur (SSR Helper)

In Next.js 15 müssen wir sicherstellen, dass Supabase weiß, wer der Nutzer ist, egal ob wir gerade eine Server Component oder eine Client Component rendern.

Installiere die notwendigen Pakete:

npm install @supabase/ssr @supabase/supabase-js

Der Server-Client

Wir brauchen eine Funktion, die uns einen Supabase-Client liefert, der Zugriff auf die Next.js Cookies hat. Erstelle die Datei utils/supabase/server.ts:

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Die setAll Methode kann in Server Components fehlschlagen,
            // wenn sie bereits gerendert werden. Das ist meist unkritisch.
          }
        },
      },
    }
  )
}

Schritt 3: Registrierung und Login mit Server Actions

Next.js 15 liebt Server Actions. Sie erlauben uns, Formular-Logik direkt in einer Funktion zu schreiben, die auf dem Server ausgeführt wird. Kein API-Endpunkt-Gefummel mehr.

// app/login/actions.ts
'use server'

import { createClient } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

export async function signup(formData: FormData) {
  const supabase = await createClient()
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  const { error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: {
        display_name: 'Neuer Nutzer', // Hier können Metadaten gespeichert werden
      }
    }
  })

  if (error) redirect('/error')
  redirect('/login?message=Check your email')
}

Schritt 4: Middleware – Der globale Türsteher

Damit du nicht in jeder Datei prüfen musst, ob der Nutzer eingeloggt ist, nutzen wir die Middleware. Sie fängt jede Anfrage ab, bevor die Seite gerendert wird.

// middleware.ts
import { type NextRequest } from 'next/server'
import { updateSession } from '@/utils/supabase/middleware'

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
}

Die Middleware stellt sicher, dass das Session-Token im Hintergrund erneuert wird. Wenn das Token abläuft, wird der Nutzer automatisch ausgeloggt, ohne dass die App abstürzt.

Das wichtigste Thema: Row Level Security (RLS)

Hier trennt sich die Spreu vom Weizen. Viele Anfänger bauen Auth ein, lassen ihre Datenbank aber offen wie ein Scheunentor.

In Supabase ist jede Tabelle standardmäßig geschützt. Du musst explizit Regeln (Policies) schreiben, wer was darf. Stell dir vor, du hast eine Tabelle notizen. Du willst, dass jeder Nutzer nur seine eigenen Notizen sehen kann.

Die SQL-Regel dafür im Supabase SQL Editor:

create policy "Nutzer können nur ihre eigenen Notizen sehen"
on notizen
for select
using ( auth.uid() = user_id );

auth.uid() ist eine magische Funktion von Supabase, die die ID des aktuell eingeloggten Nutzers aus dem JWT-Token extrahiert. Das ist manipulationssicher, da das Token vom Server signiert wurde.

Social Login (Google & Co.)

Technisch ist das nur eine Zeile Code:

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `http://localhost:3000/auth/callback`,
  },
})

Die echte Arbeit liegt im Dashboard des Providers (Google Cloud Console). Du musst dort eine App erstellen, die Redirect-URLs von Supabase hinterlegen und den Client ID sowie das Secret zurück in Supabase kopieren.

Fazit: Supabase vs. NextAuth

Warum empfehle ich Supabase Auth statt dem populären NextAuth (Auth.js)? NextAuth ist fantastisch, wenn du viele verschiedene Datenbanken oder exotische Provider nutzt. Aber wenn du ohnehin Supabase als Datenbank nutzt, ist Supabase Auth unschlagbar. Die tiefe Integration in die Datenbank (RLS) und die Tatsache, dass du dich nicht um das Hosting der Auth-Infrastruktur kümmern musst, spart Wochen an Entwicklungszeit.

Authentifizierung ist heute kein Hindernis mehr. Nutze die gesparte Zeit lieber, um dein Interface mit shadcn/ui zu verschönern oder dein VS Code Setup zu optimieren.

Verwandte Artikel

• Supabase vs. Firebase: Der große Vergleich
• Next.js 15 + Tailwind CSS Portfolio Tutorial
• TypeScript Crashkurs für React-Entwickler
• Vergiss pures Tailwind: Warum moderne Entwickler shadcn/ui nutzen