NextAuth with Next.js: The Ultimate Guide to Secure Authentication ·

Web application ডেভেলপমেন্টের সময় সবচেয়ে ক্রিটিক্যাল এবং পেইনফুল পার্ট হলো Authentication সিস্টেম দাঁড় করানো।

নিজে থেকে Session management, cookies হ্যান্ডেল করা, JWT (JSON Web Tokens) জেনারেট করা এবং সিকিউরিটি (যেমন CSRF বা XSS অ্যাটাক) মেইনটেইন করা বেশ সময়সাপেক্ষ এবং complex একটি কাজ।

Next.js ডেভেলপারদের জন্য এই পুরো প্রসেসটিকে একদম পানির মতো সহজ করে দিয়েছে NextAuth.js (বর্তমানে Auth.js)।

আজকের এই ইন-ডিটেইল গাইডে আমরা দেখবো কেন আপনার প্রজেক্টে NextAuth ব্যবহার করা উচিত এবং কীভাবে একদম স্ক্র্যাচ থেকে একটি প্রোডাকশন-রেডি অথেনটিকেশন সিস্টেম তৈরি করবেন।

কেন NextAuth (Auth.js) সবার চেয়ে আলাদা?

মার্কেটে Firebase, Supabase বা Auth0 এর মতো অনেক সলিউশন থাকলেও Next.js ইকোসিস্টেমে NextAuth-এর পপুলারিটি সবচেয়ে বেশি। এর প্রধান কারণগুলো হলো:

Own Your Data: থার্ড-পার্টি সার্ভিসে ইউজারের ডেটা আটকে থাকে না। আপনি চাইলে আপনার নিজের ডাটাবেসে (MongoDB, PostgreSQL) ইউজার ডেটা সেভ করতে পারবেন।
Built-in Security: Cross-Site Request Forgery (CSRF) protection এবং secure cookies বাই-ডিফল্ট কনফিগার করা থাকে।
Serverless & Edge Ready: Next.js এর App Router, Server Components এবং Edge functions এর সাথে এটি দারুণভাবে কাজ করে।

NextAuth vs Firebase vs Custom Auth

কোন অথেনটিকেশন মেথড আপনার জন্য বেস্ট হবে, তার একটি কুইক ডাটা কম্পারিজন নিচে দেওয়া হলো:

Features / Auth Type	NextAuth.js	Firebase Auth	Custom Auth (JWT)
Setup Complexity	Low (সহজ)	Low (খুব সহজ)	High (অনেক কঠিন)
Data Ownership	100% আপনার ডাটাবেসে	Google এর সার্ভারে	100% আপনার ডাটাবেসে
OAuth Providers	60+ (Google, GitHub etc.)	Limited (Major ones)	নিজে ইমপ্লিমেন্ট করতে হবে
Cost	Completely Free & Open Source	Free up to limits (Pay as you go)	Free (But server cost applied)
Next.js Integration	Excellent (Native Support)	Good (Needs extra config for SSR)	Moderate (Needs manual wiring)

Let’s Deep Dive

ধরে নিচ্ছি আপনি Next.js 13 বা 14 (App Router) ব্যবহার করছেন। চলুন কোডিং শুরু করি!

Step 1: Package ইন্সটলেশন

প্রথমে আপনার প্রজেক্ট ডিরেক্টরিতে টার্মিনাল ওপেন করে NextAuth প্যাকেজটি ইন্সটল করে নিন:

Bash

npm install next-auth

Step 2: Environment Variables (.env) সেটআপ

প্রজেক্টের রুট ফোল্ডারে .env.local নামের একটি ফাইল তৈরি করুন। এখানে আমরা সিক্রেট কি এবং প্রোভাইডার ক্রেডেনশিয়াল রাখবো।

Code snippet

# NextAuth Secret (যেকোনো র্যান্ডম স্ট্রিং দিতে পারেন বা openssl দিয়ে জেনারেট করতে পারেন)
NEXTAUTH_SECRET="my_super_secret_key_for_jwt_encryption_2024"
NEXTAUTH_URL="http://localhost:3000"

# Google OAuth Credentials
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"

# GitHub OAuth Credentials
GITHUB_ID="your_github_client_id"
GITHUB_SECRET="your_github_client_secret"

(Google Cloud Console এবং GitHub Developer Settings থেকে এই API Key গুলো ফ্রিতে জেনারেট করে নিতে হবে।)

Step 3: Catch-all API Route তৈরি করা

Next.js App Router-এ NextAuth এর সমস্ত রিকোয়েস্ট (লগইন, লগআউট, সেশন চেক) হ্যান্ডেল করার জন্য একটি API route বানাতে হবে।

app/api/auth/[...nextauth]/route.ts ফাইল তৈরি করুন এবং নিচের কোডগুলো দিন:

