Next.js এর Authentication এবং Authorization গাইড ও নোট

Next.js এর সাথে Authentication এবং Authorization হ্যান্ডল করা একটি গুরুত্বপূর্ণ এবং সাধারণ চ্যালেঞ্জ। যেহেতু Next.js একটি Full-Stack ফ্রেমওয়ার্ক, এটি বিভিন্ন ধরনের অটেন্টিকেশন পদ্ধতি সমর্থন করে, যেমন: JWT (JSON Web Tokens), OAuth, Session Cookies ইত্যাদি।

এখানে, আমরা Next.js এ Authentication (প্রমাণীকরণ) এবং Authorization (অনুমোদন) প্রক্রিয়া এবং তাদের ব্যবহারের পদ্ধতি আলোচনা করব।

১. Authentication (প্রমাণীকরণ)

Authentication হল একটি প্রক্রিয়া যার মাধ্যমে আমরা নিশ্চিত করি যে ব্যবহারকারী আসলেই কে। সাধারণত এটি username এবং password দ্বারা নির্ধারিত হয়। Next.js এ Authentication সেটআপ করার জন্য কয়েকটি পদ্ধতি রয়েছে, যেগুলির মধ্যে সবচেয়ে সাধারণ পদ্ধতি হলো Session-based Authentication এবং JWT-based Authentication।

১.১ Session-based Authentication

Next.js এর সাথে Session-based Authentication ব্যবহার করতে, আপনি সাধারণত সার্ভার সাইড সেশন স্টোরেজ (যেমন: Redis বা database) ব্যবহার করতে পারেন অথবা cookies ব্যবহার করতে পারেন। সাধারণত, ব্যবহারকারী লগইন করার পর, একটি session cookie তৈরি হয়, যা পরবর্তী রিকোয়েস্টে ব্যবহারকারীর অথেনটিকেশন যাচাই করে।

Session-based Authentication ব্যবহারের উদাহরণ:

1. ব্যবহারকারী লগইন হলে সার্ভারে সেশন তৈরি:
   • সার্ভারের API থেকে ব্যবহারকারী লগইন হলে একটি সেশন কুকি সেট করা হবে।
   • কুকিটি ব্রাউজারে স্টোর হয় এবং প্রতিটি পরবর্তী রিকোয়েস্টে সার্ভারে প্রেরিত হয়।
2. সার্ভার সাইডে সেশন যাচাই:
   • পরবর্তী রিকোয়েস্টে কুকি পাওয়া গেলে, সার্ভার সেটি যাচাই করে।

১.২ JWT (JSON Web Token) Authentication

JWT হল একটি জনপ্রিয় Authentication পদ্ধতি, যেখানে একটি এনক্রিপ্টেড টোকেন (JWT) ক্লায়েন্টের ব্রাউজারে বা মোবাইল ডিভাইসে সংরক্ষিত হয় এবং প্রতিটি রিকোয়েস্টে সার্ভারে পাঠানো হয়। JWT সাধারণত Header এবং Payload এর মাধ্যমে ব্যবহৃত হয়, এবং এটি প্রমাণীকরণের জন্য একটি নিরাপদ উপায়।

JWT Authentication ব্যবহারের উদাহরণ:

1. ব্যবহারকারী লগইন হলে সার্ভার JWT প্রদান করবে:
   • ব্যবহারকারী লগইন করার পর, সার্ভার JWT তৈরি করবে এবং ব্যবহারকারীকে ফেরত পাঠাবে।
   • এই JWT ব্যবহারকারীকে ব্রাউজারে (বা অন্যান্য ক্লায়েন্ট সাইডে) সংরক্ষণ করতে বলা হবে (যেমন: localStorage, cookies ইত্যাদিতে)।
2. JWT যাচাই করা:
   • প্রতিটি রিকোয়েস্টে JWT টোকেন সার্ভারে পাঠানো হবে (অথবা হেডারে Authorization এর মাধ্যমে)।
   • সার্ভার JWT যাচাই করে, এবং এর ভিত্তিতে অনুমতি দেয়।

JWT Authentication উদাহরণ:

