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. APIs এবং পরিষেবাগুলি → শংসাপত্র → শংসাপত্র তৈরি করুন → OAuth ক্লায়েন্ট আইডি
3. আবেদনের ধরন:ওয়েব অ্যাপ্লিকেশন
4. অনুমোদিত পুনঃনির্দেশ URI:মোতায়েন করার সময় উৎপাদন URI যোগ করুন:
5. সংরক্ষণ করুন এবং আপনারhttp://localhost:3000/api/auth/callback/google
6. অনুলিপি ক্লায়েন্ট আইডিhttps://yourdomain.com/api/auth/callback/google
7. এবংক্লায়েন্ট সিক্রেটধাপ 2: NextAuth 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: UI এ সাইন-ইন/আউট যোগ করুন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>
 );
}

Database sessions allow invalidating sessions server-side (useful for banning users or forced sign-out) and persist login across server restarts — not possible with JWT-only sessions.

// 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"A:

ব্যবহার করুন কলব্যাক:
প্রশ্ন: Auth.js (NextAuth v5) কি উৎপাদনের জন্য প্রস্তুত?signInউত্তর: 2026 সাল পর্যন্ত, হ্যাঁ — বিটা অনেক মাস ধরে স্থিতিশীল রয়েছে এবং উৎপাদনে ব্যাপকভাবে ব্যবহৃত হয়। API স্থিতিশীল এবং নতুন প্রকল্পের জন্য সুপারিশ করা হয়।async signIn({ user }) { return user.email?.endsWith("@company.com") ?? false; }

প্রশ্ন: API কলের জন্য আমি কীভাবে Google অ্যাক্সেস টোকেন অ্যাক্সেস করব?
উত্তর: এটিকে JWT কলব্যাকে ( ) সংরক্ষণ করুন এবং সেশন কলব্যাকে এটি প্রকাশ করুন।

এর মাধ্যমে অ্যাক্সেস উপসংহার
NextAuth v5 + Google OAuth আপনাকে Next.js 15-এ প্রায় 50 লাইনের কোড সহ প্রোডাকশন-রেডি প্রমাণীকরণ দেয়। রুট হ্যান্ডলার প্যাটার্ন, সার্ভার অ্যাকশন সাইন-ইন/আউট, মিডলওয়্যার সুরক্ষা এবং ঐচ্ছিক ডাটাবেস অ্যাডাপ্টার বাস্তব-বিশ্বের প্রতিটি প্রমাণীকরণের প্রয়োজনীয়তাকে কভার করে। একই প্যাটার্ন ব্যবহার করে Google এর সাথে GitHub, Discord, বা ইমেল/পাসওয়ার্ড যোগ করুন — NextAuth জটিলতা পরিচালনা করে যাতে আপনাকে করতে হবে না।token.accessToken = account.access_tokenNextAuth v5 + Google OAuth আপনাকে Next.js 15-এ প্রায় 50 লাইনের কোড সহ প্রোডাকশন-রেডি প্রমাণীকরণ দেয়। রুট হ্যান্ডলার প্যাটার্ন, সার্ভার অ্যাকশন সাইন-ইন/আউট, মিডলওয়্যার সুরক্ষা এবং ঐচ্ছিক ডাটাবেস অ্যাডাপ্টার বাস্তব-বিশ্বের প্রতিটি প্রমাণীকরণের প্রয়োজনীয়তাকে কভার করে। একই প্যাটার্ন ব্যবহার করে Google এর সাথে GitHub, Discord, বা ইমেল/পাসওয়ার্ড যোগ করুন — NextAuth জটিলতা পরিচালনা করে যাতে আপনাকে করতে হবে না।session.accessToken.

NextAuth v5 + Google OAuth আপনাকে Next.js 15-এ প্রায় 50 লাইনের কোড সহ প্রোডাকশন-রেডি প্রমাণীকরণ দেয়। রুট হ্যান্ডলার প্যাটার্ন, সার্ভার অ্যাকশন সাইন-ইন/আউট, মিডলওয়্যার সুরক্ষা এবং ঐচ্ছিক ডাটাবেস অ্যাডাপ্টার বাস্তব-বিশ্বের প্রতিটি প্রমাণীকরণের প্রয়োজনীয়তাকে কভার করে। একই প্যাটার্ন ব্যবহার করে Google এর সাথে GitHub, Discord, বা ইমেল/পাসওয়ার্ড যোগ করুন — NextAuth জটিলতা পরিচালনা করে যাতে আপনাকে করতে হবে না।

NextAuth v5 + Google OAuth আপনাকে Next.js 15-এ প্রায় 50 লাইনের কোড সহ প্রোডাকশন-রেডি প্রমাণীকরণ দেয়। রুট হ্যান্ডলার প্যাটার্ন, সার্ভার অ্যাকশন সাইন-ইন/আউট, মিডলওয়্যার সুরক্ষা এবং ঐচ্ছিক ডাটাবেস অ্যাডাপ্টার বাস্তব-বিশ্বের প্রতিটি প্রমাণীকরণের প্রয়োজনীয়তাকে কভার করে। একই প্যাটার্ন ব্যবহার করে Google এর সাথে GitHub, Discord, বা ইমেল/পাসওয়ার্ড যোগ করুন — NextAuth জটিলতা পরিচালনা করে যাতে আপনাকে করতে হবে না।