TypeScript

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GithubProvider from "next-auth/providers/github";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt", // আমরা JSON Web Token ব্যবহার করবো
  },
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Step 4: Session Provider কনফিগার করা

Client Component-এ ইউজার লগইন আছে কিনা তা চেক করার জন্য পুরো অ্যাপকে SessionProvider দিয়ে wrap করতে হবে।

একটি নতুন ফাইল বানান components/AuthProvider.tsx:

TypeScript

"use client";

import { SessionProvider } from "next-auth/react";

export default function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

এবার app/layout.tsx এ গিয়ে বডির ভেতর এটি ইম্পোর্ট করুন:

TypeScript

import AuthProvider from "@/components/AuthProvider";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AuthProvider>
           {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Step 5: Client-Side এ Authentication হ্যান্ডেল করা (Navbar Example)

ইউজার ইন্টারফেসে লগইন বা লগআউট বাটন দেখানোর জন্য আমরা useSession হুক ব্যবহার করবো।

TypeScript

"use client";
import { useSession, signIn, signOut } from "next-auth/react";

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

  if (status === "loading") {
    return <p>Loading...</p>;
  }

  // যদি ইউজার লগইন করা থাকে
  if (session && session.user) {
    return (
      <div className="flex justify-between items-center p-4 bg-gray-100">
        <div className="flex gap-4 items-center">
          <img src={session.user.image!} alt="Profile" className="w-10 h-10 rounded-full" />
          <div>
            <h3 className="font-bold">{session.user.name}</h3>
            <p className="text-sm text-gray-500">{session.user.email}</p>
          </div>
        </div>
        <button onClick={() => signOut()} className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition">
          Sign Out
        </button>
      </div>
    );
  }

  // যদি ইউজার লগইন করা না থাকে
  return (
    <div className="flex gap-4 p-4 bg-gray-100 justify-end">
      <button onClick={() => signIn("google")} className="bg-blue-600 text-white px-4 py-2 rounded-md">
        Login with Google
      </button>
      <button onClick={() => signIn("github")} className="bg-gray-800 text-white px-4 py-2 rounded-md">
        Login with GitHub
      </button>
    </div>
  );
}

Step 6: Server-Side Data Fetching এবং Route Protection

Next.js এর সবচেয়ে বড় সুবিধা হলো Server Components। সার্ভার সাইডে ইউজারের সেশন চেক করতে আমরা getServerSession ব্যবহার করবো। এটি client-side এর চেয়ে অনেক ফাস্ট।

app/dashboard/page.tsx:

TypeScript

import { getServerSession } from "next-auth";
import { authOptions } from "../api/auth/[...nextauth]/route";
import { redirect } from "next/navigation";

export default async function DashboardPage() {
  // সার্ভার সাইডে সেশন চেক করা হচ্ছে
  const session = await getServerSession(authOptions);

  // ইউজার না থাকলে লগইন পেজে রিডাইরেক্ট করে দেওয়া হবে
  if (!session) {
    redirect("/api/auth/signin");
  }

  return (
    <div className="p-10">
      <h1 className="text-3xl font-bold">Dashboard </h1>
      <div className="mt-5 p-5 bg-green-100 rounded-lg border border-green-300">
        <p>Welcome back, <strong>{session.user?.name}</strong>!</p>
        <p>This is a protected route. Only authenticated users can see this data.</p>
      </div>
    </div>
  );
}

Conclusion

NextAuth with Next.js প্রজেক্টে ইমপ্লিমেন্ট করাটা ঠিক যতটা পাওয়ারফুল, ততটাই ডেভেলপার-ফ্রেন্ডলি।

ম্যানুয়ালি কুকিজ সেট করা, টোকেন ভ্যালিডেট করা বা সিকিউরিটি নিয়ে আপনাকে আলাদা করে ভাবতে হচ্ছে না। এই ব্লগে আমরা দেখেছি কীভাবে Google এবং GitHub প্রোভাইডার সেটআপ করতে হয়, ক্লায়েন্ট ও সার্ভার সাইডে সেশন এক্সেস করতে হয় এবং আনঅথোরাইজড ইউজারদের ব্লক করতে হয়।

আপনি যদি আপনার অ্যাপ্লিকেশনে একটি প্রফেশনাল, স্কেলেবল এবং সিকিউর লগইন সিস্টেম অ্যাড করতে চান, তবে NextAuth.js নিঃসন্দেহে আপনার ফার্স্ট চয়েস হওয়া উচিত। পরবর্তীতে আপনি চাইলে Prisma বা Mongoose Adapter ব্যবহার করে ইউজারের ডেটা সরাসরি আপনার ডাটাবেসেও সংরক্ষণ করতে পারবেন।

আজই আপনার প্রজেক্টে ট্রাই করে দেখুন এবং আপনার ডেভেলপমেন্ট এক্সপেরিয়েন্সকে এক ধাপ এগিয়ে নিন! হ্যাপি কোডিং!