50:I[753780,["$7","$8","$9","$a","$26","$27","$28"],"default"] 52:I[55935,["$7","$8","$9","$a","$26","$27","$28"],"default"] 53:I[19689,["$7","$8","$9","$a","$26","$27","$28"],"default"] 54:I[485653,["$7","$8","$9","$a","$26","$27","$28"],"default"] 55:I[494017,["$7","$8","$9","$a","$26","$27","$28"],"default"] 56:I[72364,["$7","$8","$9","$a","$26","$27","$28"],"default"] 47:["$","div",null,{"className":"flex flex-wrap gap-2","children":[["$","span","better auth",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","better auth"]}],["$","span","nextjs",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","nextjs"]}],["$","span","webdev",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","webdev"]}],["$","span","authentication",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","authentication"]}],["$","span","mongodb",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","mongodb"]}]]}] 48:["$","h1",null,{"className":"text-4xl md:text-5xl font-bold leading-tight mb-6","children":"Better Auth দিয়ে NextJS এ MongoDB Authentication Setup করার সম্পূর্ণ গাইড"}] 49:["$","div",null,{"className":"flex flex-wrap items-center gap-6 text-sm text-muted-foreground border-b pb-6","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar w-4 h-4","aria-hidden":"true","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],"$undefined"]}],["$","time",null,{"dateTime":"2026-05-12T04:33:50.985Z","children":"May 12, 2026, 04:33 AM"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-clock w-4 h-4","aria-hidden":"true","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","path","mmk7yg",{"d":"M12 6v6l4 2"}],"$undefined"]}],["$","span",null,{"children":"7 min read"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-eye w-4 h-4","aria-hidden":"true","children":[["$","path","1nclc0",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["$","circle","1v7zrd",{"cx":"12","cy":"12","r":"3"}],"$undefined"]}],["$","span",null,{"children":[98," views"]}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-heart w-4 h-4","aria-hidden":"true","children":[["$","path","mvr1a0",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}],"$undefined"]}],["$","span",null,{"children":[0," likes"]}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle w-4 h-4","aria-hidden":"true","children":[["$","path","1sd12s",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],"$undefined"]}],["$","span",null,{"children":[0," comments"]}]]}]]}] 51:T3c0f,# Introduction ২০২৬ সালে web developer দের কাছে **Better Auth** authentication এর জন্য সবচেয়ে জনপ্রিয় লাইব্রেরিগুলোর একটি হয়ে উঠেছে। NextJS অ্যাপে MongoDB এর সাথে Better Auth ইন্টিগ্রেট করা এখন আগের চেয়ে অনেক সহজ। এই আর্টিকেলে আমরা step by step দেখব কিভাবে একটি NextJS প্রজেক্টে Better Auth এবং MongoDB দিয়ে পুরো authentication সিস্টেম তৈরি করতে হয় — ইনস্টলেশন থেকে শুরু করে route protection পর্যন্ত। আমরা কভার করব: - প্যাকেজ ইনস্টলেশন ও environment setup - MongoDB কানেকশন ও auth সার্ভার কনফিগারেশন - API route handler ও client-side auth client তৈরি - Sign Up / Sign In UI - Middleware দিয়ে route protection --- ## Better Auth কী এবং কেন ব্যবহার করব? Better Auth একটি TypeScript-first authentication লাইব্রেরি যা NextJS, SvelteKit, Nuxt সহ অনেক ফ্রেমওয়ার্কে কাজ করে। NextAuth.js এর তুলনায় Better Auth অনেক বেশি flexible এবং MongoDB, PostgreSQL, MySQL সহ নানা ডাটাবেজ সাপোর্ট করে। | ফিচার | Better Auth | NextAuth.js | |---|---|---| | TypeScript সাপোর্ট | ✅ নেটিভ | ⚠️ আংশিক | | MongoDB অ্যাডাপ্টার | ✅ বিল্ট-ইন | ✅ সেপারেট প্যাকেজ | | Social Login | ✅ Google, GitHub ইত্যাদি | ✅ সব বড় প্রোভাইডার | | 2FA সাপোর্ট | ✅ বিল্ট-ইন প্লাগিন | ❌ ম্যানুয়াল | | Server Actions সাপোর্ট | ✅ `nextCookies()` প্লাগিন | ❌ | এছাড়াও Better Auth স্বয়ংক্রিয়ভাবে `user`, `session` এবং `account` কালেকশন MongoDB তে তৈরি করে দেয় — আলাদা করে schema ডিফাইন করতে হয় না। --- ## শুরু করার আগে কী লাগবে? এই গাইড ফলো করার জন্য আপনার কাছে যা থাকতে হবে: - NextJS App Router প্রজেক্ট (TypeScript সহ) - MongoDB Atlas অ্যাকাউন্ট ও connection string - Node.js 18+ ইনস্টল করা প্রজেক্ট না থাকলে নিচের কমান্ড দিয়ে তৈরি করো: ```bash npx create-next-app@latest my-app --typescript --app cd my-app ``` শেষে আপনার প্রজেক্ট স্ট্রাকচার এরকম দেখাবে: ``` 📁 my-app/ ├── 📁 src/ │ ├── 📁 app/ │ │ └── 📁 api/auth/[...all]/ │ │ └── 📄 route.ts ← নতুন │ ├── 📁 lib/ │ │ ├── 📄 auth.ts ← নতুন │ │ └── 📄 auth-client.ts ← নতুন │ └── 📄 middleware.ts ← নতুন └── 📄 .env.local ← নতুন ``` --- ## ধাপ ১ — প্যাকেজ ইনস্টল করো প্রথমে Better Auth এবং MongoDB ড্রাইভার ইনস্টল করতে হবে। টার্মিনালে নিচের কমান্ড রান করো: ```bash npm install better-auth mongodb ``` Better Auth একটি সিঙ্গেল প্যাকেজে server এবং client দুটোই দেয়, তাই আলাদা করে কিছু ইনস্টল করতে হয় না। --- ## ধাপ ২ — Environment Variables সেট করো প্রজেক্টের root এ `.env.local` ফাইল তৈরি করে নিচের ভ্যারিয়েবলগুলো যোগ করো: ```env MONGODB_URI=mongodb+srv://:@cluster0.xxxxx.mongodb.net/mydb BETTER_AUTH_SECRET=your-super-secret-key-here BETTER_AUTH_URL=http://localhost:3000 NEXT_PUBLIC_APP_URL=http://localhost:3000 ``` > ⚠️ **সিক্রেট কী জেনারেট করো:** `BETTER_AUTH_SECRET` একটি র‍্যান্ডম সিক্রেট স্ট্রিং হতে হবে। টার্মিনালে এই কমান্ড রান করে জেনারেট করো এবং আউটপুটটা কপি করে `BETTER_AUTH_SECRET` এ বসাও: > > ```bash > openssl rand -base64 32 > ``` > > এই ফাইল কখনো GitHub এ push করো না। --- ## ধাপ ৩ — Auth Server কনফিগার করো `src/lib/auth.ts` ফাইল তৈরি করো। এখানে MongoDB কানেক্ট করা হবে এবং Better Auth এর মূল কনফিগারেশন থাকবে: ```typescript // src/lib/auth.ts import { betterAuth } from "better-auth"; import { MongoClient } from "mongodb"; import { mongodbAdapter } from "better-auth/adapters/mongodb"; import { nextCookies } from "better-auth/next-js"; // MongoDB ক্লায়েন্ট তৈরি করো const client = new MongoClient(process.env.MONGODB_URI as string); const db = client.db(); // Better Auth কনফিগার করো export const auth = betterAuth({ // MongoDB অ্যাডাপ্টার ব্যবহার করো database: mongodbAdapter(db, { client }), // Email & Password লগিন চালু করো emailAndPassword: { enabled: true, }, // Social Login (Google) যোগ করো — ঐচ্ছিক socialProviders: { google: { clientId: process.env.GOOGLE_CLIENT_ID as string, clientSecret: process.env.GOOGLE_CLIENT_SECRET as string, }, }, // Server Actions এ cookie হ্যান্ডল করার জন্য // এটা সবসময় plugins অ্যারের শেষে রাখতে হবে plugins: [nextCookies()], secret: process.env.BETTER_AUTH_SECRET, baseURL: process.env.BETTER_AUTH_URL || "http://localhost:3000", }); ``` `mongodbAdapter` স্বয়ংক্রিয়ভাবে `user`, `session` এবং `account` কালেকশন তৈরি করে দেয়, তাই আলাদা Mongoose schema লাগবে না। --- ## ধাপ ৪ — API Route Handler তৈরি করো Better Auth এর সব API request একটি catch-all route এর মাধ্যমে হ্যান্ডল হয়। `src/app/api/auth/[...all]/route.ts` ফাইল তৈরি করো: ```typescript // src/app/api/auth/[...all]/route.ts import { auth } from "@/lib/auth"; import { toNextJsHandler } from "better-auth/next-js"; export const { GET, POST } = toNextJsHandler(auth); ``` মাত্র তিন লাইনের এই ফাইলটা `/api/auth/sign-in`, `/api/auth/sign-up`, `/api/auth/sign-out` সহ সব authentication endpoint হ্যান্ডল করবে। > 💡 **টিপস:** ফোল্ডারের নাম `[...all]` হতে হবে — square bracket সহ। এটা NextJS এর catch-all route syntax। --- ## ধাপ ৫ — Client-side Auth Client তৈরি করো Client কম্পোনেন্টে Better Auth ব্যবহারের জন্য `src/lib/auth-client.ts` তৈরি করো: ```typescript // src/lib/auth-client.ts import { createAuthClient } from "better-auth/react"; export const authClient = createAuthClient({ baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000", }); ``` এখন যেকোনো Client Component এ `authClient` ব্যবহার করে session পড়া যাবে: ```typescript // app/dashboard/page.tsx "use client"; import { authClient } from "@/lib/auth-client"; export default function Dashboard() { const { data: session, isPending } = authClient.useSession(); if (isPending) return