// pages/api/login.js
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;
    
    // এখানে আপনি ব্যবহারকারীর নাম এবং পাসওয়ার্ড যাচাই করবেন
    if (username === 'admin' && password === 'password') {
      const token = jwt.sign({ username }, 'your_secret_key', { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  }
}

এখানে, যদি ব্যবহারকারী লগইন সফল হয়, তবে একটি JWT টোকেন তৈরি করা হবে।

3. JWT টোকেন যাচাই:

   // pages/api/protected.js
   import jwt from 'jsonwebtoken';
   
   export default function handler(req, res) {
     const token = req.headers['authorization'];
   
     if (!token) {
       return res.status(401).json({ message: 'Token is required' });
     }
   
     try {
       const decoded = jwt.verify(token, 'your_secret_key');
       res.status(200).json({ message: 'Protected content', user: decoded });
     } catch (error) {
       return res.status(403).json({ message: 'Invalid token' });
     }
   }
   

এখানে, jwt.verify() ব্যবহার করে টোকেন যাচাই করা হচ্ছে।

২. Authorization (অনুমোদন)

Authorization হল এমন একটি প্রক্রিয়া যার মাধ্যমে আমরা যাচাই করি যে একটি ব্যবহারকারী একটি নির্দিষ্ট রিসোর্স অ্যাক্সেস করতে পারবে কিনা। এটি সাধারণত প্রমাণীকরণের পরে সম্পন্ন করা হয় এবং নির্দিষ্ট অনুমতি বা ভূমিকা (role) নির্ধারণের মাধ্যমে করা হয়।

২.১ Role-based Authorization

Next.js এ Authorization নির্ধারণ করার জন্য, আপনি সাধারণত role-based access control (RBAC) ব্যবহার করতে পারেন, যেখানে বিভিন্ন রোল (যেমন: Admin, User, Guest) নির্ধারণ করা হয় এবং প্রতিটি রোলের জন্য আলাদা অ্যাক্সেস অনুমতি দেওয়া হয়।

Role-based Authorization উদাহরণ:

// pages/api/admin.js
import { verifyToken } from '../../utils/auth';

export default function handler(req, res) {
  const token = req.headers['authorization'];

  if (!token) {
    return res.status(401).json({ message: 'Authorization token required' });
  }

  try {
    const decoded = verifyToken(token);
    if (decoded.role !== 'admin') {
      return res.status(403).json({ message: 'Access denied' });
    }

    res.status(200).json({ message: 'Admin content' });
  } catch (error) {
    return res.status(403).json({ message: 'Invalid token' });
  }
}

এখানে, JWT টোকেনের মধ্যে role তথ্য যাচাই করে আমরা অনুমতি প্রদান বা অস্বীকার করছি।

৩. Authentication এবং Authorization ব্যবহারের জন্য কিছু প্যাকেজ

Next.js এ Authentication এবং Authorization সহজে পরিচালনা করার জন্য কিছু জনপ্রিয় প্যাকেজ ব্যবহার করা হয়:

• NextAuth.js: একটি জনপ্রিয় প্যাকেজ যা সামাজিক লগইন (Google, Facebook, GitHub) এবং আরও অনেক অটেন্টিকেশন পদ্ধতি সমর্থন করে।
• Passport.js: এটি একটি শক্তিশালী Node.js প্যাকেজ, যা বিভিন্ন ধরণের অটেন্টিকেশন মেথড সমর্থন করে।
• JWT: JSON Web Tokens (JWT) সাধারণত API ভিত্তিক অ্যাপ্লিকেশনগুলির জন্য ব্যবহৃত হয়।

সারাংশ

Next.js এ Authentication এবং Authorization হল দুটি গুরুত্বপূর্ণ দিক যা অ্যাপ্লিকেশনের সিকিউরিটি এবং ব্যবহারের অভিজ্ঞতা নিশ্চিত করতে সাহায্য করে। আপনি বিভিন্ন পদ্ধতি, যেমন Session-based Authentication বা JWT Authentication ব্যবহার করতে পারেন এবং role-based access control দ্বারা Authorization পরিচালনা করতে পারেন। Next.js এর সঙ্গে বিভিন্ন থার্ড-পার্টি লাইব্রেরি যেমন NextAuth.js এবং Passport.js ব্যবহার করে এই প্রক্রিয়াগুলো আরো সহজ করা যায়।

JWT (JSON Web Tokens) একটি জনপ্রিয় অটেনটিকেশন পদ্ধতি, যা সাধারণত ব্যবহারকারীদের সাইন ইন ও সাইন আউট করার জন্য এবং তাদের পরিচয় যাচাই করার জন্য ব্যবহৃত হয়। Next.js এ JWT ব্যবহার করে Authentication সিস্টেম তৈরি করা যায়, যেখানে ব্যবহারকারীর তথ্যকে নিরাপদে স্টোর এবং ভ্যালিডেট করা হয়।

এখানে আমরা দেখব কিভাবে Next.js অ্যাপে JWT ব্যবহার করে Authentication প্রক্রিয়া তৈরি করা যায়।

১. JWT কী?

JWT (JSON Web Token) একটি ওপেন স্ট্যান্ডার্ড (RFC 7519) যা দুটি পক্ষের মধ্যে নিরাপদভাবে তথ্য আদান-প্রদান করতে ব্যবহৃত হয়। এটি সাধারণত তিনটি অংশে বিভক্ত:

1. Header: এই অংশটি JWT এর ধরনের (যেমন JWT) এবং হ্যাশিং অ্যালগরিদমের তথ্য ধারণ করে।
2. Payload: এই অংশে ক্লেইম থাকে, যা কোনো নির্দিষ্ট তথ্য যেমন ইউজারের আইডি বা ইমেইল ধারণ করে।
3. Signature: এই অংশটি নিরাপত্তার জন্য ব্যবহৃত হয়। এটি হেডার ও পে-লোডের উপর ভিত্তি করে তৈরি হয় এবং একটি সিক্রেট কী বা রেসিপি দিয়ে স্বাক্ষরিত হয়।

JWT সাধারণত Authorization প্রক্রিয়ায় ব্যবহার করা হয়, যেখানে ব্যবহারকারী সফলভাবে লগইন করার পর একটি টোকেন প্রদান করা হয়, যা পরবর্তী রিকোয়েস্টে প্রমাণ হিসেবে ব্যবহৃত হয়।

২. Next.js এ JWT Authentication Implement করা

Next.js এ JWT Authentication ইমপ্লিমেন্ট করার জন্য সাধারণত সার্ভার সাইড বা API রাউট ব্যবহার করা হয়। JWT টোকেনটি সাধারণত HTTP রিকোয়েস্টের Authorization হেডারে পাঠানো হয়, যা সার্ভার বা API দ্বারা যাচাই করা হয়।

উদাহরণ: Next.js এ JWT Authentication

এই উদাহরণে, আমরা একটি সাইন ইন পেজ তৈরি করব, যেখানে ব্যবহারকারী তার ক্রেডেনশিয়ালস দিয়ে লগইন করবে এবং একটি JWT টোকেন পাবে। তারপর, এটি পরবর্তী API রিকোয়েস্টে ব্যবহার করা হবে।

৩. সাইন ইন পেজ তৈরি করা

প্রথমে একটি লগইন পেজ তৈরি করুন, যেখানে ব্যবহারকারী তার ইউজারনেম এবং পাসওয়ার্ড দেবে।

pages/login.js:

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();
    
    if (data.token) {
      // JWT টোকেন পাওয়া গেলে তাকে localStorage এ স্টোর করে হোম পেজে রিডিরেক্ট করা হচ্ছে
      localStorage.setItem('token', data.token);
      router.push('/');
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

এখানে, আমরা একটি সাইন ইন ফর্ম তৈরি করেছি, যা ব্যবহারকারীর ইমেইল এবং পাসওয়ার্ড নেয় এবং /api/login API এ POST রিকোয়েস্ট পাঠায়। সফলভাবে লগইন হলে JWT টোকেন localStorage এ সেভ করা হয় এবং ব্যবহারকারীকে হোম পেজে রিডিরেক্ট করা হয়।

৪. API রাউট তৈরি করা

এখন, আমরা /api/login এ একটি POST রিকোয়েস্ট হ্যান্ডলার তৈরি করব যা ইউজারের ক্রেডেনশিয়ালস যাচাই করবে এবং JWT টোকেন প্রদান করবে।

pages/api/login.js:

import jwt from 'jsonwebtoken';

const users = [
  { email: 'user@example.com', password: 'password123', id: 1 },
  { email: 'admin@example.com', password: 'admin123', id: 2 },
];

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;
    
    // ইউজারের ক্রেডেনশিয়ালস যাচাই
    const user = users.find((user) => user.email === email && user.password === password);
    
    if (user) {
      // JWT টোকেন তৈরি
      const token = jwt.sign({ id: user.id, email: user.email }, 'your-secret-key', { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, jwt.sign() ফাংশন ব্যবহার করে একটি JWT টোকেন তৈরি করা হয়েছে। এই টোকেনটিতে ইউজারের ইমেইল এবং আইডি পে-লোড হিসেবে রয়েছে, এবং এটি একটি সিক্রেট কী দিয়ে সাইন করা হয়েছে।

৫. JWT টোকেন ভ্যালিডেট করা

এখন, আপনি যেকোনো API রিকোয়েস্টের জন্য JWT টোকেন ভ্যালিডেট করতে পারেন। এটি সাধারণত একটি middleware হিসেবে কাজ করে, যেটি রিকোয়েস্টের Authorization হেডার থেকে টোকেন বের করে এবং তা যাচাই করে।

pages/api/protected.js:

import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  if (req.method === 'GET') {
    const token = req.headers['authorization']?.split(' ')[1];  // Bearer token

    if (!token) {
      return res.status(403).json({ message: 'No token provided' });
    }

    try {
      // JWT টোকেন যাচাই
      const decoded = jwt.verify(token, 'your-secret-key');
      res.status(200).json({ message: 'Access granted', user: decoded });
    } catch (error) {
      res.status(403).json({ message: 'Invalid or expired token' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, jwt.verify() ফাংশন ব্যবহার করে টোকেনটি যাচাই করা হচ্ছে। যদি টোকেনটি বৈধ হয়, তবে ব্যবহারকারীর তথ্য ফেরত পাঠানো হবে, অন্যথায় এক্সেস অস্বীকার করা হবে।

৬. JWT ব্যবহার করার সুবিধা এবং নিরাপত্তা

• নিরাপত্তা: JWT টোকেনগুলি সিক্রেট কী দিয়ে সাইন করা থাকে, তাই এগুলো সহজে পরিবর্তন করা যায় না।
• স্টেটলেস: JWT হলো স্টেটলেস (Stateless)। এর মানে হল যে সার্ভারকে কোনো স্টেট ম্যানেজমেন্ট করতে হয় না, কারণ সমস্ত তথ্য টোকেনের মধ্যে থাকে।
• সেশন ম্যানেজমেন্ট সহজ: JWT সেশন ম্যানেজমেন্টে সহায়তা করে, যেখানে টোকেনটি ব্যতীত সার্ভারের কোনো সেশন ডেটা নেই।

সারাংশ

Next.js এ JWT Authentication ব্যবহার করে আপনি সুরক্ষিত এবং কার্যকরভাবে ব্যবহারকারীদের লগইন এবং সেশন ম্যানেজমেন্ট করতে পারবেন। JWT একটি স্টেটলেস অথেনটিকেশন সিস্টেম, যা নিরাপদে ব্যবহারকারীর তথ্য সংরক্ষণ এবং যাচাই করতে সহায়তা করে।

Next.js অ্যাপ্লিকেশনগুলোতে OAuth 2.0 এবং সোশ্যাল লগিন (যেমন Google, Facebook, GitHub) ইন্টিগ্রেট করা একটি গুরুত্বপূর্ণ ফিচার, যা ইউজারদের অ্যাক্সেস এবং অ্যানথেনটিকেশন সহজ করে তোলে। OAuth 2.0 এবং সোশ্যাল লগিন সিস্টেমের মাধ্যমে ইউজাররা সহজেই নিজেদের সোশ্যাল অ্যাকাউন্ট ব্যবহার করে লগইন করতে পারেন, যা নিরাপত্তা এবং ব্যবহারকারীর সুবিধার জন্য উপকারী।

Next.js এ OAuth 2.0 এবং সোশ্যাল লগিন ইন্টিগ্রেট করার জন্য NextAuth.js একটি জনপ্রিয় লাইব্রেরি যা আপনাকে সহজে এই কাজগুলো করতে সাহায্য করে। NextAuth.js সাপোর্ট করে বহু ধরনের সোসিয়াল লগিন পদ্ধতি, যেমন: Google, Facebook, GitHub, Twitter ইত্যাদি।

১. NextAuth.js ইনস্টলেশন

NextAuth.js ব্যবহার করতে হলে প্রথমে আপনাকে এই প্যাকেজটি ইনস্টল করতে হবে।

npm install next-auth

এই লাইব্রেরি আপনাকে OAuth 2.0 ভিত্তিক সোশ্যাল লগিন ইন্টিগ্রেশন করতে সাহায্য করবে এবং সহজে JWT (JSON Web Tokens) ব্যবহার করার সুবিধা দেবে।

২. Next.js এ NextAuth.js কনফিগারেশন

NextAuth.js কে কনফিগার করার জন্য আপনাকে pages/api/auth/[...nextauth].js ফাইল তৈরি করতে হবে, যেখানে আপনি আপনার OAuth পদ্ধতিগুলি কনফিগার করবেন।

কনফিগারেশন ফাইলের উদাহরণ:

// pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,  // Google Client ID
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,  // Google Client Secret
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,  // Facebook Client ID
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,  // Facebook Client Secret
    })
  ],
  pages: {
    signIn: '/auth/signin',  // কাস্টম সাইন ইন পেজ (ঐচ্ছিক)
  },
  session: {
    strategy: "jwt",  // JWT ভিত্তিক সেশন ব্যবহার
  },
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token; // Access token যুক্ত করা
      }
      return token;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,  // সিক্রেট কী (যেমন JWT সাইনিং)
});

এখানে, Google এবং Facebook এর জন্য দুটি OAuth পদ্ধতি কনফিগার করা হয়েছে। প্রতিটি প্রোভাইডারের জন্য আপনার clientId এবং clientSecret পেতে হবে যা আপনি সংশ্লিষ্ট সোশ্যাল প্ল্যাটফর্মের ডেভেলপার কনসোল থেকে পেতে পারেন।

সোশ্যাল লগিন প্রোভাইডার কনফিগার করার জন্য প্রাথমিক পদক্ষেপ:

1. Google: Google Developer Console এ গিয়ে একটি প্রজেক্ট তৈরি করুন এবং OAuth 2.0 credentials তৈরি করুন।
2. Facebook: Facebook Developer Console এ গিয়ে অ্যাপ তৈরি করে OAuth 2.0 credentials সংগ্রহ করুন।

৩. সাইন ইন পেজ তৈরি করা

NextAuth.js আপনার অ্যাপ্লিকেশনে একটি ডিফল্ট সাইন ইন পেজ সরবরাহ করে, তবে আপনি চাইলে কাস্টম সাইন ইন পেজও তৈরি করতে পারেন। উদাহরণস্বরূপ, কাস্টম সাইন ইন পেজটি pages/auth/signin.js এ তৈরি করতে পারেন।

// pages/auth/signin.js

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

export default function SignIn() {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn("google")}>Sign in with Google</button>
      <button onClick={() => signIn("facebook")}>Sign in with Facebook</button>
    </div>
  );
}

এখানে, signIn() ফাংশনটি ব্যবহার করে আপনি সোশ্যাল প্রোভাইডার (যেমন Google বা Facebook) দিয়ে লগইন করতে পারবেন।

৪. Auth Context এবং ইউজার ডেটা অ্যাক্সেস করা

NextAuth.js ব্যবহার করে লগইন হওয়া ইউজারের ডেটা অ্যাক্সেস করার জন্য আপনি useSession হুক ব্যবহার করতে পারেন, যা আপনাকে লগইন স্ট্যাটাস এবং ইউজারের তথ্য সরবরাহ করবে।

// pages/index.js

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

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <h1>Welcome, {session.user.name}!</h1>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  } else {
    return (
      <div>
        <h1>Please sign in</h1>
        <button onClick={() => signIn("google")}>Sign in with Google</button>
      </div>
    );
  }
}

