NextAuth के साथ Next.js 15 में Google OAuth 2.0 को कैसे कार्यान्वित करें: संपूर्ण 2026 ट्यूटोरियल

Google के साथ OAuth 2.0 Next.js एप्लिकेशन में प्रमाणीकरण जोड़ने का सबसे तेज़ तरीका है – उपयोगकर्ता अपने Google खाते से साइन इन करते हैं, पासवर्ड प्रबंधन को समाप्त करते हैं और घर्षण को कम करते हैं। 2026 में,NextAuth v5 (Auth.js) Next.js 15 ऐप राउटर के लिए सबसे साफ एकीकरण प्रदान करता है। यह ट्यूटोरियल संपूर्ण कार्यान्वयन को कवर करता है।

पूर्वापेक्षाएँ

• Next.js 15 प्रोजेक्ट (ऐप राउटर)
• Google क्लाउड कंसोल खाता (निःशुल्क)
• PostgreSQL डेटाबेस (वैकल्पिक, लगातार सत्रों के लिए)

चरण 1: Google OAuth क्रेडेंशियल सेट करें

1. पर जाएँ console.cloud.google.comएक नया प्रोजेक्ट बनाएं (या मौजूदा का चयन करें)
2. पर नेविगेट करें एपीआई और सेवाएँ → क्रेडेंशियल → क्रेडेंशियल बनाएँ → OAuth क्लाइंट आईडी
3. आवेदन का प्रकार:वेब एप्लीकेशन
4. अधिकृत रीडायरेक्ट यूआरआई:तैनात करते समय उत्पादन यूआरआई जोड़ें:
5. अपनाhttp://localhost:3000/api/auth/callback/google
6. सहेजें और कॉपी करें क्लाइंट आईडीhttps://yourdomain.com/api/auth/callback/google
7. औरग्राहक रहस्यचरण 2: नेक्स्टऑथ v5 स्थापित करेंचरण 3: Auth.js कॉन्फ़िगर करें

बनाएँ

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

आपके प्रोजेक्ट रूट में:

चरण 4: रूट हैंडलर बनाएंauth.tsबनाएँ

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",
 },
});

चरण 5: पर्यावरण चर

चरण 6: यूआई में साइन-इन/आउट जोड़ेंapp/api/auth/[...nextauth]/route.ts:

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

चरण 7: सर्वर घटकों में प्रवेश सत्र

# .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

चरण 8: मिडिलवेयर से मार्गों को सुरक्षित रखें

// 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>
 );
}

चरण 9: डेटाबेस एकीकरण (वैकल्पिक लेकिन अनुशंसित)

// 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>
 );
}

डेटाबेस सत्र सर्वर-साइड सत्रों को अमान्य करने की अनुमति देते हैं (उपयोगकर्ताओं पर प्रतिबंध लगाने या जबरन साइन-आउट करने के लिए उपयोगी) और सर्वर पुनरारंभ के दौरान लॉगिन जारी रखते हैं – केवल JWT सत्रों के साथ संभव नहीं है।

// 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).*)"],
};

चरण 10: क्लाइंट घटकों में एक्सेस सत्र

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(...)],
});

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: जेडब्ल्यूटी बनाम डेटाबेस सत्र – मुझे किसका उपयोग करना चाहिए?

// 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!} />;
}

उ: सरल ऐप्स के लिए JWT जहां आपको सर्वर-साइड सत्र अमान्यकरण की आवश्यकता नहीं है। उन ऐप्स के लिए डेटाबेस जहां आपको सत्रों को रद्द करने, ऑडिट लॉगिन करने या सत्रों से जुड़ी उपयोगकर्ता प्राथमिकताओं को संग्रहीत करने की आवश्यकता होती है।

प्रश्न: मैं और अधिक OAuth प्रदाताओं को कैसे जोड़ूँ?
ए: आयात करें और प्रदाता सरणी में जोड़ें:

. NextAuth समान पैटर्न वाले 70+ प्रदाताओं का समर्थन करता है।
प्रश्न: मैं साइन-इन को विशिष्ट ईमेल डोमेन तक कैसे सीमित करूं?import GitHub from "next-auth/providers/github"ए:

का प्रयोग करें कॉलबैक:
प्रश्न: क्या Auth.js (NextAuth v5) उत्पादन के लिए तैयार है?signInउ: 2026 तक, हाँ – बीटा कई महीनों से स्थिर है और उत्पादन में व्यापक रूप से उपयोग किया जाता है। एपीआई स्थिर है और नई परियोजनाओं के लिए अनुशंसित है।async signIn({ user }) { return user.email?.endsWith("@company.com") ?? false; }

प्रश्न: मैं एपीआई कॉल के लिए Google एक्सेस टोकन तक कैसे पहुंच सकता हूं?
उत्तर: इसे JWT कॉलबैक (

) में संग्रहीत करें और इसे सत्र कॉलबैक में प्रदर्शित करें।
के माध्यम से प्रवेश निष्कर्षtoken.accessToken = account.access_tokenNextAuth v5 + Google OAuth आपको कोड की लगभग 50 पंक्तियों के साथ Next.js 15 में उत्पादन-तैयार प्रमाणीकरण देता है। रूट हैंडलर पैटर्न, सर्वर एक्शन साइन-इन/आउट, मिडलवेयर सुरक्षा और वैकल्पिक डेटाबेस एडाप्टर हर वास्तविक दुनिया प्रमाणीकरण आवश्यकता को कवर करते हैं। समान पैटर्न का उपयोग करके Google के साथ GitHub, Discord, या ईमेल/पासवर्ड जोड़ें – NextAuth जटिलता को संभालता है ताकि आपको ऐसा न करना पड़े।session.accessToken.

NextAuth v5 + Google OAuth आपको कोड की लगभग 50 पंक्तियों के साथ Next.js 15 में उत्पादन-तैयार प्रमाणीकरण देता है। रूट हैंडलर पैटर्न, सर्वर एक्शन साइन-इन/आउट, मिडलवेयर सुरक्षा और वैकल्पिक डेटाबेस एडाप्टर हर वास्तविक दुनिया प्रमाणीकरण आवश्यकता को कवर करते हैं। समान पैटर्न का उपयोग करके Google के साथ GitHub, Discord, या ईमेल/पासवर्ड जोड़ें – NextAuth जटिलता को संभालता है ताकि आपको ऐसा न करना पड़े।

NextAuth v5 + Google OAuth आपको कोड की लगभग 50 पंक्तियों के साथ Next.js 15 में उत्पादन-तैयार प्रमाणीकरण देता है। रूट हैंडलर पैटर्न, सर्वर एक्शन साइन-इन/आउट, मिडलवेयर सुरक्षा और वैकल्पिक डेटाबेस एडाप्टर हर वास्तविक दुनिया प्रमाणीकरण आवश्यकता को कवर करते हैं। समान पैटर्न का उपयोग करके Google के साथ GitHub, Discord, या ईमेल/पासवर्ड जोड़ें – NextAuth जटिलता को संभालता है ताकि आपको ऐसा न करना पड़े।