লোড হচ্ছে...

; if (!session) return

লগিন করা নেই

; return

স্বাগতম, {session.user.name}!

; } ``` --- ## ধাপ ৬ — Sign Up ও Sign In UI তৈরি করো ### Sign Up পেজ ```typescript // app/sign-up/page.tsx "use client"; import { useState } from "react"; import { authClient } from "@/lib/auth-client"; import { useRouter } from "next/navigation"; export default function SignUpPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const router = useRouter(); const handleSignUp = async () => { const { error } = await authClient.signUp.email({ email, password, name, }); if (!error) router.push("/dashboard"); else console.error(error.message); }; return (

setName(e.target.value)} placeholder="নাম" /> setEmail(e.target.value)} placeholder="ইমেইল" /> setPassword(e.target.value)} placeholder="পাসওয়ার্ড" />

); } ``` ### Sign In পেজ ```typescript // app/sign-in/page.tsx "use client"; import { useState } from "react"; import { authClient } from "@/lib/auth-client"; import { useRouter } from "next/navigation"; export default function SignInPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const router = useRouter(); const handleSignIn = async () => { const { error } = await authClient.signIn.email({ email, password, }); if (!error) router.push("/dashboard"); else console.error(error.message); }; const handleSignOut = async () => { await authClient.signOut(); router.push("/sign-in"); }; return (