এখানে, useSession হুকটি আপনার অ্যাপের মধ্যে ইউজারের লগইন স্ট্যাটাস এবং তথ্য নিয়ন্ত্রণ করতে সাহায্য করবে। signIn() এবং signOut() ফাংশনগুলি দিয়ে আপনি লগইন এবং লগআউট করতে পারবেন।

৫. JWT (JSON Web Tokens) ব্যবহার করা

NextAuth.js JWT (JSON Web Tokens) সাপোর্ট করে, যা আপনাকে সার্ভার এবং ক্লায়েন্টের মধ্যে নিরাপদভাবে ইউজারের তথ্য ট্রান্সফার করতে সাহায্য করে। উপরের কনফিগারেশনে আমরা jwt স্ট্রাটেজি ব্যবহার করেছি যা JWT ভিত্তিক সেশন তৈরি করবে।

JWT কনফিগারেশন উদাহরণ:

callbacks: {
  async jwt({ token, account }) {
    if (account) {
      token.accessToken = account.access_token;  // অ্যাক্সেস টোকেন JWT তে যোগ করা
    }
    return token;
  },
}

এখানে, যখন ইউজার সাইন ইন করেন, তখন অ্যাক্সেস টোকেন JWT তে যুক্ত হয়ে যায় এবং এটি পরবর্তীতে API রিকোয়েস্টে ব্যবহার করা যায়।

৬. ডিপ্লয়মেন্ট

Next.js অ্যাপ্লিকেশন হোস্টিং করার জন্য Vercel বা অন্য কোন সার্ভারে ডিপ্লয় করা যেতে পারে। Vercel এ ডিপ্লয় করার সময় পরিবেশ ভেরিয়েবলগুলি (যেমন GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_SECRET) কনফিগার করতে ভুলবেন না।

সারাংশ

Next.js এ OAuth 2.0 এবং সোশ্যাল লগিন ইন্টিগ্রেশন করা খুবই সহজ। NextAuth.js লাইব্রেরি ব্যবহার করে আপনি Google, Facebook, GitHub এবং অন্যান্য সোশ্যাল প্রোভাইডারদের মাধ্যমে ইউজারদের লগইন করাতে পারেন। এটি JWT (JSON Web Tokens) ব্যবহার করে সেশন ম্যানেজমেন্ট এবং নিরাপদ অথেন্টিকেশন সিস্টেম তৈরি করতে সাহায্য করে।

Role-Based Access Control (RBAC) একটি নিরাপত্তা কৌশল, যেখানে ব্যবহারকারীদের নির্দিষ্ট ভূমিকা (Role) দেওয়া হয় এবং সেই অনুযায়ী তাদের অ্যাপ্লিকেশনের বিভিন্ন অংশে অ্যাক্সেস নিয়ন্ত্রণ করা হয়। Next.js এ RBAC সেটআপ করার জন্য, আপনাকে Auth (Authentication) এবং Authorization (অথরাইজেশন) মেকানিজম প্রয়োগ করতে হবে।

RBAC ব্যবহার করে আপনি বিভিন্ন ইউজারের জন্য বিভিন্ন রোল নির্ধারণ করতে পারবেন এবং সেই অনুযায়ী তাদের অ্যাক্সেস প্রিভিলিজ কাস্টমাইজ করতে পারবেন।

এই টিউটোরিয়ালে আমরা দেখব কীভাবে Next.js এ RBAC কার্যকরভাবে ব্যবহার করা যায়।

১. Authentication (অথেনটিকেশন) ও Authorization (অথরাইজেশন) এর ভূমিকা

• Authentication (অথেনটিকেশন): এটি ব্যবহারকারীর পরিচয় যাচাই করে। যেমন, ইউজারের লগইন ডিটেইলস (ইউজারনেম এবং পাসওয়ার্ড) যাচাই করা।
• Authorization (অথরাইজেশন): এটি ব্যবহারকারীকে নির্দিষ্ট রিসোর্স বা অ্যাপ্লিকেশনের অংশে অ্যাক্সেস দেওয়ার সিদ্ধান্ত নেয়। RBAC ব্যবহারের মাধ্যমে বিভিন্ন রোলের জন্য আলাদা আলাদা অ্যাক্সেস সুবিধা নির্ধারণ করা হয়।

২. RBAC বাস্তবায়ন এর জন্য প্রস্তুতি

Next.js এ RBAC বাস্তবায়ন করার জন্য প্রথমে আপনাকে একটি অথেনটিকেশন ব্যবস্থা তৈরি করতে হবে, যেটি ইউজারের রোল সংরক্ষণ করবে। আমরা এখানে একটি সাধারণ উদাহরণ হিসেবে JWT (JSON Web Tokens) ব্যবহার করব।

প্রয়োজনীয় প্যাকেজ ইনস্টল করা:

npm install jsonwebtoken cookie

• jsonwebtoken: JWT টোকেন তৈরি এবং যাচাই করার জন্য ব্যবহৃত হবে।
• cookie: ব্রাউজারে কুকি সেট ও পার্স করার জন্য ব্যবহৃত হবে।

৩. Authentication (লগইন) সিস্টেম তৈরি করা

প্রথমে, আমাদের একটি লগইন সিস্টেম তৈরি করতে হবে, যেখানে ইউজারের রোল নির্ধারণ করা হবে এবং সেই রোলটি JWT টোকেনের মধ্যে সংরক্ষণ করা হবে।

লগইন API উদাহরণ:

// pages/api/login.js
import jwt from 'jsonwebtoken';
import cookie from 'cookie';

const SECRET_KEY = 'your-secret-key'; // এটি সিক্রেট কী হিসেবে ব্যবহার হবে

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;
    
    // ইউজারের রোল ডিফাইন করা (এটা সাধারণত ডাটাবেস থেকে আসবে)
    const user = {
      username: 'admin',
      password: 'admin123',
      role: 'admin',  // ইউজারের রোল 'admin' হিসাবে সন্নিবেশিত
    };
    
    // পাসওয়ার্ড যাচাই (এখানে কেবল উদাহরণ)
    if (username === user.username && password === user.password) {
      const token = jwt.sign({ username: user.username, role: user.role }, SECRET_KEY, { expiresIn: '1h' });

      // JWT কুকি সেট করা
      res.setHeader('Set-Cookie', cookie.serialize('auth_token', token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        maxAge: 60 * 60,
        path: '/',
      }));
      
      return res.status(200).json({ message: 'Login successful' });
    } else {
      return res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    return res.status(405).json({ message: 'Method not allowed' });
  }
}

ব্যাখ্যা:

• আমরা একটি POST রিকোয়েস্টের মাধ্যমে ইউজারের লগইন তথ্য যাচাই করেছি।
• যদি ইউজার সঠিক তথ্য প্রদান করে, তবে একটি JWT টোকেন তৈরি করা হয়, যা ইউজারের রোলও ধারণ করে।
• JWT কুকি হিসেবে ব্রাউজারে সেট করা হয়।

৪. Authorization (অথরাইজেশন) এর মাধ্যমে RBAC বাস্তবায়ন

RBAC কার্যকর করতে, আপনার অ্যাপের বিভিন্ন অংশে ইউজারের রোল অনুসারে অ্যাক্সেস নিয়ন্ত্রণ করতে হবে। Next.js এ আপনি getServerSideProps অথবা getInitialProps ব্যবহার করে রোল চেক করতে পারেন।

Role-Based Access Control উদাহরণ:

// pages/admin.js
import jwt from 'jsonwebtoken';
import cookie from 'cookie';

const SECRET_KEY = 'your-secret-key';

export async function getServerSideProps({ req }) {
  const cookies = cookie.parse(req.headers.cookie || '');
  const token = cookies.auth_token || '';

  try {
    // JWT টোকেন যাচাই
    const decoded = jwt.verify(token, SECRET_KEY);
    
    // রোল চেক করা
    if (decoded.role !== 'admin') {
      return {
        redirect: {
          destination: '/unauthorized',  // Unauthorized পেজে রিডিরেক্ট করা
          permanent: false,
        },
      };
    }

    // রোল 'admin' হলে অ্যাডমিন পেজ রেন্ডার করা
    return { props: { user: decoded } };

  } catch (error) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
}

const AdminPage = ({ user }) => {
  return (
    <div>
      <h1>Welcome, {user.username}</h1>
      <p>This is the admin page.</p>
    </div>
  );
}

export default AdminPage;

ব্যাখ্যা:

• getServerSideProps এর মাধ্যমে আমরা কুকি থেকে JWT টোকেন পড়ছি এবং সেটি যাচাই করছি।
• যদি টোকেন বৈধ হয় এবং ইউজারের রোল 'admin' হয়, তবে অ্যাডমিন পেজ রেন্ডার হবে। যদি না হয়, তবে ইউজারকে /unauthorized অথবা /login পেজে রিডিরেক্ট করা হবে।

৫. Unauthorized পেজ তৈরি করা

// pages/unauthorized.js
const Unauthorized = () => {
  return (
    <div>
      <h1>Unauthorized Access</h1>
      <p>You do not have permission to access this page.</p>
    </div>
  );
}

export default Unauthorized;

৬. Logout ফাংশন তৈরি করা

আপনি একটি লগআউট ফাংশনও তৈরি করতে পারেন, যা JWT টোকেন কুকি থেকে রিমুভ করে দেয়।

// pages/api/logout.js
import cookie from 'cookie';

export default function handler(req, res) {
  res.setHeader('Set-Cookie', cookie.serialize('auth_token', '', {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    expires: new Date(0),
    path: '/',
  }));
  
  res.status(200).json({ message: 'Logged out successfully' });
}

সারাংশ

Next.js এ RBAC (Role-Based Access Control) কার্যকর করতে আপনাকে একটি অথেনটিকেশন সিস্টেম তৈরি করতে হবে, যা JWT টোকেন ব্যবহার করবে। আপনি getServerSideProps বা getInitialProps এর মাধ্যমে ইউজারের রোল যাচাই করতে পারেন এবং রোল অনুযায়ী অ্যাক্সেস নিয়ন্ত্রণ করতে পারবেন। এই প্রক্রিয়ায়, অ্যাডমিন, ইউজার, গেস্ট ইত্যাদি বিভিন্ন রোলের জন্য নির্দিষ্ট পেজ এবং ফিচারের অ্যাক্সেস কাস্টমাইজ করা সম্ভব।

Next.js এ Authenticated Routes এবং Protected Pages তৈরি করা নিরাপত্তা নিশ্চিত করতে এবং ব্যবহারকারীকে নির্দিষ্ট রিসোর্স বা পেজে অ্যাক্সেস দেওয়ার জন্য একটি গুরুত্বপূর্ণ পদক্ষেপ। এটি সাধারণত authentication এবং authorization ব্যবস্থা অন্তর্ভুক্ত করে, যেখানে ব্যবহারকারীকে লগইন বা সাইন আপ করার পরই নির্দিষ্ট পেজগুলোতে প্রবেশ করতে দেওয়া হয়।

এখানে আমরা দেখবো কিভাবে Next.js এ Authenticated Routes এবং Protected Pages তৈরি করা যায়।

১. Authentication এবং Authorization এর ধারণা

• Authentication: এটি নিশ্চিত করে যে ব্যবহারকারী প্রকৃতপক্ষে কে এবং তারা সিস্টেমে লগইন করা আছে কি না।
• Authorization: এটি নিশ্চিত করে যে লগইন করা ব্যবহারকারীটি নির্দিষ্ট রিসোর্স বা পেজে প্রবেশের জন্য অনুমোদিত কিনা।

Next.js এ JWT (JSON Web Token) বা Session-Based Authentication ব্যবহৃত হতে পারে। এখানে আমরা JWT Authentication ব্যবহার করে Authenticated Routes এবং Protected Pages তৈরি করার পদ্ধতি দেখবো।

২. JWT Authentication এর মাধ্যমে Authenticated Routes তৈরি করা

JWT ভিত্তিক authentication ব্যবহারে, ব্যবহারকারী সফলভাবে লগইন করার পর একটি টোকেন পাওয়ার মাধ্যমে তাদের পরিচয় যাচাই করা হয়। এই টোকেনটি সাধারণত localStorage বা cookies তে সংরক্ষিত থাকে এবং এটি পরবর্তী রিকোয়েস্টে সার্ভারে পাঠানো হয়।

২.১. JWT ইনস্টলেশন এবং সেটআপ

প্রথমে, আপনাকে JWT টোকেন ব্যবহার করার জন্য প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।

npm install jsonwebtoken cookie

এটি JWT টোকেন সাইন এবং ভেরিফাই করতে সাহায্য করবে এবং cookie প্যাকেজটি টোকেনকে ক্লায়েন্ট সাইডে সংরক্ষণ করবে।

২.২. লগইন পেজ তৈরি করা

লগইন পেজ তৈরি করা যাতে ব্যবহারকারী তাদের ক্রেডেনশিয়ালস প্রদান করে এবং টোকেন পান।

// pages/login.js
import { useState } from 'react';
import { useRouter } from 'next/router';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // ডেমো লগইন API কল (আপনার নিজের API ব্যবহার করুন)
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();

    if (data.token) {
      // টোকেন কুকিতে সংরক্ষণ করুন
      document.cookie = `token=${data.token}; path=/`;
      router.push('/dashboard');  // লগইন সফল হলে ড্যাশবোর্ডে পাঠানো হবে
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input 
          type="email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          placeholder="Email" 
          required 
        />
        <input 
          type="password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          placeholder="Password" 
          required 
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

এখানে, লগইন সফল হলে ব্যবহারকারীকে টোকেন দেওয়া হচ্ছে এবং টোকেনটি কুকিতে সংরক্ষিত হচ্ছে। এরপর ব্যবহারকারীকে /dashboard রুটে রিডিরেক্ট করা হচ্ছে।

৩. Protected Routes তৈরি করা

Next.js এ আপনি getServerSideProps অথবা useEffect ব্যবহার করে protected pages তৈরি করতে পারেন। JWT Authentication ব্যবহারের জন্য সাধারণত getServerSideProps ব্যবহার করা হয়, যাতে আপনি সার্ভার সাইডেই টোকেন চেক করতে পারেন এবং ব্যবহারকারীর অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন।

৩.১. প্রোটেক্টেড পেজ তৈরি করা

ধরা যাক আমাদের একটি dashboard পেজ আছে, যেখানে লগইন না করা ব্যবহারকারীরা প্রবেশ করতে পারবেন না।

// pages/dashboard.js
import { parse } from 'cookie';
import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
  // কুকি থেকে টোকেন বের করা
  const cookies = parse(context.req.headers.cookie || '');
  const token = cookies.token || null;

  if (!token) {
    // টোকেন না থাকলে, ব্যবহারকারীকে লগইন পেজে পাঠানো
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  // টোকেন যাচাই করা (আপনার API এর মাধ্যমে)
  const res = await fetch('https://api.example.com/verify-token', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  const data = await res.json();

  if (!data.isValid) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: {},  // টোকেন যাচাই সফল হলে ড্যাশবোর্ড পেজ রেন্ডার হবে
  };
}

export default function Dashboard() {
  return (
    <div>
      <h1>Welcome to the Dashboard</h1>
    </div>
  );
}

এখানে getServerSideProps ব্যবহার করা হয়েছে যা সার্ভার সাইডে টোকেন যাচাই করে। যদি টোকেন না থাকে অথবা টোকেন ইনভ্যালিড হয়, তবে ব্যবহারকারীকে লগইন পেজে রিডিরেক্ট করা হবে।

৪. Auth Context ব্যবহার করে Authenticated Routes

আপনি React Context API ব্যবহার করে ব্যবহারকারীর authentication স্টেট সেন্ট্রালাইজ করে, কম্পোনেন্টগুলোর মধ্যে শেয়ার করতে পারেন। এটি অ্যাপের সকল অংশে ব্যবহারকারীকে চেক করার একটি ভালো উপায় হতে পারে।

৪.১. Auth Context তৈরি করা

// context/AuthContext.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(null);

  const login = (token) => {
    setAuth(token);
    document.cookie = `token=${token}; path=/`;
  };

  const logout = () => {
    setAuth(null);
    document.cookie = 'token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
  };

  return (
    <AuthContext.Provider value={{ auth, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

৪.২. Context এর মাধ্যমে প্রোটেক্টেড রুট পরিচালনা করা

// pages/dashboard.js
import { useAuth } from '../context/AuthContext';
import { useRouter } from 'next/router';

export default function Dashboard() {
  const { auth } = useAuth();
  const router = useRouter();

  if (!auth) {
    router.push('/login');
    return null;
  }

  return (
    <div>
      <h1>Welcome to the Dashboard</h1>
    </div>
  );
}

এখানে Auth Context ব্যবহৃত হচ্ছে যাতে অ্যাপের মধ্যে যেকোনো জায়গায় authentication স্টেট পাওয়া যায়।

সারাংশ

Next.js এ Authenticated Routes এবং Protected Pages তৈরি করতে, আপনি JWT, cookies, এবং getServerSideProps ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের লগইন করার পর তাদের পেজের অ্যাক্সেস নিয়ন্ত্রণ করতে সহায়তা করে। Context API এর মাধ্যমে এই স্টেট গ্লোবালি পরিচালনা করাও একটি জনপ্রিয় পদ্ধতি।