So implementieren Sie Google OAuth 2.0 in Next.js 15 mit NextAuth: Schließen Sie das Tutorial 2026 ab

OAuth 2.0 mit Google ist die schnellste Möglichkeit, einer Next.js-Anwendung eine Authentifizierung hinzuzufügen – Benutzer melden sich mit ihrem Google-Konto an, wodurch die Passwortverwaltung entfällt und Reibungsverluste vermieden werden. Im Jahr 2026NextAuth v5 (Auth.js) Bietet die sauberste Integration für Next.js 15 App Router. Dieses Tutorial behandelt die vollständige Implementierung.

Voraussetzungen

• Next.js 15-Projekt (App Router)
• Google Cloud Console-Konto (kostenlos)
• PostgreSQL-Datenbank (optional, für persistente Sitzungen)

Schritt 1: Google OAuth-Anmeldeinformationen einrichten

1. Gehen Sie zuconsole.cloud.google.com
2. Erstellen Sie ein neues Projekt (oder wählen Sie ein vorhandenes aus)
3. Navigieren Sie zuAPIs und Dienste → Anmeldeinformationen → Anmeldeinformationen erstellen → OAuth-Client-ID
4. Anwendungstyp:Webanwendung
5. Autorisierte Weiterleitungs-URIs:http://localhost:3000/api/auth/callback/google
6. Fügen Sie beim Bereitstellen einen Produktions-URI hinzu:https://yourdomain.com/api/auth/callback/google
7. Speichern und kopieren Sie IhrKunden-ID undClient-Geheimnis

Schritt 2: Installieren Sie NextAuth v5

npm install next-auth@beta
# or
pnpm add next-auth@beta

Schritt 3: Konfigurieren Sie Auth.js

Erstellen Sieauth.ts in Ihrem Projektstammverzeichnis:

import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google({
      clientId:     process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      // Add user ID to session
      if (token.sub) {
        session.user.id = token.sub;
      }
      return session;
    },
    async jwt({ token, account, profile }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
  },
  pages: {
    signIn: "/login",    // custom sign-in page
    error:  "/auth/error",
  },
});

Schritt 4: Routenhandler erstellen

Erstellen Sieapp/api/auth/[...nextauth]/route.ts:

import { handlers } from "@/auth";
export const { GET, POST } = handlers;

Schritt 5: Umgebungsvariablen

# .env.local
GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
AUTH_SECRET=generate_with_openssl_rand_base64_32

# Generate AUTH_SECRET:
# openssl rand -base64 32

Schritt 6: Anmelden/Abmelden zur Benutzeroberfläche hinzufügen

// components/AuthButtons.tsx
import { signIn, signOut } from "@/auth";

export function SignInButton() {
  return (
    <form action={async () => {
      "use server";
      await signIn("google");
    }}>
      <button type="submit">Sign in with Google</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => {
      "use server";
      await signOut({ redirectTo: "/" });
    }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

Schritt 7: Zugriffssitzung in Serverkomponenten

// app/dashboard/page.tsx
import { auth } from "@/auth";
import { redirect } from "next/navigation";

export default async function Dashboard() {
  const session = await auth();

  if (!session?.user) {
    redirect("/login");
  }

  return (
    <main>
      <h1>Welcome, {session.user.name}!</h1>
      <img src={session.user.image!} alt="avatar" width={40} height={40} />
      <p>Email: {session.user.email}</p>
    </main>
  );
}

Schritt 8: Routen mit Middleware schützen

// middleware.ts
import { auth } from "@/auth";
import { NextResponse } from "next/server";

export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isProtected = req.nextUrl.pathname.startsWith("/dashboard");

  if (isProtected && !isLoggedIn) {
    const loginUrl = new URL("/login", req.url);
    loginUrl.searchParams.set("callbackUrl", req.nextUrl.href);
    return NextResponse.redirect(loginUrl);
  }
  return NextResponse.next();
});

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

Schritt 9: Datenbankintegration (optional, aber empfohlen)

npm install @auth/prisma-adapter @prisma/client prisma

// auth.ts with database adapter
import { PrismaAdapter } from "@auth/prisma-adapter";
import { db } from "@/lib/db";  // your Prisma client

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(db),
  session: { strategy: "database" },  // store sessions in DB
  providers: [Google(...)],
});

Datenbanksitzungen ermöglichen die serverseitige Ungültigmachung von Sitzungen (nützlich zum Sperren von Benutzern oder zum erzwungenen Abmelden) und die Beibehaltung der Anmeldung über Serverneustarts hinweg – bei reinen JWT-Sitzungen nicht möglich.

Schritt 10: Zugriffssitzung in Client-Komponenten

// Wrap your app with SessionProvider in layout.tsx
// app/layout.tsx
import { SessionProvider } from "next-auth/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

// Client component using session
"use client";
import { useSession } from "next-auth/react";

export function UserAvatar() {
  const { data: session, status } = useSession();

  if (status === "loading") return <Skeleton />;
  if (!session) return <SignInButton />;

  return <img src={session.user.image!} alt={session.user.name!} />;
}

Häufig gestellte Fragen

F: JWT vs. Datenbanksitzungen – welche sollte ich verwenden?
A: JWT für einfache Apps, bei denen Sie keine serverseitige Sitzungsinvalidierung benötigen. Datenbank für Apps, in denen Sie Sitzungen widerrufen, Anmeldungen prüfen oder an Sitzungen gebundene Benutzereinstellungen speichern müssen.

F: Wie füge ich weitere OAuth-Anbieter hinzu?
A: Importieren und zum Provider-Array hinzufügen:import GitHub from "next-auth/providers/github". NextAuth unterstützt über 70 Anbieter mit demselben Muster.

F: Wie beschränke ich die Anmeldung auf bestimmte E-Mail-Domänen?
A: Verwenden SiesignIn Rückruf:async signIn({ user }) { return user.email?.endsWith("@company.com") ?? false; }

F: Ist Auth.js (NextAuth v5) produktionsbereit?
A: Ab 2026, ja – die Beta läuft seit vielen Monaten stabil und wird in großem Umfang in der Produktion eingesetzt. Die API ist stabil und wird für neue Projekte empfohlen.

F: Wie greife ich für API-Aufrufe auf das Google-Zugriffstoken zu?
A: Speichern Sie es im JWT-Rückruf (token.accessToken = account.access_token) und stellen Sie es im Sitzungsrückruf bereit. Zugriff übersession.accessToken.

Fazit

NextAuth v5 + Google OAuth bietet Ihnen eine produktionsbereite Authentifizierung in Next.js 15 mit etwa 50 Codezeilen. Das Route-Handler-Muster, die Anmeldung/Abmeldung durch Serveraktionen, der Middleware-Schutz und der optionale Datenbankadapter decken alle realen Authentifizierungsanforderungen ab. Fügen Sie GitHub, Discord oder E-Mail/Passwort neben Google nach demselben Muster hinzu – NextAuth übernimmt die Komplexität, sodass Sie dies nicht tun müssen.