setEmail(e.target.value)} placeholder="ইমেইল" /> setPassword(e.target.value)} placeholder="পাসওয়ার্ড" />

); } ``` --- ## ধাপ ৭ — Middleware দিয়ে Route Protect করো Protected route গুলো unauthorized ইউজার থেকে রক্ষা করতে `src/middleware.ts` ফাইল তৈরি করো: ```typescript // src/middleware.ts import { NextRequest, NextResponse } from "next/server"; import { getSessionCookie } from "better-auth/cookies"; export async function middleware(request: NextRequest) { const session = getSessionCookie(request); // সেশন না থাকলে sign-in এ রিডাইরেক্ট করো if (!session) { return NextResponse.redirect( new URL("/sign-in", request.url) ); } return NextResponse.next(); } // কোন routes protect করবে সেটা বলো export const config = { matcher: [ "/dashboard", "/dashboard/:path*", "/profile", "/settings", ], }; ``` > ⚠️ **নিরাপত্তার বিষয়ে মনে রেখো:** `getSessionCookie` শুধু cookie চেক করে, database এ verify করে না। এটা fast কিন্তু সম্পূর্ণ secure নয়। প্রোডাকশনে সত্যিকারের সিকিউরিটির জন্য `auth.api.getSession()` ব্যবহার করো, যদিও এটা একটু slow। --- ## সবকিছু টেস্ট করো সব ফাইল তৈরির পর ডেভ সার্ভার চালু করো: ```bash npm run dev ``` ব্রাউজারে `http://localhost:3000/api/auth/get-session` ওপেন করলে JSON রেসপন্স দেখা যাবে। MongoDB Atlas এ দেখবে `user` এবং `session` কালেকশন স্বয়ংক্রিয়ভাবে তৈরি হয়ে গেছে। --- ## সাধারণ সমস্যা ও সমাধান - **MongoDB সংযোগ ব্যর্থ:** MongoDB Atlas এ Network Access এ গিয়ে `0.0.0.0/0` IP allowlist এ যোগ করো। Connection string এ username ও password ঠিক আছে কিনা চেক করো। - **Cookie সেট হচ্ছে না Server Action এ:** `auth.ts` এ `nextCookies()` প্লাগিন যোগ করা আছে কিনা দেখো — এটা `plugins` অ্যারের একদম শেষে থাকতে হবে। - **BETTER_AUTH_SECRET এরর:** `.env.local` ফাইল root এ আছে কিনা এবং server রিস্টার্ট করেছো কিনা দেখো। - **Route handler 404:** ফোল্ডার স্ট্রাকচার `api/auth/[...all]/route.ts` ঠিক আছে কিনা চেক করো — square bracket অবশ্যই লাগবে। --- ## সংক্ষিপ্ত সারাংশ | ধাপ | কাজ | ফাইল | |---|---|---| | ১ | প্যাকেজ ইনস্টল | — | | ২ | Environment variables | `.env.local` | | ৩ | Auth server কনফিগার | `src/lib/auth.ts` | | ৪ | API route handler | `src/app/api/auth/[...all]/route.ts` | | ৫ | Client auth client | `src/lib/auth-client.ts` | | ৬ | Sign Up / Sign In UI | `app/sign-up/page.tsx` | | ৭ | Middleware protection | `src/middleware.ts` | --- ## পরবর্তী ধাপ Better Auth শুধু basic email/password authentication এর মধ্যে সীমাবদ্ধ নয়। আপনি চাইলে Google, GitHub সহ যেকোনো OAuth provider অ্যাড করতে পারেন। এছাড়াও Two-Factor Authentication (2FA), Organization plugin এবং Custom Session handling করার সুযোগ রয়েছে। Better Auth এর সব ফিচার সম্পর্কে জানতে অফিশিয়াল ডকুমেন্টেশন দেখতে পারেন: [better-auth.com/docs](https://better-auth.com/docs) 4a:[["$","$L2a",null,{}],["$","div",null,{"children":[["$","div",null,{"className":"flex items-center gap-2 mb-4","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-book-open h-5 w-5 text-blue-600","aria-hidden":"true","children":[["$","path","1akyts",{"d":"M12 7v14"}],["$","path","ruj8y",{"d":"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}],"$undefined"]}],["$","h3",null,{"className":"font-semibold text-lg","children":"Content"}]]}],["$","div",null,{"className":"prose prose-neutral dark:prose-invert max-w-none","children":["$","$L50",null,{"content":"$51"}]}]]}]] 4b:["$","$L52",null,{"title":"Better Auth দিয়ে NextJS এ MongoDB Authentication Setup করার সম্পূর্ণ গাইড","slug":"better-auth-nextjs-mongodb-authentication-setup"}] 4c:["$","div",null,{"className":"my-10","children":["$","$L53",null,{"variant":"blog"}]}] 4d:["$","div",null,{"className":"border-y py-6 mb-10 flex flex-wrap items-center gap-4","children":[["$","$L54",null,{"blogId":"6a02adaedb503101989f2353","initialCount":0,"slug":"better-auth-nextjs-mongodb-authentication-setup"}],["$","button",null,{"className":"inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border hover:bg-accent/10 transition-colors","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle w-5 h-5","aria-hidden":"true","children":[["$","path","1sd12s",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],"$undefined"]}],"Comment"]}]]}] 4e:["$","$L55",null,{"initialCommentsCount":0,"initialLikesCount":0,"slug":"better-auth-nextjs-mongodb-authentication-setup"}] 4f:["$","div",null,{"className":"mt-20","children":["$","$L56",null,{"relatedBlogs":[]}]}]

Blog

Better Auth দিয়ে NextJS এ MongoDB Authentication Setup করার সম্পূর্ণ গাইড

Content

Enjoyed this article?

Comments