⚡Auth

Social Login einrichten

Niemand will noch ein Passwort erstellen. Social Login mit Google oder GitHub ist fuer Nutzer bequemer und fuer dich sicherer weil du keine Passwoerter speichern musst. Mit NextAuth ist das Setup trivial.

Pro-Tip — Der schnelle Weg

Biete immer mindestens zwei Login-Optionen an. Wenn Google down ist oder jemand keinen GitHub-Account hat, braucht er eine Alternative. Google plus Email-Magic-Link ist die beste Kombination.

Seite 1

NextAuth installieren

NextAuth (jetzt Auth.js) ist die Standard-Auth-Loesung fuer Next.js. Es unterstuetzt dutzende Provider out of the box.

npm install next-auth@beta

OAuth Provider konfigurieren

Erstelle die Auth-Konfiguration mit den Providern die du anbieten willst. Du brauchst Client-ID und Secret von jedem Provider.

// auth.ts
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';
import GitHub from 'next-auth/providers/github';

export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
Google({ clientId: process.env.GOOGLE_ID!, clientSecret: process.env.GOOGLE_SECRET! }),
GitHub({ clientId: process.env.GITHUB_ID!, clientSecret: process.env.GITHUB_SECRET! }),
],
});

Route Handler erstellen

NextAuth braucht einen Catch-All Route Handler fuer Callbacks und Sign-In-Seiten. Eine Datei, fertig.

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

Login-Buttons bauen

Erstelle Sign-In und Sign-Out Buttons. NextAuth redirected automatisch zum Provider und zurueck zu deiner App.

import { signIn, signOut, auth } from '@/auth';

export default async function LoginPage() {
const session = await auth();
if (session) {
return (
<div>
<p>Eingeloggt als {session.user?.name}</p>
<form action={async () => { 'use server'; await signOut(); }}>
<button type='submit'>Abmelden</button>
</form>
</div>
);
}
return (
<form action={async () => { 'use server'; await signIn('google'); }}>
<button type='submit'>Mit Google anmelden</button>
</form>
);
}

Seite 2

Warum das funktioniert

Keine Passwort-Speicherung eliminiert ein ganzes Feld von Sicherheitsrisiken
Nutzer muessen sich kein weiteres Passwort merken und konvertieren besser
OAuth Provider verifizieren die Email automatisch, kein extra Verification-Flow
NextAuth abstrahiert die komplexen OAuth-Flows in wenige Zeilen Config

Tipps

Registriere deine OAuth Apps in Google Cloud Console und GitHub Developer Settings
Setz die Callback-URL auf /api/auth/callback/google bzw. /github
Nutze den session Callback um zusaetzliche User-Daten in die Session zu schreiben
Fuer Produktion brauchst du NEXTAUTH_SECRET als zufaelligen String in den ENV-Variablen

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen